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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<ul id="slider">
    <li><img src="http://placekitten.com/300/200" alt="" /></li>
    <li>
        <div class="test">
            <p>test content</p>
            <a href="#" id="clickme">click to expand</a>
            <div id="book">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                sed diam nonummy nibh euismod tincidunt ut laoreet dolore
                magna aliquam erat volutpat.</p>
                <p>Claritas est etiam processus dynamicus, qui sequitur
                mutationem consuetudium lectorum.</p>
            </div>
        </div>
    </li>
    <li><img src="http://placedog.com/300/200" alt="" /></li>
    <li><img src="http://lorempixel.com/300/200" alt="" /></li>
    <li><img src="http://placebear.com/300/200" alt="" /></li>
</ul>

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

<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
/* added #slider li to make panels the same size in case "resizeContents" is false */
ul#slider {
    width: 300px;
    height: 200px;
    list-style: none;
}
.test {
    width: 280px;
    min-height: 100px;
    height: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

#book {
    width: 250px;
}

JavaScript

// adjust height of AnythingSlider
var book = $('#book'),
    adjustHt = function(tar) {
        // animate the slider height to match the accordion height
        var panel = tar.closest('.panel'),
            // adding a little extra spacing since ".test" is shifted down
            // about 25 pix for some reason
            newHt = 20,

            // target page index
            num = panel.index(),
            // calculate height of all visibile panel contents
            hts = panel.children().children(':visible').map(function(i, e) {
                return (newHt += $(e).outerHeight(true));
            }).get();
        // change height for plugin to prevent height jumping when changing slides
        $('#slider').data('AnythingSlider').panelSize[num][1] = newHt;
        // animate height of slider and panel
        $('.anythingSlider, .panel:eq(' + num + ')').animate({
            height: newHt
        }, 600);
    };

book.hide();
$('#clickme').click(function() {
    book.slideToggle('slow', function() {
        adjustHt(book);
    });
    return false;
});

$('#slider').anythingSlider({
    // If true, solitary images/objects in the panel will expand to fit the viewport
    resizeContents: false
});