升级到jQuery 1.9.1时Slimbox V2错误

当你有一个使用Slimbox V2并升级到jQuery 1.9.1的网站时，你会得到一个奇怪的行为。 半透明覆盖层位于图像前方而不是后方。

在升级之前，我使用了jQuery 1.8，一切正常。 网站上没有其他任何变化。 如何在不降级jQuery的情况下解决问题？

Answer 1

它不起作用的原因是jQuery 1.9改变了方式.after()工作，我在下面显示的原始灯箱中的复杂代码以旧方式使用.after() （假设它将新元素添加到返回的元素集，而新的.after()没有。）

您可以通过更改顺序轻松修复它，而不是：

 $('.....).appendTo($('body')); 

你这样做：

 $('body').append($('...); 

但要注意 。 下面的代码已由我更改为将数据部分放在图片上方而不是下面，这需要进行其他更改（您需要在size_container函数中添加数据部分的高度）。 尽管如此，这是一个如何解决问题的演示 – 并且正在发挥作用。 查看我正在处理的网站

 Lightbox.prototype.build = function() { var $lightbox, _this = this; $('body').append($("
", { id: 'lightboxOverlay' }),$('
', { id: 'lightbox' }).append($('
', { "class": 'lb-outerContainer' }).append($('
', { "class": 'lb-dataContainer' }).append($('
', { "class": 'lb-data' }).append($('
', { "class": 'lb-details' }).append($('', { "class": 'lb-caption' }), $('', { "class": 'lb-number' })), $('
', { "class": 'lb-closeContainer' }).append($('', { "class": 'lb-close' }).append($('', { src: this.options.fileCloseImage }))))),$('
', { "class": 'lb-container' }).append($('', { "class": 'lb-image' }),$('
', { "class": 'lb-nav' }).append($('', { "class": 'lb-prev' }), $('', { "class": 'lb-next' })), $('
', { "class": 'lb-loader' }).append($('', { "class": 'lb-cancel' }).append($('', { src: this.options.fileLoadingImage }))))))); 

Answer 2

我在2.05版本中修复了它。

这是代码中的变化的差异 。

Answer 3

嗯…修复了Lightbox2 jQuery 1.9.1 – http://www.cybernova.net/javascripts/lightbox.js

Answer 4

这是我找到的修复方法。

  /* Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery (c) 2007-2010 Christophe Beyls  MIT-style license. */ (function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new Image(),J=new Image(),H,a,g,p,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('
').click(C)[0],a=w('
')[0],G=w('
')[0]]).css("display","none"));g=w('
').appendTo(a).append(p=w('
').append([I=w('').click(B)[0],d=w('').click(e)[0]])[0])[0];c=w('
').appendTo(G).append([w('').click(C)[0],A=w('
')[0],K=w('
')[0],w('
')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+(E.height()/2);L=u.initialWidth;r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:L,height:r,marginLeft:-L/2}).show();v=m||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();j(1);f=O;u.loop=u.loop&&(f.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q=0)?C():(M(N,u.nextKeys)>=0)?e():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function e(){return b(D)}function b(M){if(M>=0){F=M;n=f[F][0];x=(F||(u.loop?f.length:0))-1;D=((F+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new Image();k.onload=i;k.src=n}return false}function i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});w(p).width(k.width);w([p,I,d]).height(k.height);w(A).html(f[F][1]||"");w(K).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(D>=0){J.src=f[D][0]}L=g.offsetWidth;r=g.offsetHeight;var M=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+r,marginLeft:-L/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function h(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function q(){k.onload=null;k.src=t.src=J.src=n;w([a,g,c]).stop(true);w([I,d,g,G]).hide()}function C(){if(F>=0){q();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,j)}return false}})(jQuery); 

来源： http ： //code.google.com/p/slimbox/issues/attachmentText？id = 36＆aid = 360003000＆name = sqlbox2.js

Answer 5

 Lightbox.prototype.build = function() { var $lightbox, _this = this; $("
", { id: 'lightboxOverlay' }).appendTo('body'); $('
', { id: 'lightbox' }).append($('
', { "class": 'lb-outerContainer' }).append($('
', { "class": 'lb-container' }).append($('', { .... 

Answer 6

你遇到的问题很容易解决。 我自己只花了一个小时……

在slimbox2的缩小版本中，查找以下代码：

 appendTo(G).append([w('').add(H).click(C)[0] 

现在用以下内容替换它：

 appendTo(G).append([w('').add(H).click(C).end()[0] 

一些解释：一些div被附加到正文，包括lblOverlay（在编译版本中由H引用）。 但是，如果您查看上面的部分，通过“添加”-H变量，它将被添加到lblContainer并且不会直接在图片前面的body ==> overlay跳转中。 通过向其添加“end（）”，您将仅引用“a”元素，而不是“a”元素和overlayer元素。

在FF 20.0.1和jQuery 1.9.1中测试过