Question

I am using cloudzoom (CZ) script to add a nice effect to my images on a WP site.
So we have multiple thumbnails and a bigger image, with a zoom efefct on it. Click on thumb, replaces big image. See here:
http://www.starplugins.com/cloudzoom
But as CZ does not have slideshow, i decided to add my own script for this functionality.
All i did is to create some functions that do their work, and than trigger the click at the end, so cloudzoom effect is also applied. This means that next, prev, play – all are based at a click trigger. So far so good, but problem is that i want to stop the slideshow if a thumbnail is clicked, but i cannot add the stop event on the click because in this case the prev and next will trigger it also after one slide move. How could i go around this?

Please note that i am new to jquery and coding, so my script could be un-optimized 🙂 Here it is:

jQuery(document).ready(function() {
    /* onclick change the current slide */
    /* this is the problematic part */
    jQuery('#vb-thumbs a').click(function() {
        jQuery('.current').removeClass('current');
        jQuery(this).addClass('current');
        /* next comes the slideshow stop event but commented because next and prev also triggers it */
        /*
        if (jQuery(intervalID).length) {
            clearInterval(intervalID);
        }
        */
    });

    /* we set up the manual button navigation */
    function prevImage(){
        var current = jQuery('.current');
        if(jQuery(current).prev().is('a')) {
            jQuery(current).prev('a').trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
        else { //if there is no thumb before, jump to the end of the list
            jQuery('#vb-thumbs a').last().trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
    };
    function nextImage(){
        var current = jQuery('.current');
        if(jQuery(current).next().is('a')) {
            jQuery(current).next('a').trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
        else { //if there is no thumb after, jump to the beginning of the list
            jQuery('#vb-thumbs a').first().trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
    };

    /* the button functions */
    jQuery('a.prev').click(function(){
        prevImage();
        clearInterval(intervalID);
    });
    jQuery('a.next').click(function(){
        nextImage();
        clearInterval(intervalID);
    });

    jQuery('a.start').click(function(){
        intervalID = setInterval(nextImage, 3000);
    });
    jQuery('a.stop').click(function(){
        clearInterval(intervalID);
    });
});

EDIT
Here’s the HTML part

The buttons:

<a class="prev"><img src="/wp-includes/images/icon-prev.jpg" width="10" height="10" alt="Previous" /></a>
<a class="start"><img src="/wp-includes/images/icon-play.jpg" width="10" height="10" alt="Play" /></a>
<a class="stop"><img src="/wp-includes/images/icon-stop.jpg" width="10" height="10" alt="Stop" /></a>
<a class="next"><img src="/wp-includes/images/icon-next.jpg" width="10" height="10" alt="Next" /></a>

And the thumbnail section looks like this:

<div id="vb-thumbs">
 <a href="hreftobigimageforclouzoom_1" class="cloudzoom-gallery>thumb image 1</a>
 <a href="hreftobigimageforclouzoom_2" class="cloudzoom-gallery>thumb image 2</a>
 and so on
</div>

Any ideeas?

Answer 1

Ok. I have created a fiddle for you. This is how it might work for you.

Fiddle

I have used params for trigger in this.

$('#foo').trigger('custom', ['Custom', 'Event']);