Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

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>
share|improve this answer
    
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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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