Mobile app version of vmapp.org
Login or Join
Holmes151

: What is a light-weight "slideshow" script that could integrate w/ CMS? I'm looking to reduce the footprint of my Strict html 4.01 front page. One possible way is to combine much of the "upcoming

@Holmes151

Posted in: #Javascript #Php

I'm looking to reduce the footprint of my Strict html 4.01 front page. One possible way is to combine much of the "upcoming events" into a single small box, and have them automagically switch which one is displayed every few seconds. I'm sure there are a bunch of this kind of thing written already, and surely an open source one exists, but I haven't had much luck find one.

I'd prefer javascript to jQuery as installing jQuery might not be an option, but if the best-fit script requires jQuery I'd certainly be willing to investigate that route.

If it can display content from Wordpress that would be ideal.

10.01% popularity Vote Up Vote Down

Login to follow query

More posts by @Holmes151

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

 

@XinRu657

This is a really simple task for jQuery - there are some concerns (i.e. variable slideshow slides) that aren't easy to solve in basic Javascript, so I would stick with a framework... preferably whichever framework is already in use at your site.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slideshow</title>
<style type="text/css">
div.slide,
div#slideshow {
height:240px;
width:340px;
padding:2px 8px;
overflow:hidden;
}
div.slide {
display:none;
}
div#slideshow {
border:dashed 1px #C0C0C0 ;
}
div#slide0 {
display:block;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
// Configuration: Set time out interval in seconds
var slideTimeout = 5;
// EOF_Configuration
var showTimerID = 0;
var slidePointer = -1;
var slides = new Array();
function advanceSlide() {
var lastSlide = slidePointer;
if ( slidePointer >= (slides.length - 1) ) {
slidePointer = 0;
} else {
slidePointer++;
}
var nextSlide = slidePointer;
$('div#'+slides[lastSlide]).fadeOut();
$('div#'+slides[nextSlide]).fadeIn();
showTimerID = setTimeout( 'advanceSlide()', slideTimeout * 1000 );
}
function registerSlide( slideNo ) {
slides.push( slideNo );
}
function stopShow() {
if ( showTimerID ) {
clearTimeout(showTimerID);
}
}
$(document).ready(function() {
if ( $('div.slide').length ) {
$('div.slide').each(function() {
registerSlide( $(this).attr('id') );
});
$('div.slide').bind( 'mouseenter', function() {
stopShow();
});
$('div.slide').bind( 'mouseleave', function() {
advanceSlide();
});
advanceSlide();
}
});
</script>
</head>
<body>
<h1>Slideshow Example</h1>
<p>This page demonstrates a simple timed slideshow.</p>
<div id="slideshow">
<noscript>
<div class="slide" id="slide0">
<p>Learn more about:</p>
<p><a href="/path/to/slide1/destination">Slide I</a></p>
<p><a href="/path/to/slide2/destination">Slide II</a></p>
<p><a href="/path/to/slide3/destination">Slide III</a></p>
</div>
</noscript>
<div class="slide" id="slide1">
<p><a href="/path/to/slide1/destination">Slide I</a></p>
<p>Some content specific to this slide...</p>
</div>
<div class="slide" id="slide2">
<p><a href="/path/to/slide2/destination">Slide II</a></p>
<img src="http://upload.wikimedia.org/wikipedia/commons/6/66/Badger.jpg" alt="BADGER" style="height:200px;width:320px;" />
</div>
<div class="slide" id="slide3">
<p><a href="/path/to/slide3/destination">Slide III</a></p>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Coast_Garter_Snake.jpg/800px-Coast_Garter_Snake.jpg" alt="SNAKE" style="height:200px;width:320px;" />
</div>
</div>
</body>
</html>

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme