Image Image Image Image Image

© Copyright 2012 ABCoder | Email | RSS

Scroll to Top

To Top




In jQuery

By abcoder

Advanced cycle plugin integration

On 22, Aug 2009 | In jQuery | By abcoder

On my another post I mentioned that cycle is a great jQuery plugin. I use it very often for slideshow. Recently I used it on a project where the slideshow had many(20+) wallpaper sized images. So loading time was a great issue.

The default cycle integration includes all the images during page loading which is okay for small images, but highly affects the page loading time for high resolution images. cycle plugin is highly flexible! I fixed the issue by loading images dynamically one after another at the end of each slide, literally before the beginning of each slide.

Here is how I did it:

<div id="slideshow"><!-- slides will be added here --></div>
var gallery = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg", "images/13.jpg", "images/14.jpg"]; // and so on.. array of images
// Array clone function.
Array.prototype.clone = function () {
    var arr = new Array();
    for (var property in this) {
        arr[property] = typeof(this[property]) == 'object' ? this[property].clone() : this[property];
    return arr;
var gal = null; // gal should be global as I'll use it inside onBefore function
$(function () {
    gal = gallery.clone(); // cloning the array is not mandatory, but doing so will keep the main array unchanged.
    $('#slideshow').empty().append('<img src="' + gal.pop() + '" /><img src="' + gal.shift() + '" /><img src="' + gal.shift() + '" />') // adding the last, first and second element of the array to the slideshow div, then start the cycle plugin.
        startingSlide: 1,
        // this is required (1 is the 2nd slide) as the first slide is the last element of the array. if you use manual next/prev button clicking on #prev will show the first element.
        before: onBefore, // loads the next image at the beginning of each slide. (NOT all at once)
        next: "#next",
        prev: "#prev"
    var totalSlideCount = 1 + gal.length;
    function onBefore(curr, next, opts, fwd){
        // at first addSlide is not defined, so we should return.
	if (!opts.addSlide) return;
	// if all the elements of the array are added no need to add them again!
        if (opts.slideCount == totalSlideCount) return; 
	// shift or pop from slide array
        var nextSlideSrc = fwd ? gal.shift() : gal.pop(); 
	// add next slide 
        opts.addSlide('<img src="' + nextSlideSrc + '" />', fwd == false);

In this code above, cloning the array is optional. I used it as I needed the main array for later use. Probably you know if you use the global array reference to a local variable and apply pop()/shift()/push() functions to the local variable, the global one will be affected. cos the local variable is just a reference to the address of the global array variable.

At first the last, 1st and 2nd elements of the array are added to the #slideshow div and the cycle is started from the 2nd slide. Before starting of each slide onBefore function is called. The onBefore function adds new slide to the slideshow and stops when all the array elements are added to the slide.

You may use it for small size images also if you need to improve the page loading duration.

Tags | , , , , , , , , , , , , , , , , ,


  1. Hai, I’m searching tutorial how to make slideshow using jquery. Do you have a demo site for this post ?
    thanks in advance.

  2. Yes I did this coding for my client’s website

    Thanks for your interest.

  3. i have same question like ardian and have get this answer here ..


  4. I was reading through something else about this on another site. Interesting. Your position on it is diametrically contradicted to what I have read in the first place. I am still contemplating over the different points of view, but I’m tipped heavily toward your point of view. And regardless, that’s what is so great about advanced democracy and the marketplace of ideas online.

  5. Waqas Mehmud


    Perfect!!Its Really Really awesome post. It saved my life Dame Good Man :)

  6. Do you know if the Cycle Plugin allows multiple slides visible at once? I have searched but all the examples I have seen use only one slide. I am working on a project where 3 slides are visible at any one time. Any help is greatly appreciated. Thanks.

  7. Actually, I just found an example of 3 slides per page:

  8. Mian

    Great work! I wonder how would you make the slides of variable(dynamic) length for each slide?
    Let’s say slide one stays for 1 second and slide two stays for 7 seconds…etc