CODEWITHSUNDEEP
jqueryclassclickgalleryfade
Sarah
Sarah

Reputation: 754

jQuery gallery with thumbnails, click function only working once

I am working on a simple jQuery image gallery with thumbnails.

Part of the functionality I want for this is that if you click on the currently showing main gallery slide, .show, it removes the class of show, fades out and THEN fades in the next slide and adds a class of show to it. The relevant thumbnails also change class from inactive to active or vice versa.

The jQuery I am using for this is:

$( document ).ready(function() {

    $('.gallery-images .show').click(function() {
        $('.gallery-images .show').removeClass('show').fadeOut(300, function() {
            $(this).next().fadeIn(500).addClass('show');
        });
        $('.gallery .active').removeClass('active').addClass('inactive').next().removeClass('inactive').addClass('active');
    });

});

And the HTML:

<div id="gallery-71" class="content gallery gallery-71">
    <div id="gallery-images-wrapper">
        <div class="gallery-images">
                    <div class='gallery-image show' id='gallery-image-72'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>1st caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-73' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>2nd caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-74' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>3rd caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-75' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>4th caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-76' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>5th caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-77' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>6th caption</div>
                    </div>
        </div><!--.gallery-images-->
    </div><!--#gallery-images-wrapper-->
    <div id="gallery-thumbs-wrapper">
        <ul class="gallery-thumbs noscript">
            <li class='gallery-thumb active' id='gallery-thumb-72'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-73'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-74'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-75'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-76'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-77'><img src="http://placekitten.com/g/50/50" /></li>
        </ul><!--.gallery-thumbs-->
    </div><!--#gallery-thumbs-wrapper-->
</div><!--gallery-->

Currently this only works the first time you click on the main image, but after that it doesn't seem to be registering anything when I click on the second slide.

Any help would be really appreciated, thanks.

Demo here: http://jsfiddle.net/fFunx/1/

Upvotes: 1

Views: 1050

Answers (1)

Meddie
Meddie

Reputation: 557

Try this

$( document ).ready(function() {

        $('.gallery-images .gallery-image').on('click',function() {
               if ($(this).hasClass('show')) {
                 $(this).removeClass('show').hide(); 
                 $(this).next().addClass('show').show();
                 $('.gallery .active').removeClass('active').addClass('inactive').next().removeClass('inactive').addClass('active');
               }
        });
    });

I don't really know why yours didn't work. I'm curious about that. To make the fadeIn and Out look better you need to work with absolute positioning so the images won't appear to 'jump'.

Upvotes: 3

Related Questions