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>
current: <span id="current"></span>

<br>
<nav> <a href="#cat" class="link">cat</a>
 <a href="#grey" class="link">grey</a>
 <a href="#random" class="link">random</a>
 <a href="#bear" class="link">bear</a>
 <a href="#animal" class="link">animal</a>
 <a href="#grey2" class="link">grey2</a>

</nav>
<div class="title">Click on slide #5 to see empty slides 2 through 4.</div>
<br>
<ul id="slider">
    <li id="cat">
        <img src="" data-src="http://placekitten.com/300/200" alt="" />
    </li>
    <li id="grey">
        <img src="" data-src="http://placehold.it/300x200" alt="" />
    </li>
    <li id="random">
        <img src="" data-src="http://lorempixel.com/300/200/transport" alt="" />
    </li>
    <li id="bear">
        <img src="" data-src="http://placebear.com/300/200" alt="">
    </li>
    <li id="animal">
        <img src="" data-src="http://lorempixel.com/300/200/animals" alt="">
    </li>
    <li id="grey2">
        <img src="" data-src="http://placehold.it/300x200" alt="" />
    </li>
</ul>
<br>
<ul class="message">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
 ul#slider {
    width: 300px;
    height: 200px;
    list-style: none;
}
.title, .message {
    text-align: center;
}
b {
    color: red;
}
i {
    color: green;
}

JavaScript

// This part of the code is
// for demo purposes only
// *************************

var message = function (file, p, l) {
    var txt = l ? '<i>loading #' + p + '</i>' : '<b>preventing load #' + p + '</b>';
    // show loading message
    $('.message').append('<li>' + txt + ': ' + file + '</li>').find('li:first').remove();
};
// The code above is for this demo only
// *************************
// load image
var loadImg = function (slider, page) {
    slider.$items.eq(page-1).find('img').each(function () {
        if ($(this).attr('src') === '') {
            var newsrc = $(this).attr('data-src');
            $(this).attr('src', newsrc);

            // update loading message
            message(newsrc, page, true); // *** for demo only ***
        }
    });
};

$('#slider').anythingSlider({
    hashTags: false,
    infiniteSlides: false,
    // Callback when the plugin finished initializing
    onBeforeInitialize: function (e, slider) {
        var hash = window.location.hash;
        if (hash && $(hash).length) {
            slider.options.startPanel = $(hash).closest('li').index() + 1;
        }
    },
    resizeContents: false,

    // *********** Callbacks ***********
    // Callback when the plugin finished initializing
    onInitialized: function (e, slider) {
        var start = slider.options.startPanel;
        // allow start & cloned panel images to load
        // the rest get the src removed.
        slider.$items.eq(start-1).siblings(':not(.cloned)').find('img').each(function () {
            var $el = $(this);
            $el.attr('src', function (i, src) {
                if (src !== '') {
                    $el.attr('data-src', src);

                    // update loading message
                    message(src, i + 1, false); // *** for demo only ***
                }
                return '';
            });
        });
        // load current image
        loadImg(slider, slider.currentPage);
    },

    // Callback when slide initiates,...