Slideshow

As part of a new UI library, I have put together a slideshow feature using a modified versions of Really Simple™ Slideshow in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The Slideshow supports the following features:

• Control the order of the slides.
• Images are loaded dynamically as each one is required, and not all at once.
• Control how long the slide shows (interval).
• Control how long it takes for a slide to change (transition).
• Option to automatically play the slideshow on load.
• Option to repeatidly loop through the slides.
• UI Manifesto compliance:
  • Loosely Coupled Markup
  • Functional Flexibility
  • Simple Implementation

The Demo

The Markup

Just some basic page elements (<div>, <ol>, <li>, <img>, <a> etc.), with a normal class attribute and some custom data (data-*) attributes to allow feature customization. Once the CSS and Script stuff are in place on a website, any page can implement the Slideshow by simply setting the top-level wrapping element of the slideshow markup with the class attribute to "slideshow" and the other applicable child element classes, and setting the desired optional custom data attributes. The custom data attributes are optional, so the accordion could simple have only the standard markup plus the class attribute.

That sounds like a DRY solution to me (see UI Manifesto).

 
<div id="hdivSampleSlideshow" class="slideshow slideshowBodyLeft"
data-intervalSeconds="5"
data-transitionMilliseconds="1000"
data-autoStart="true"
data-loop="true">
    <div class="slideshowContainer">
        <a href="?sample1">
            <img src="Sample1.jpg" title="Sample title #1" alt="Sample image #1"/>
        </a>
    </div>
    <ol class="slideshowSlides">
        <li>
            <a href="?sample1" data-imageUrl="Sample1.jpg" data-imageTitle="Sample title #1" data-imageAlt="Sample image #1"></a>
        </li>
        <li>
            <a href="?sample2" data-imageUrl="Sample2.jpg" data-imageTitle="Sample title #2" data-imageAlt="Sample image #2"></a>
        </li>
        <li>
            <a href="?sample3" data-imageUrl="Sample3.jpg" data-imageTitle="Sample title #3" data-imageAlt="Sample image #3"></a>
        </li>
        <li>
            <a href="?sample4" data-imageUrl="Sample4.jpg" data-imageTitle="Sample title #4" data-imageAlt="Sample image #4"></a>
        </li>
    </ol>
</div> 

The Script

//Enable SlideShow(s)
lastErroredCallTrace += "->slideshow";
$(parentElementSelector + " .slideshow").each(function () {
    var tempThisVar = $(this);
    self.setTimeout(function () { enableFeature_SlideShow(tempThisVar); }, 1);
}); 

function enableFeature_SlideShow(targetElement) {
    lastErroredCallTrace += "->enableFeature_SlideShow";

    //Check to see if already enabled.
    if (!isAttrDefined(targetElement.attr("data-slideshowEnabled"))) {
        targetElement.rsfSlideshow({
            interval: ((!isAttrDefined(targetElement.attr("data-intervalSeconds"))) ? 5 : eval(targetElement.attr("data-intervalSeconds"))),
            transition: ((!isAttrDefined(targetElement.attr("data-transitionMilliseconds"))) ? 1000 : eval(targetElement.attr("data-transitionMilliseconds"))),
            slides: [],
            autostart: ((targetElement.attr("data-autoStart") == "false") ? false : true),
            loop: ((targetElement.attr("data-loop") == "false") ? false : true),
            controls: {
                previousSlide: { autostop: true, auto: true },
                index: { autostop: true, auto: true },
                nextSlide: { autostop: true, auto: true }
            }
        });	

        //Mark as enabled.
        targetElement.attr("data-slideshowEnabled", true);
    }		
}

/**
 *    Really Simple™ Slideshow jQuery plug-in 1.4.11 - CUSTOMIZED
 */

The CSS

 
/**
*    Really Simple™ Slideshow -- CSS
**/
.slideshow 
{
    float:left;
    background-color:#FFF;
    border: 1px solid #FFF;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.slideshowBodyLeft  
{
    background-color:#50692A; 
    border:solid 1px #FFF;  
    width:450px;
    max-width:98%;
    height:300px;
    border:solid 3px #50692A;
}
.slideshow .slideshowContainer {
    background-color: #444;
    position: absolute;
    height: 100%;
    width: 100%;
    left: -1px;
    overflow: hidden;
    top: -1px;
}
.slideshowContainer:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.slideshow .slideshowContainer img {
    position: relative;
    max-width:100%;    
}
.slideshow .slideshowSlides {
    display: none;
}
.slideshow .slideshowContainer img,
.slideshow .slideshowContainer,
.slideshow .slideshowContainer a {
    filter: inherit;	
}

/*
*    The following styles are used in the demos with slideshow controls, 
*    such as play/pause and prev/next buttons.
*/
.rs-controls {
    float: left;
    margin:-33px 0 24px 9px;
    width:100%;	
}

a.rs-prev, a.rs-next {
    float: left;
    margin-right: 12px;
}
.rs-controls ul {
    float: left;
    list-style: none;
    margin: 0 6px 0 0;
    padding: 0;
}
.rs-index-list li {
    float: left;
    margin-right: 8px;
	position:relative;
	z-index:10;
}
.rs-controls a {
    background-color:#0C0A0A;    
    color:#CCC;
    opacity:0.6;
    display: block;
    font-weight: bold;
    padding:4px 2px 1px 2px;
    text-decoration: none;
    text-align:center;
	width:20px;
	height:20px;
}
.rs-controls a:hover {
    background-color: #585858;
    color: white;
}
.rs-controls .rs-active {
    background-color: #0D0D0E;
	opacity:1;
	color:white;	
}