CODEWITHSUNDEEP
jqueryjquery-pluginszooming
nickff
nickff

Reputation: 268

jQuery Cloud Zoom - Advance Images on large image click

I'm using the jQuery cloud zoom for an image gallery and have disabled the zoom (long story, but it's working). Right now, I have disabled clicking the large image.

I'm looking to advance the images (i.e. go to the next image) on click of the large image, rather than having to click the thumbnails to change the image.

Here's my example page:

http://future.thefutureforward.com/~field/Travel-Kit.html

Any thoughts?

Upvotes: 0

Views: 4030

Answers (1)

JP Hellemons
JP Hellemons

Reputation: 6047

Ok, I took the cloud zoom example and made a jsfiddle working example

The jQuery code below works, the only minor 'bug' is when the last image is clicked, it does not go back to number one. But otherwise there is nothing more to do for you ;) lol

Please note that I have had to use the live method for binding the click event.

$(".mousetrap").live("click", function(){
    var current = $(this).prev().attr("href");
    var tmp = $("a.cloud-zoom-gallery[href='" + current + "']").next();

    if(tmp.length)
        tmp.click();
    else
    {
        alert($("a.cloud-zoom-gallery:first-child").html()); /* null?? */
        $("a.cloud-zoom-gallery:first-child").click();
    }
});

Upvotes: 4

Related Questions