jQuery cycle transitions plugin

Hello Experts,

I am using the jQuery cycle plugin together with Thomas's transitions plugin (http://jayis.net/thomas/cycle/).

$('#gallery').cycle({ 
   fx: 'tiles',
   timeout: 2500,
   next:   '#nextSlide', 
   prev:   '#prevSlide',
   speed: 1000,    
   tiles: {
       cols: 25,
       cssAfter:
      {
       top: 0
       },
      cssBefore:
     {
     left: 25,           
     top: 0,
    width: 0
   }
}
});

Open in new window


Here is the link to the gallery http://jsfiddle.net/vdaHv/.
The slideshow auto runs and it looks great.

Now, try to click "next" or "previous" while the previous transition did not finish. What you get is a strange white background while the transition (tiles) occurs.

Any suggestion how to solve this would be very much appreciated!!!
RefaelAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
as I don't see any option to prevent this : http://jquery.malsup.com/cycle/options.html
you can prevent the user to click until the animation finish :
$('#gallery').cycle({ 
   manualTrump:false,
   fx: 'tiles',
   timeout: 2500,
   next:   '#nextSlide', 
   prev:   '#prevSlide',
   speed: 1000,    
   tiles: {
       cols: 25,
       cssAfter:
      {
       top: 0
       },
      cssBefore:
     {
     left: 25,           
     top: 0,
    width: 0
   }
}
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RefaelAuthor Commented:
Hi leakim971,

Thank you. yet i think this would only confuse the user.
i am trying to understand the reason this is happening..... in the cycle2 plugin they have a similar transition called "tileBlind" which is not as nice as the one i am currently using. in their example this is not happening  so i am trying to compare.

I really do hope to find a resolution for this!
0
RobOwner (Aidellio)Commented:
Why don't you just use cycle2?
http://jsfiddle.net/rjurd/RbDTR/
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

RefaelAuthor Commented:
Hi tagit. Compare the slideshows and you see what i mean. I tried to work with the cycle2 but i could never get it to look like the one i have using the previous ver
0
RobOwner (Aidellio)Commented:
Ah I can't see any difference other than cycle 2 doesn't flash white... please enlighten me :-)
0
RefaelAuthor Commented:
:-) tagit, open the slideshows in two tabs in your browser let them run and compare. i am sure you will see a huge difference.
0
RobOwner (Aidellio)Commented:
Forgive me, I'm doing this on my mobile at the moment but I do see a smoother transition with yours but that's all
0
RefaelAuthor Commented:
tagit, i appreciate your effort i do :-)

1. the blind/tiles (cols) are different (one are thinker the other are thinner. you have no control on the cols/rows).  
2. the animation though both uses the same but it is different style of blinds
3. speed is different even if you increase the speed in the cycle2.

do you see it now :-)
0
RobOwner (Aidellio)Commented:
yeah i see it ;) helps having a laptop now!  i'll keep looking through the code
0
RefaelAuthor Commented:
I think it has to do with the fact that when you hit the next/prev buttons the slide before is hidden or its opacity is set to zero. that's why you get the white background and not the current photo to blind the next slide on. i tried to play with the cssBefore and cssAfter but i could not solve it.
0
RobOwner (Aidellio)Commented:
Ok after all that I agree with @leakim971.  It's a bug in their layering when moving to the next/prev slide when it's already transistioning.

I couldn't let it go though... :)

I've got rid of the white flash but what it does is show the rest of the image and transistions into the next

http://jsfiddle.net/rjurd/vdaHv/3/

You can capture the next/prev button clicks and after extensive debugging realised that the previous image in the transition is being hidden if the next/prev buttons are clicked while it's still transistioning

onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement) {
            var myImages = $('#gallery>img');
            var setSlideIndex = zeroBasedSlideIndex;
            if (isNext) {
            setSlideIndex = (zeroBasedSlideIndex === 0) ? (myImages.length-1) : (zeroBasedSlideIndex-1);
            }
            else {
                setSlideIndex = (zeroBasedSlideIndex === (myImages.length-1)) ? (0) : (zeroBasedSlideIndex+1);
            }
            $(myImages[setSlideIndex]).css({
                'display': "block",
                'z-index': (myImages.length-1)
            });
        },

Open in new window

0
RefaelAuthor Commented:
tagit thank you!
it does look a lot better!. the only thing that bothers me is that when you click next or prev it looks as if the photo "jumps" and the last transition is escaping. is it only me or?
0
RobOwner (Aidellio)Commented:
To be honest, I wouldn't use it.  It's doing some weird stuff for me.  I've given you a hack so far but just clicking next and prev a few times randomly, I got it to do an infinite loop. Just continuously animating, white flashing everywhere.
Time to look at another plugin.  The guys on Cycle have moved their focus to Cycle2.  I also noticed in the demo i posted above for Cycle2 that it will flash white as well if you click next enough times.

This is one that seems heavily used and it's free if you don't use it in wordpress:
http://dev7studios.com/nivo-slider/

Docs:
http://docs.dev7studios.com/jquery-plugins/nivo-slider 

The demos look great - http://demo.dev7studios.com/nivo-slider/

I've knocked up a demo for you to look at: http://jsfiddle.net/rjurd/TjUfG/2/
0
RefaelAuthor Commented:
tagit, very much thank you!

Did you notice that if you click on the nav (next or prev) it will continue to run current slide and its transition as if it ignores the click (function).

This is what leakim971 suggested above by using the "manualTrump:false,". So basically you can click as many times as you want yet it will only execute if the click is set when the current transition ended otherwise it ignores the "request".

If i could write my own script in jQuery I would definitely make a better one! :-)

Thanks guys for your kind kind help!
0
RobOwner (Aidellio)Commented:
Yes, I was hoping you wouldn't notice ;)  No I knew about that but at least it gives you options in a situation where there aren't many.  Yes I am aware that's what leakim971 had suggested, if only we all had his insight :)
0
RefaelAuthor Commented:
tagit and leakim971,
You have been a great help. I thank you so much for all your inputs and enlightenment :-)
0
leakim971PluritechnicianCommented:
if only we all had his insight :)
lol :o(
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.