Changing Mailman Python Scripts for Virtual Host Support
A Simple ISAPI Filter for Authentication on IIS
Using Multi-Byte Character Sets in PHP (Unicode, UTF-8, etc)
Visualising Website Performance with Flame Graphs
JQuery Venetian Blinds Transition Effect
Using PHP pspell Spell Check Functions with a Custom Dictionary

Nice n' Easy JQuery Image Rotator

Friday, 9 September 11, 8:43 am
There are a myriad free libraries out there that offer JQuery image rotator functionality. The idea is simple enough - cycle through a series of images, smoothly transitioning between each using some effect or other.

So why code your own? Simplicity and control are the main reasons. Unless you're already loading up a 3rd-party rotator library, why add to the bandwidth overhead? Some of those libraries can be quite time-consuming to get to grips with, so a roll-your-own solution can be quicker for simple transitions. Finally, when you know exactly what's happening, when and how, then you have more control over the final effect and can tweak it exactly as you wish.

So, without further ado, onto the code:
<img id="slideshow" src="../../images/demos/zoe.jpg" />   <script type="text/javascript"> var slideshowImages = ['awesome-pandas.jpg', 'Bobcat.jpg', 'dolphins.jpg', 'laughing-dog.jpg', 'fernsehturm.jpg', 'zoe.jpg']; var slideshowIndex = 0;   function fadeoutSlide() { $('#slideshow').filter(':not(:animated)').animate( {opacity: '0'}, 200, 'easeOutQuint', fadeinSlide ); }   function fadeinSlide() { if (slideshowIndex >= slideshowImages.length) slideshowIndex = 0; $('#slideshow').attr('src', '../../images/demos/' + slideshowImages[slideshowIndex++]); $('#slideshow').animate( {opacity: '1'}, 200, 'easeOutQuint' ); } </script>
Have you ever had the problem where a jQuery animation you've coded works nice and smoothly while on the active tab, but put it in a background tab for a while, and it goes all funky by the time you come to switch back? That's what the filter(':not(:animated)') filter is there for - it basically stops animations queueing up, which is what causes the weird behaviour when tabs with animations are brought back from the background. See this CSS Tricks site for more info and demos on this filter and others like it.

In order to make the slideshow cycle smoothly between images, we need to preload them, using code such as that below:
<script type="text/javascript"> $(document).ready( function() { preload(); } );   var preloading = false; var safteyvalve = 1000;   function preload() { if (document.images) { // Set flag to indicate preload is occuring preloading = true;   // Create an Image object for each image imagePreloader = new Array(); for (var offset = 0; offset < slideshowImages.length; offset++) { imagePreloader[offset] = new Image(); imagePreloader[offset].src = '../../images/demos/' + slideshowImages[offset]; }   // Check images in quarter of a second window.setTimeout(checkpreload, 250); } }   function checkpreload() { if (safteyvalve > 0) { safteyvalve--; } else { preloading = false; }   if (preloading) {   // Loop through image array to see if any are not yet loaded preloading = false; for (offset = 0; offset < imagePreloader.length; offset++) { if (!imagePreloader[offset].complete) { preloading = true; break; } } }   if (preloading) { // Check again in another 0.25 secs window.setTimeout(checkpreload, 250); } else { // Preloading complete - let dynamic shenanigans begin window.setInterval(fadeoutSlide, 2800); }   } </script>
Click this link for more details on the image preloader.

Please enter your comment in the box below. Comments will be moderated before going live. Thanks for your feedback!

Cancel Post

/xkcd/ Physics vs. Magic