We’ve been using flash for a simple slideshow features on some client sites. I decided to look into using Javascript/jQuery to provide the same functionality. I used the jQuery Cycle plugin and made some additions to allow for better control of image preloading.
Why switch?
-Eliminate the dependence on Flash. Users who don’t have flash installed but do have javascript can still see the slideshow. (This includes some mobile browsers like the iPhone.)
-Eliminate the need to have to produce (and re-produce) a flash movie for each slideshow. This makes the site more client-maintainable.
-Eliminate the big block of javascript code that went into the page to check for flash and load the movie.
-Possibly reduce the code size of the site. (I think we’re about break-even right now.)
So how do I use it?
Instead of inserting the flash movie/javascript, insert a new div with an id of your choosing. Inside this div, place a noscript tag and the fallback content for a non-javascript enabled user.
<div id="mySlideshow">
<noscript>
<img src="/img/slideshow/img01.jpg" />
</noscript>
</div>
Now include the jQuery Cycle plugin and the Dayspring Cycle addon.
<script type="text/javascript" src="/inc/jquery.cycle.pack.js"></script> <script type="text/javascript" src="/inc/jquery.dscycle.js"></script>
And then setup your slideshow. List the paths to your images in a Javascript array. Then setup the slideshow for the div you created, providing the list of images and some additional options. Notice the options for the timeout (how long to show each slide) and the speed (length of the transition). You can also change the transition type to any of those provided by the jQuery Cycle plugin.
<script type="text/javascript">
$(function(){
var slideshow = [
'/img/slideshow/img01.jpg',
'/img/slideshow/img02.jpg',
];
$('#mySlideshow').dsCycle(slideshow, {
fx: 'fade',
speed: 2000,
timeout: 9000,
height: 250
});
});
</script>
Ready for a demo?
Take a look at the new Redeemer site.
Tags: JavaScript, jQuery, slideshow
