Question

Hey I’m in need of some help I have made this gallery plugin where I am now in need of a way to find the next class which called the plugin relative to the document incase the images are in different parent divs? Check the code below

<!-- HTML -->
<div id="a">
    <img class="image" src="/gallery/a.png" style="max-width:200px;max-height:200px;"/>
</div>
<div id="b">
    <img class="image" src="/gallery/b.jpg" style="max-width:200px;max-height:200px;"/>
</div>
<div id="c">
    <img class="image" src="/gallery/c.jpg" style="max-width:200px;max-height:200px;"/>
</div>


// jQuery
$('.image').imageGallery();

var next = $(self).next().attr("src"); // "Self" being the current image its on

The above is only viable if all the images are sitting in the same parent div but I would like to be able to get all images with the same class relative to the body.

Non working example:

$("body").find(self).next()

Answer 1

Store all the images on which you apply .imageGallery(); once, and then reuse that list:

var images = $('.image');
images.imageGallery();

var next = images.eq( images.index(self) + 1 );