chronx Find something you love to do and you'll never have to work another day for the rest of your life

SlideShow

An example of the finished product is being used above in the header

I recently started using flickr instead of my old Gallery2 setup. Obviously flickr is the way to go since it scales nicely and has great API support.

So now I have a great repository and management for my photos but I couldn't find what I was looking for in the way of a slideshow. I needed one that allows me to scroll images from an RSS feed. Most of the plugins out there were setup to use flash and didn't actually scroll, they simply displayed one image at a time. This was not good enough for me. I wanted the old school, stack up all the images and scroll them across the screen. And I absolutely did not want flash/swf to be a player in this in any way(I hate flash).

In theory this class can be modified to handle any RSS feed including markup and not just json responses. But that's for another day.

So over the weekend I whipped together my own slideshow. It's in the early stages but I am putting the code here for anyone who wants to use it as-is. I will refine it as I use it and possibly turn it into a WP plugin at some point. Right now it is designed to run in a WordPress environment but can absolutely run standalone as long as you include jQuery before the following steps.

enough already, let's go...

** REQUIRED **
You need jQuery included for this to work. Make sure you have a jQuery version greater than 1.2.6. If you are using a WordPress setup >2.5 you don't have to do anything.

Now you need to add some code to your page. This can be done anywhere(post, page, file) I added this to my header file so it is static across all my pages.

Step 1) Add the slideshow script

You will need to either download the slideshow.js and then upload it to your host or copy the code at the bottom and paste it inline in your code. Don't link to this file(slideshow.js) as it WILL be renamed, versioned, and eventually cached somewhere other than my host which means if you use it your slideshow will eventually break.

<script src="http://github.com/oxchronxo/Slideshow/raw/master/ef.slideshow.js" type="text/javascript"></script>

Replace the url above pointing to the slideshow library ...

http://github.com/oxchronxo/Slideshow/raw/master/ef.slideshow.js

... with the location of your file. Or skip this in the case where you use the code inline.

Step 2) Add the appropriate markup

<div id="slideshow">
    <div id="slideshow-container">
        <div id="slideshow-clipper"></div>
    </div>
</div>

Step 3) Initialize the slideshow
You need to init the slideshow and pass it a few parameters.

<script type="text/javascript">
    var slideshow = new slideshow({
        // baseId {String} refers to the id assigned to the outer div above
        baseId: 'slideshow',
        // feed {String} represents the flickr RSS feed you will pull from
        feed: 'http://api.flickr.com/services/feeds/photoset.gne?set=72157610669512045&nsid=82537533@N00&lang=en-us&format=json'
    });
</script>

Replace the url above for the RSS feed...

http://api.flickr.com/services/feeds/photoset.gne?set=72157610669512045&nsid=82537533@N00&lang=en-us&format=json

... with the your feed url. The 'set' var refers to the flickr set your pictures are in. I create a set specifically for my slideshow. And the 'nsid' var is your flickr ID(not your username). Get your id by going here.

Get your flickr NSID at idGetter

View the above feed

Step 4) (optional) Customize the style

This is not required but you probably want to customize the styles for this object.

#slideshow {
    /* defaults to 'relative', but set to absolute if you want to move it around */
    position: relative;
    /* defaults to 'auto' but change to suite your needs */
    width: auto;
    /* defaults to '0px' but set to a positive number to move it, down, on your page */
    top: 0px;
    /* defaults to '0px' but set to a positive number to move it, to the right, on your page */
    left: 0px;
}

ok, all done...