• Top
  • Comment
  • Reply

jQuery Image Gallery

What im trying to do is to create a gallery that the user can go next and previous or use one of the thumbnails to navigate through. A demo of this can be seen here.

Javascript

Im using jQuery to perform fading functions and handle our events. The below code creates three functions next(), previous() and goto(int). I wasnt sure how to get the element that pressed an event so if you look at this question on Stackoverflow you will find out how i managed to do the $('button').click(...).

$(document).ready(function() {

    var image = 1;
    var maxImage = 3;

    //Functions
    function next(){

        //Change the image numbers
        if (image >= maxImage) { image = 1; }
        else { image++; }

        //Create the effect of a slide
        $('#images').fadeOut('fast', function() {

            $('#images').attr("src", "../images/products/triton/explore/" + image + ".jpg");    
            $('#images').fadeIn('fast');

        }); 

        //Change the src to not_selected, and then change the source to selected for the required image
        $('.buttons').attr("src", "../images/products/triton/explore/not_selected.png")
        $('#btn_' + image).attr("src", "../images/products/triton/explore/selected.png");
    }

    function previous(){

        //Change the image number
        if (image <= 1) { image = maxImage; }
        else { image--; }

        //Fade out the previous Image
        $('#images').fadeOut('fast', function() {

            //Load the next image
            $('#images').attr("src", "../images/products/triton/explore/" + image + ".jpg");
            $('#images').fadeIn('fast');                

        });

        $('.buttons').attr("src", "../images/products/triton/explore/not_selected.png");
        $('#btn_' + image).attr("src", "../images/products/triton/explore/selected.png");
    }

    function goto(x){

        if (x == 0) { x = 1; }
        else if (x > maxImage) { x = 1; }

        image = x;

        //Fade out the previous Image
        $('#images').fadeOut('fast', function() {

            //Load the next image
            $('#images').attr("src", "../images/products/triton/explore/" + x + ".jpg");
            $('#images').fadeIn('fast');

        });

        $('.buttons').attr("src", "../images/products/triton/explore/not_selected.png");
        $('#btn_' + image).attr("src", "../images/products/triton/explore/selected.png");
    }



    //Hide the image and tween the fade
    $('#images').hide();    
    $('#images').load(function() { $('#images').fadeIn(); });

    //Key Press, Next or Previous
    $(this).keyup(function(event)
    {
        if (event.keyCode == 39){ next(); }
        else if(event.keyCode == 37){ previous(); }
    });

    //Next and previous buttons
    $('#next').click(function () { next();});
    $('#previous').click(function () { previous();});

    $('.buttons').click(function () { 

        var buttonId = $(this).attr('id').split("_");   //Get the Id and split it using `_`
        buttonId = buttonId[1];                         //Just get the Number value
        goto(buttonId);                                 //Run the goto function
    });

});

The three main functions above are next(), previous() and goto(). Next and previous just move the index of the image and load the new one, where as go to goes to a specific image. I have named my images in number format however you could develop this further and add an array of images, that are index controlled.

The click event is pretty straight forward, we set our event on a class value, and retrieve the id of the class that clicked it. We then split/explode the id string using _ to give us the number value.

The HTML Counterpart

The html we need to look at below is the button div and the buttons image sources. They are defined in the JavaScript with the click event.

<div class='explore'> 

    <div class='pannel_top'> 
        <img src='../images/products/triton/explore/pannel_top.png'/> 
    </div> 

    <div class='image'> 
        <img src='../images/products/triton/explore/1.jpg' id='images'/> 
    </div> 

    <div class='pannel_back'> 

        <div id='previous'></div> 

        <div id='buttons' class='button'> 
            <img src='../images/products/triton/explore/selected.png' class='buttons' id='btn_1'/> 
            <img src='../images/products/triton/explore/not_selected.png' class='buttons' id='btn_2'/> 
            <img src='../images/products/triton/explore/not_selected.png' class='buttons' id='btn_3'/> 
        </div> 
        <div id='next'></div> 
    </div> 

</div> 

If you have any questions please post it on comments, il try getting back to you asap.

By

26th Jan 2011
© 2011 Shahmir Javaid - http://shahmirj.com/blog/11

Neeraj

6th Aug 2012

I have collapsible menu on the above link and it is working fine but if I add 'more text' on sub menu it is not working properly. It is adding 'more text' on each click. Also I want to add/remove active class from main list item.

Any suggestions would be appreciable.

Shahmir Javaid

15th Aug 2012

Its mainly because you are using $(...).append('a href="#" class="adjust"/a'). You should really add another `li` element and default it to `display:none`, When the item is clicked you can change the html of the last `li` element and change its css to `display:block`

Salman

28th Aug 2012

Actual need for me is Initially I need to show 3thumbnail images. As I clicked on next the next three new thumbnail images should be displayed. I sent a link which I am trying. Hoping for help. If you refer this link http://www.frontendwebhelp.com/javascript/jquery-photo-gallery.php this is what exactly I needed. Here the next and prev buttons functionality is different for thumbnail images and larger image.

Shahmir Javaid

7th Sep 2012

You could just use another div to hold your thumbnail images. Once you click the Nth thumbnail image you can margin-left move the outline thumbnail div. Make sure to give your outer thumbnail div overflow-x:none; and your inner thumbnail div the width of N*count(N)

michelle vacunawa

16th Aug 2013

Hi. Do you have a zip file of this one?
how about if the images are stored in an xml file?
I'd really appreciate your help :)

Shahmir Javaid

18th Aug 2013

@Michelle, no I don't have a zip file for this, All the code needed is in the post, you are free to copy and paste.

Loading from XML will require you to do more than what is present, But you could use some ajax call to load your xml images into your HTML and get this script to take over the tweening and moving of them. Try this http://api.jquery.com/jQuery.ajax/ for ajax.



Back to Top
All content is © copyrighted, unless stated otherwise.
Subscribe, @shahmirj, Shahmir Javaid+