Question

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 building a gallery page to this web site. Currently i have got a row of thumbnails in a jquery carosel that works perfectly.

HERES WHAT I NEED:

When the user clicks a thumbnail i want its large image to cross fade over the top of the large image that is currently on the stage (the first thumbnail).

Im sure this is simple enough for anyone who has a basic knowledge of writing jquery.

Here is my current source code.

http://www.silverbackstudios.co.uk/laurenmitchell/wedding-gallery.html

Thank you for your help!

Jarrett

Answer 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 image
        var 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 🙂