Basic Jquery Gallery

I would be grateful if anyone could help me with a small jquery problem. I have no knowledge in writing jquery back am proficient in HTML CSS and implementing jquery plugins. I am

Solution 1:

First you need to add an ID to your big image

<img id="gallery-big" src="images/gallery/wedding/large/1.jpg" width="940" height="445" />

After that I'd change the names of the images so that the large image and the thumbnail both have the same name but are put in different folders, like this:

images/gallery/wedding/large/1.jpg
images/gallery/wedding/thumbs/1.jpg

When that's done you can add the following JQuery code

var clickable = true;

$(document).on("click", ".thumb a", function(event)
{
    event.preventDefault();

    if (clickable == true)
    {
        clickable = false;

        // Get URL of the large imagevar nameIMG = $("img", this).attr("src");
        nameIMG = nameIMG.replace("thumbs/", "large/");

        // Fade in the new image
        $("#gallery").append('<div class="big-overlay"><img src="' + nameIMG + '" width="940" height="445" /></div>');
        $(".big-overlay").fadeIn("slow", function()
        {
            // Change the original <img> to the new image
            $("#gallery-big").attr("src", nameIMG).load(function()
            {
                // Remove the overlay
                $(".big-overlay").remove();
                clickable = true;
            });
        });
    }
});

...and the following CSS rule

.big-overlay
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
}

What this code does is that it adds an overlay containing the large version of the clicked thumb image and fades it in. When that's done it changes the search path of the original image (#gallery-big) and then removes the overlay.

It might not the best solution, but it should do the job :)

Solution 2:

Try jQuery Light box plugin.

http://leandrovieira.com/projects/jquery/lightbox/

Solution 3:

If you wanna do it yourself then add the data-src="location_of_full_size_image.jpg" to the thumbs and in onClick method to thumbs

$('#gallery-big').attr('src', self.data('src'))