el.goToSlide(jQuery(this).data('slide')); starts auto

[saturday1]

Hello!

I just ran into a problem I can't solve. I am using the thumbnail solution. I have also implemented a pause/play button.

The problem is that when Slippry is el.stopAuto(); and I click el.goToSlide(jQuery(this).data('slide')); the slideshow get .startAuto()...

This is my code from start...

For pause button:

jQuery('.pause-slider').click(function (e) {
                e.preventDefault();
                thumbs.stopAuto();
                jQuery(this).hide();
                jQuery(this).siblings('.play-slider').css('display', 'block');
            });

            jQuery('.play-slider').click(function (e) {
                e.preventDefault();
                thumbs.startAuto();
                jQuery(this).hide();
                jQuery(this).siblings('.pause-slider').css('display', 'block');
            });

Code for clicking thumbnail:

                jQuery('.thumbs a').click(function (e) {
                    e.preventDefault();
                    thumbs.goToSlide(jQuery(this).data('slide'));
                });

So I have tried to solve it like this, even with timeout, without getting the Slippry to stay paused when clicking a thumbnail...

First I add a class when slideshow is paused (Change to code above):

jQuery('.pause-slider').click(function (e) {
                e.preventDefault();
                thumbs.stopAuto();
                jQuery(this).hide();
                jQuery(this).siblings('.play-slider').css('display', 'block');
                jQuery(this).siblings('.play-slider').addClass('isPaused');
            });

Then onClick a thumbnail: First I tried this:

jQuery('.thumbs a').click(function (e) {
                    e.preventDefault();
                    thumbs.goToSlide(jQuery(this).data('slide'));
                    if(jQuery('.play-slider').hasClass('isPaused')){
                            thumbs.stopAuto();
                            console.log('is paused');
                    }
                });

Since that did not do the job I tested with a timeout:

jQuery('.thumbs a').click(function (e) {
                    e.preventDefault();
                    thumbs.goToSlide(jQuery(this).data('slide'));
                    if(jQuery('.play-slider').hasClass('isPaused')){
                        setTimeout(function(){
                            thumbs.stopAuto();
                            console.log('is paused');
                        }, 500);
                    }
                });

But the slideshow is still in .startAuto() mode. Ps, the console.log works and no javascript errors...

So my question is, how do I do to make the slideshow stay paused/stoped (If it is paused) when clicking a thumbnail? Or in other words, if thumbs, in this case, is .stopAuto(); - How do I keep it that way when running thumbs.goToSlide()?

Edit: Same thing is happening to the arrows. If slideshow is stopped, it starts automaticly when clicking an arrow.

Edit 2: After testing a bit more, this bug is a bit random. Sometimes it works, sometimes it stops even if not stopped and sometimes it starts when stopped... Still no Javascript errors and console.log tells me the if statement is working.

Edit 3: How to reproduce the error - Let the slideshow loop one or two slides, press pause-button, then click a thumbnail.

Here you can see all code: http://jborg.se/dev/slippry/test.html

[sftsk]

this sounds like a bug, we will have to look into it! p.s.: can you please try calling stopAuto() before going to the slide?

[saturday1]

Hello!

Thanks for answer. I tried this now:

// Slide when clicking thumbnails
                jQuery('.thumbs a').click(function (e) {
                    //Make sure slideshow is stopped (Not working)
                    if(jQuery('.play-slider').hasClass('is-paused')){
                        thumbs.stopAuto();
                        console.log('is paused');
                    }
                    thumbs.goToSlide(jQuery(this).data('slide'));
                    e.preventDefault();
                });

But it has the same result/bugg.

Ps. Just to make sure it was not about my own scripts - I downloaded the slideshow from slippry.com and made the minor changes to make it work, and the same bug is there. So the problem is not related to my own add-on scripts for what I can tell after testing without them.

Edit: I downloaded from slippry.com again. Did no changes at all and opened index.html in "Demo". Right out the box I clicked the link "Stop", then I clicked an arrow. Then it starts looping again, seems like startAuto comes true. Tried to look into the library but can't see really why or how to fix it, guess my skills are to low for that. ;)

[saturday1]

Please let me know if you find out a fix. :)

[saturday1]

Think I found out a get-around... Not optimal maybe, but at least a way to get around it.

This is what I think I have figured out about Slippry regarding "goToNextSlide", "goToPrevSlide" and "goToSlide":

1. The script do not check if the slideshow is stopped (Or it is not just working).
2. You can not use "stopAuto" (And probably not other calls neither) during the transition, it has to run after.

The transition is by default set to 800, if I put 900 into my timeout function, it seems to work. Quite ugly fix and probably not the most reliable, but at least a temporary fix.

So this is what I need to do (And I need to build this fix to the arrows as well):

// Slide when clicking thumbnails
jQuery('.thumbs a').click(function (e) {
    e.preventDefault();

    //go to slide
    thumbs.goToSlide(jQuery(this).data('slide'));

    //Make sure slideshow is stopped, wait until after transition
    if(jQuery('.controls').hasClass('is-paused')){
        setTimeout(function(){
            thumbs.stopAuto();
            console.log('is paused');
        }, 900);
    }
});

[sftsk]

have looked into this a little and there is definitely something wrong. will take some time to properly debug this and then fix it

[saturday1]

Sure thing. :) I have solved this bug so long with above solution, also on arrows and on my added swipe functionality. If anyone seek answers or want to see some other sweet jquery addon stuff on this (Like dynamic thumbnails created by pure jquery and swipe functionality), you can see it all here for a while: http://cdn.axiell.com/dev/slippry/index.html