Changing Mailman Python Scripts for Virtual Host Support
Scrollable Tables with Floating Header using CSS
Symfony 2 Crash Course
Getting Set up with Ogre 3D on Ubuntu
ENUMs, User Preferences, and the MySQL SET Datatype
Installing Xdebug for use with Eclipse or Netbeans on Linux

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', 'Slow-Down.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.
 
Leave Comment

/xkcd/ USB Cables

About This Page