Avatar of Refael
RefaelFlag for United States of America asked on

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!!!
jQueryJavaScript

Avatar of undefined
Last Comment
leakim971

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Refael

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!
Rob

Why don't you just use cycle2?
http://jsfiddle.net/rjurd/RbDTR/
ASKER
Refael

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
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Rob

Ah I can't see any difference other than cycle 2 doesn't flash white... please enlighten me :-)
ASKER
Refael

:-) tagit, open the slideshows in two tabs in your browser let them run and compare. i am sure you will see a huge difference.
Rob

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
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
Refael

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 :-)
Rob

yeah i see it ;) helps having a laptop now!  i'll keep looking through the code
ASKER
Refael

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.
Your help has saved me hundreds of hours of internet surfing.
fblack61
SOLUTION
Rob

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Refael

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?
Rob

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/
ASKER
Refael

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!
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rob

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 :)
ASKER
Refael

tagit and leakim971,
You have been a great help. I thank you so much for all your inputs and enlightenment :-)
leakim971

if only we all had his insight :)
lol :o(
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck