jQuery cycle transitions plugin
Hello Experts,
I am using the jQuery cycle plugin together with Thomas's transitions plugin (http://jayis.net/thomas/cycle/).
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!!!
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
}
}
});
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!!!
Last Comment
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Why don't you just use cycle2?
http://jsfiddle.net/rjurd/RbDTR/
http://jsfiddle.net/rjurd/RbDTR/
ASKER
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
Ah I can't see any difference other than cycle 2 doesn't flash white... please enlighten me :-)
ASKER
:-) tagit, open the slideshows in two tabs in your browser let them run and compare. i am sure you will see a huge difference.
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
ASKER
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 :-)
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 :-)
yeah i see it ;) helps having a laptop now! i'll keep looking through the code
ASKER
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.
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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?
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?
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/
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
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!
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!
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
tagit and leakim971,
You have been a great help. I thank you so much for all your inputs and enlightenment :-)
You have been a great help. I thank you so much for all your inputs and enlightenment :-)
if only we all had his insight :)lol :o(
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER
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!