當您有一個使用Slimbox V2並升級到jQuery 1.9.1的站點時,您會遇到一種奇怪的行爲。半透明覆蓋圖層位於圖像的前方,而不是後方。升級到jQuery 1.9.1時發生Slimbox V2錯誤
升級之前,我用jQuery 1.8,一切工作正常。網站上沒有其他改變。如何解決這個問題而不降級jQuery?
當您有一個使用Slimbox V2並升級到jQuery 1.9.1的站點時,您會遇到一種奇怪的行爲。半透明覆蓋圖層位於圖像的前方,而不是後方。升級到jQuery 1.9.1時發生Slimbox V2錯誤
升級之前,我用jQuery 1.8,一切工作正常。網站上沒有其他改變。如何解決這個問題而不降級jQuery?
它不工作的原因是,jQuery的1.9改變了方式.after()
作品,複雜的代碼,在原來的收藏夾,我下面展示使用舊的方式.after()
(假設它增加了新的元素,返回的元素集合,而新.after()
沒有。)
您可以輕鬆地改變順序解決它,所以不是:
$('.....).appendTo($('body'));
你只是做:
$('body').append($('...);
然而提防。下面的代碼已被我更改爲將數據部分放在圖片上方而不是下面,並且需要其他更改(您需要在size_container
函數中添加數據部分的高度)。儘管如此,這是對問題如何解決並且正在發揮作用的證明。見the web site I am working on
Lightbox.prototype.build = function() {
var $lightbox,
_this = this;
$('body').append($("<div>", {
id: 'lightboxOverlay'
}),$('<div/>', {
id: 'lightbox'
}).append($('<div/>', {
"class": 'lb-outerContainer'
}).append($('<div/>', {
"class": 'lb-dataContainer'
}).append($('<div/>', {
"class": 'lb-data'
}).append($('<div/>', {
"class": 'lb-details'
}).append($('<span/>', {
"class": 'lb-caption'
}), $('<span/>', {
"class": 'lb-number'
})), $('<div/>', {
"class": 'lb-closeContainer'
}).append($('<a/>', {
"class": 'lb-close'
}).append($('<img/>', {
src: this.options.fileCloseImage
}))))),$('<div/>', {
"class": 'lb-container'
}).append($('<img/>', {
"class": 'lb-image'
}),$('<div/>', {
"class": 'lb-nav'
}).append($('<a/>', {
"class": 'lb-prev'
}), $('<a/>', {
"class": 'lb-next'
})), $('<div/>', {
"class": 'lb-loader'
}).append($('<a/>', {
"class": 'lb-cancel'
}).append($('<img/>', {
src: this.options.fileLoadingImage
})))))));
唔... 固定Lightbox2的jQuery 1.9.1 - http://www.cybernova.net/javascripts/lightbox.js
請詳細說明你的回答 – Stanley 2013-03-26 00:47:07
這個文件的工作原理。 – cgatian 2013-06-06 01:07:32
這對我來說也很好!謝謝! – bestfriendsforever 2013-06-21 08:53:08
這是我發現的修復。
/*
Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery
(c) 2007-2010 Christophe Beyls <http://www.digitalia.be>
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('<div id="lbOverlay" />').click(C)[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));g=w('<div id="lbImage" />').appendTo(a).append(p=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(e)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[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<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function j(M){if(M){w("object").add(m?"select":"embed").each(function(O,P){s[O]=[P,P.style.visibility];P.style.visibility="hidden"})}else{w.each(s,function(O,P){P[0].style.visibility=P[1]});s=[]}var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",o)}function o(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=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=slimbox2.js
Lightbox.prototype.build = function() {
var $lightbox,
_this = this;
$("<div>", {
id: 'lightboxOverlay'
}).appendTo('body');
$('<div/>', {
id: 'lightbox'
}).append($('<div/>', {
"class": 'lb-outerContainer'
}).append($('<div/>', {
"class": 'lb-container'
}).append($('<img/>', { ....
你有問題就可以輕鬆解決。我剛剛花一個小時就可以自己...
在slimbox2的縮小的版本,查找下面的一段代碼:
appendTo(G).append([w('<a id="lbCloseLink" href="#" />').add(H).click(C)[0]
現在替換成以下內容:
appendTo(G).append([w('<a id="lbCloseLink" href="#" />').add(H).click(C).end()[0]
一些解釋: 一些div附加到body,包括lblOverlay(在編譯版本中由H引用)。但是,如果您查看上面的部分,通過「添加」H變量,它將被添加到lblContainer,並且不會直接在主體中==>覆蓋圖片前跳轉。 通過向其添加「end()」,您只會引用「a」元素,而不是「a」元素和overlayer元素。
測試在FF 20.0.1和jQuery 1.9.1
我固定它的2.05版本。
以下是diff隨代碼的變化。
看來是lightbox 2。51也有問題,新的jQuery或jQueryUI – Tys 2013-03-24 16:49:09