AnythingSlider playground

Add, remove, adjust any or all options so you can see how it works.

by Mottie

HTML

<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/anythingslider.css">
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/swfobject.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.fx.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.video.js"></script>
<div id="wrap">
    <ul id="slider">
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-civil-1.jpg" alt="" /></li>
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-env-1.jpg" /></li>
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-civil-2.jpg" /></li>
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-env-2.jpg" /></li>
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-civil-1.jpg" alt="" /></li>
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-env-1.jpg" /></li>
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-civil-2.jpg" /></li>
        <li><img src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-env-2.jpg" /></li>
    </ul>
</div>

<!-- Add stylesheets here -->
<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css">

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
ul#slider {
    width: 300px;
    height: 200px;
    list-style: none;
}

/* #wrap added to increase css priority (override anythingslider.css settings) */

/* needed so the thumbnails don't get cut off */
#wrap div.anythingSlider {
    padding-bottom: 0;
}

/* border around link (image) to show current panel */
#wrap div.anythingSlider .thumbNav a:hover,
#wrap div.anythingSlider .thumbNav a.cur {
    border-color: #d00;
}

#wrap div.anythingSlider .anythingControls {
    z-index: 100;
    height: 35px;
    opacity: 0.90;
    filter: alpha(opacity=90);
    float: right;
    position: absolute;
    bottom: 0;
    left: 60px; /* this left value includes the width of the left arrow (45px) */
    width: 270px;
}

#wrap div.anythingSlider .thumbNav {
    display: block;
    float: left;
    margin: 0;
    z-index: 100;
}

#wrap div.anythingSlider .thumbNav li {
    display: block;
    float: left;
}

/* link around thumbnail image */
#wrap div.anythingSlider .thumbNav a {
    background: transparent;
    display: block;
    height: 30px;
    width: 30px;
    margin: 2px 4px;
    padding: 0;
    outline: 0;
}
/* Thumbnail image */
#wrap div.anythingSlider .thumbNav .thumb {
    height: 30px;
    width: 30px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: #000 1px solid;
}

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
    display:none;
    background: #000;
    font-size:12px;
    height:30px;
    width:60px;
    padding:10px;
    color:#fff;    
}

JavaScript

var fadeTime = 400,
    fadeDelay = 5000, // hide after 5 second delay
    timer,
    hideControls = function(slider){
        clearTimeout(timer);
        setTimeout(function(){
            slider.$controls.fadeOut(fadeTime);
            $('.tooltip').fadeOut(fadeTime);
        }, fadeDelay); 
    };

$('#slider').anythingSlider({
    
    navigationSize: 3,
    
    navigationFormatter: function(i, panel) { 
        var url = 'http://css-tricks.github.com/AnythingSlider/demos/images/th-slide-',
        //  [ 'image name', 'tooltip title' ],
        thumbs = [
            [ 'civil-1', 'tooltip 1' ],
            [ 'env-1', 'tooltip 2' ],
            [ 'civil-2', 'tooltip 3' ],
            [ 'env-2', 'tooltip 4' ],
            [ 'civil-1', 'tooltip 5' ],
            [ 'env-1', 'tooltip 6' ],
            [ 'civil-2', 'tooltip 7' ],
            [ 'env-2', 'tooltip 8' ],
        ];
        return '<img title="' + thumbs[i-1][1] + '" src="' + url + thumbs[i-1][0] + '.jpg">';
    },

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
        hideControls(slider);
        slider.$wrapper.hover(function(){
            clearTimeout(timer);
            slider.$controls.fadeIn(fadeTime);
        }, function(){
            hideControls(slider);
        });
        
        slider.$controls.find('img').tooltip();
        
    },
    
});