开发者

Fancybox not playing nice with Cycle Plugin - Advice?

开发者 https://www.devze.com 2023-03-19 09:21 出处:网络
On a couple pages of mine I have a Fancybox lightbox and I have a jQuery Cycle Plugin. Normally it works fine. There are instances when I click the link that creates a lightbox then when I close it th

On a couple pages of mine I have a Fancybox lightbox and I have a jQuery Cycle Plugin. Normally it works fine. There are instances when I click the link that creates a lightbox then when I close it the Cycle Plugin transitions and does not come back. It makes a huge gap of space开发者_运维知识库 when this happens.

I am not sure what is going on, this does not happen 100% of the time. Its sporadic. I am unsure if this is a one browser issue or multiple browsers as I was able to recreate this in FF5 on two different machinces but have not replicated this in other browsers.

Any Advice?

Thanks - Here is the page: http://www.ubhape2.com/artists/ (note: any artist page has this same header and happens on all of them. The fancybox is any link referencing "Choosers")


Found out an answer to those who have similar issues (this answer came from the Fancybox forums):

After further tests, I figured out what the issue is and it happens when you open and close Fancybox quickly and successively it seems that the animation behind (jQuery cycle) is creating something called "animation queue buildup" (http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup), which happens when interacting with other js scripts that handle animation (Fancybox uses opacity animation in the overlay).

I would say that this is not a fancybox issue and that you should bring the issue to the cycle plugin forum, however (since you are using the lite version), you may want to edit the cycle js file and do the following changes to minimize the impact of the issue (at least it won't disappear from your page):

Replace the line 166:

var fn = function() {$n.animate(opts.animIn, opts.speedIn,
opts.easeIn, cb)};

with this:

var fn = function() {$n.animate(opts.animIn, 1000, opts.easeIn, cb)};

and line 167:

$l.animate(opts.animOut, opts.speedOut, opts.easeOut, function() {

with this:

$l.animate(opts.animOut,{queue:false, duration: opts.speedOut},
opts.easeOut, function() { 
0

精彩评论

暂无评论...
验证码 换一张
取 消