Question

It’s a slideshow using images in the divs ‘store_images’.
Several slideshows on the same page: click on image for next slide, after last image goes to the first. It works if I have just one but I have to implement the each() condition in the second part since they’re more, and I have no idea how.

$(function(){
    $('.store_images').each(function(){
    $(this).find('.store_book_image:gt(0)').hide(); 
});

$(this).find('img').click(function () {
    $('.store_images :first-child').hide()
       .next('img').show()
       .end().appendTo('.store_images');
}); });     

Thank you,

Update: HTML

<div style="cursor:e-resize;" class="store_images">
                <img class="store_book_image" src="{{ book.image1.url }}" />
                <img class="store_book_image" src="{{ book.image2.url }}" />
                <img class="store_book_image" src="{{ book.image3.url }}" />
                <img class="store_book_image" src="{{ book.image4.url }}" />
</div>

Answer 1

You could try this:

$(this).find('img').click(function () {
    var $parentDiv = $(this).closest('.store_images');
    $(':first-child',$parentDiv).hide()
       .next('img').show()
       .end().appendTo($parentDiv);
});

That is, on click of a particular img element find the ‘store_images’ div that it belongs to rather than selecting all ‘store_images’ divs.

By the way, why $(this).find('img') and not $('img')? I assume at that point this is document.