1
vote

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.

|
2
votes

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>
|
  • How would I navigate between the slides? FREX if I wanted a back/next button on each slide? I'm still pretty new to this whole jQuery thing. – aslum Feb 9 '11 at 21:20
  • 1
    Well you would need to add your own console for forward/back operations (if I get around to drafting a jQuery blog this might be a good candidate :) but I added mouseEnter/mouseLeave events for the pause and start operations and jQuery has great documentation: jquery.com – danlefree Feb 9 '11 at 21:32

Not the answer you're looking for? Browse other questions tagged or ask your own question.