Question

Can’t seem to get this jquery gallery working. I’ve been able to get the .galleryImgs click function working, but cant seem to get the #gallery-next click function to work. It’s supposed to get the data-src attribute from the next .galleryImgs div and set it in the .galleryImg src. I’ve tried using addClass and removeClass so it’s known which to start from but still wont work. All help appreciated.

<img class="galleryImgs" data-src="images/test-image-1.jpg" src="images/test-image-1-s.jpg" />
<img class="galleryImgs" data-src="images/test-image-2.jpg" src="images/test-image-2-s.jpg" />
<img class="galleryImgs" data-src="images/test-image-3.jpg" src="images/test-image-3-s.jpg" />
<img class="galleryImgs" data-src="images/test-image-4.jpg" src="images/test-image-4-s.jpg" />
<img class="galleryImgs" data-src="images/test-image-5.jpg" src="images/test-image-5-s.jpg" />

<img class="galleryImg" src="" />

<div id="gallery-next"></div>

<script type="text/javascript">
$(function(){
    $('.galleryImgs').click(function(){
        $('.gallery').show();
        $(this).addClass('catherine');
        var $galleryImg = $(this).attr("data-src");
        $('.galleryImg').fadeIn().attr("src", $galleryImg);
    });
    $('#gallery-next').click(function(){            
        $('.galleryImgs').hasClass('catherine').removeClass('catherine').next('.galleryImgs').addClass('catherine');
        var $galleryImg = $('.galleryImgs').hasClass('catherine').attr("data-src");
        $('.galleryImg').attr("src", $galleryImg);
    });
});
</script>

Answer 1

This worked.

$('#gallery-next').click(function(){
        var $galleryImg = $('.galleryImgs.hidden').removeClass('hidden').closest('.galleryImgs').nextAll('.galleryImgs').eq(0).addClass('hidden').attr("data-src");
        $('.galleryImg').fadeIn().attr("src", $galleryImg);
    });