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>
<!-- 
********************
Load slider up from a Flickr feed 
thanks to Jamy (https://github.com/JamyGolden)
and TheDoc from the CSS-Tricks Forums
******************** -->

<ul id="slider"></ul>

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

<p style="text-align: center; margin-top: 20px;">* Photo credits to <a href="http://www.flickr.com/photos/jup3nep/with/5600377296/">Katarina 2353</a></p>

CSS

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

/* resizeContent: true won't work because
   each image is wrapped in a link, so the
   link is resized, not the image */
ul#slider img {
    width: 100%;
    height: 100%;
}

JavaScript

var maxImages = 8,
    feedUrl = "http://api.flickr.com/services/feeds/photos_public.gne?id=72179079@N00&lang=en-us&format=json&jsoncallback=?";

$.getJSON(feedUrl, function(data) {
    // process feed
    $.each(data.items, function(i, item) {
        if (i < maxImages) {
            var imgsrc = item.media.m; // thumbnail
                // full-sized image
                fullImg = imgsrc.replace(/_m.jpg/gi, "_z.jpg");
            $("<img />")
                .attr("src", imgsrc) // change "imgsrc" to "fullImg" as desired
                .appendTo("#slider")
                .wrap('<li><a href="' + item.link + '" target="_blank" /></li>');
        }
    });

    // initialize the slider
    $('#slider').anythingSlider();

});