jQuery simple image gallery

Another gallery/slideshow example with jQuery, this time we will load image after user selects one of the controls(next/prev).

We will wait until next image is loaded(main time show loading information) and  after make smooth fade in/out transition with our current and new image.
Unlike previous post, in this example we are not loading all images from the beginning, which makes this gallery perfect for using with large amount of images.


open example frame in new window
jQuery code used in example:

4 thoughts on “jQuery simple image gallery

  1. HuskErzulie

    Hi Armen,
    I just joined your site. I found you while searching strategies for focusing cursor in text field on object load. Another one of those crackpot as3 web searches, ah well…the joy is boundless. Anyway, I started looking at your code (custom cursor) and was thinking “wow, I like the way this guy writes action script” Then I started looking at your implemented work and well, I’m a fan :-) I am forwarding the link to my best friend who also does Flash development as an example of excellence- okay, enough props, we don’t want no heads explodin’ I just thought I would write to say I admire your work, deeply appreciate the code and hope to return often. Best, C. Austin (HuskErzulie).

  2. prashant

    Hi,

    While searching image slider gallery for my client website,
    i found image slider on your website and it is perfect to my requirement, but only problem is that client need auto fuction with navigation for jquery image slider gallery.

    So kindly, help me out in above gallery

    Regards
    Prashant

  3. Kurt

    $(“#currentimg”).remove();
    rather than
    $(“#gallery #currentimg”).remove();
    will ensure that no blank image is shown when prev – next buttons are clicked in quick succession.

    If you like automatic play on load:

    var imageIndex=1;

    $(document).ready(function(){

    loadNext();

    var pshow = setInterval(function(){
    imageIndex++;
    if(imageIndex>images.length)imageIndex=1;
    loadNext();
    },5000);

    var image1 = $(”).attr(‘src’, ‘img/prev_over.png’);
    var image2 = $(”).attr(‘src’, ‘img/next_over.png’);

    $(“#controls #next”).click(function(){
    clearInterval(pshow);
    imageIndex++;
    if(imageIndex>images.length)imageIndex=1;
    loadNext();
    })

    $(“#controls #prev”).click(function(){
    clearInterval(pshow);
    imageIndex–;
    if(imageIndex<1)imageIndex=images.length;
    loadNext();
    })

    function loadNext(){
    $("#controls #counter").html("Loading "+imageIndex+" of "+images.length);
    $("#gallery").append("”);
    $(“#gallery #nextimg”).css(“opacity”,0);

    $(“#gallery #nextimg img”).load(function(){
    $(“#controls #counter”).html(“Image “+imageIndex+” of “+images.length);
    $(“#gallery #nextimg”).stop().animate({‘opacity’:1},1500,’easeOutQuad’,function(){
    $(“#currentimg”).remove();
    $(“#gallery #nextimg”).attr(“id”,”currentimg”);
    })
    });
    }
    });

Leave a Reply

Your email address will not be published. Required fields are marked *