Bugfix: Append the <img> element to the DOM before setting 'left' etc.

Fixes the slide-in animation in Firefox 3.5

diff --git a/js/gallery.js b/js/gallery.js
index 88118600d8f49620d3e9906a1876e7ca81cc9f39..a1724fbf2bef0482d070dde141b4bbb6f7765ef0 100644 (file)
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -79,6 +79,7 @@ function initGallery() {
             $('#loading').hide();
             var element = $('<img>');
             element.attr({ 'src': url, 'width':dims.width });
+            $('#maskinner').append(element);
             element.css({ 'z-index': 21, 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' });
             if (direction !== undefined) {
                 // slide from right to left
@@ -94,7 +95,6 @@ function initGallery() {
                     });
                 }
             }
-            $('#maskinner').append(element);
             $('#maskinner').show();
 
             $('#bigimg').show();

diff --git a/js/gallery.min.js b/js/gallery.min.js
index a2bafac54931110d4976335865d2ee239b804aca..f57a8fba5a5e5582ffc9fdaf789ebf42f55a029c 100644 (file)
--- a/js/gallery.min.js
+++ b/js/gallery.min.js
@@ -1,4 +1,4 @@
 function initGallery(){
 (function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
 (function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
-$(document).ready(function(){$(".shot span").css("color","#888");$("#imgleft, #imgright").mouseover(function(){$(this).css("opacity",0.9)});$("#imgleft, #imgright").mouseout(function(){$(this).css("opacity",0.7)});$(".shot img").mouseover(function(){$(this).parent().parent().children("span").css("color","white")});$(".shot img").mouseout(function(){$(this).parent().parent().children("span").css("color","#888")});var h=[];var b=0;$(".shot a").each(function(l,m){h[b++]=$(m).attr("href")});$(window).mousewheel(function(l,m){return(!$("#mask").is(":visible"))});var i=function(l,m){if(!$("#mask").is(":visible")){return true}if(m<0){g();return false}else{if(m>0){f();return false}}};$(window).mousewheel(i);var d=function(o,p,l){var n=new Image();n.src=o;var m=function(){var s=$(window).width();var u=$(window).height();var t=s-(2*64);var q=u-64;var v={top:0,left:0,width:(n.width>t?t:n.width),height:n.height};v.height=(v.width/n.width)*n.height;if(v.height>q){v.height=q;v.width=(v.height/n.height)*n.width}v.top=(u-v.height)/2;v.left=((t-v.width)/2)+64;$("#loading").hide();var r=$("<img>");r.attr({src:o,width:v.width});r.css({"z-index":21,position:"absolute",top:v.top+"px",left:v.left+"px"});if(p!==undefined){if(p==="left"){r.css({left:s+"px"});r.animate({left:"-="+(s-v.left)},"fast",function(){$(window).mousewheel(i)})}else{r.css({left:"-"+s+"px"});r.animate({left:"+="+(s+v.left)},"fast",function(){$(window).mousewheel(i)})}}$("#maskinner").append(r);$("#maskinner").show();$("#bigimg").show();if(!l&&window.history.pushState){window.history.pushState(undefined,"i3 screenshot: "+o,"#"+o)}};if(n.complete){m()}else{n.onload=m}};var k=$("#mask, #bigimg");var j=function(l){k.hide();$("#maskinner img").remove();if(!l&&window.history.pushState){window.history.pushState(undefined,"i3 screenshots","#")}};k.click(function(){j(false)});var e=function(){var n=$(window).height();var m=$(document).height();var o=$(window).width();var l=$("#mask");l.css({width:o,height:m}).show()};$(".shot img").click(function(){e();var l=$(this).parent().attr("href");$("#loading").show();d(l,undefined,false);return false});var g=function(){var l=$.inArray($("#maskinner img").attr("src"),h);var n=h[l+1];if(n===undefined){return false}$("#imgright").css("opacity",1).animate({opacity:0.7},500);var m=$(window).width();$("#loading").show();$("#maskinner img").animate({left:"-="+(m-64)},"fast",function(){$(this).remove()});d(n,"left",false);$(window).unmousewheel(i);return false};$("#imgright").click(g);var f=function(){var l=$.inArray($("#maskinner img").attr("src"),h);var n=h[l-1];if(n===undefined){return false}$("#imgleft").css("opacity",1).animate({opacity:0.7},500);var m=$(window).width();$("#maskinner img").animate({left:"+="+m},"fast",function(){$(this).remove()});d(n,"right",false);$(window).unmousewheel(i);return false};$("#imgleft").click(f);var c=function(l){switch(l.keyCode){case 37:f();break;case 39:g();break;case 27:j(false);break}};if($.browser.mozilla){$(document).keypress(c)}else{$(document).keydown(c)}if(location.hash.length>0){var a=location.hash.substring(1);e();d(a,undefined,true)}$(window).hashchange(function(){if(location.hash.length===0){j(true);return}var l=location.hash.substring(1);if(l.length===0){j(true)}else{e();d(l,undefined,true)}})})};
+$(".shot span").css("color","#888");$("#imgleft, #imgright").mouseover(function(){$(this).css("opacity",0.9)});$("#imgleft, #imgright").mouseout(function(){$(this).css("opacity",0.7)});$(".shot img").mouseover(function(){$(this).parent().parent().children("span").css("color","white")});$(".shot img").mouseout(function(){$(this).parent().parent().children("span").css("color","#888")});var h=[];var b=0;$(".shot a").each(function(l,m){h[b++]=$(m).attr("href")});$(window).mousewheel(function(l,m){return(!$("#mask").is(":visible"))});var i=function(l,m){if(!$("#mask").is(":visible")){return true}if(m<0){g();return false}else{if(m>0){f();return false}}};$(window).mousewheel(i);var d=function(o,p,l){var n=new Image();n.src=o;var m=function(){var s=$(window).width();var u=$(window).height();var t=s-(2*64);var q=u-64;var v={top:0,left:0,width:(n.width>t?t:n.width),height:n.height};v.height=(v.width/n.width)*n.height;if(v.height>q){v.height=q;v.width=(v.height/n.height)*n.width}v.top=(u-v.height)/2;v.left=((t-v.width)/2)+64;$("#loading").hide();var r=$("<img>");r.attr({src:o,width:v.width});$("#maskinner").append(r);r.css({"z-index":21,position:"absolute",top:v.top+"px",left:v.left+"px"});if(p!==undefined){if(p==="left"){r.css({left:s+"px"});r.animate({left:"-="+(s-v.left)},"fast",function(){$(window).mousewheel(i)})}else{r.css({left:"-"+s+"px"});r.animate({left:"+="+(s+v.left)},"fast",function(){$(window).mousewheel(i)})}}$("#maskinner").show();$("#bigimg").show();if(!l&&window.history.pushState){window.history.pushState(undefined,"i3 screenshot: "+o,"#"+o)}};if(n.complete){m()}else{n.onload=m}};var k=$("#mask, #bigimg");var j=function(l){k.hide();$("#maskinner img").remove();if(!l&&window.history.pushState){window.history.pushState(undefined,"i3 screenshots","#")}};k.click(function(){j(false)});var e=function(){var n=$(window).height();var m=$(document).height();var o=$(window).width();var l=$("#mask");l.css({width:o,height:m}).show()};$(".shot img").click(function(){e();var l=$(this).parent().attr("href");$("#loading").show();d(l,undefined,false);return false});var g=function(){var l=$.inArray($("#maskinner img").attr("src"),h);var n=h[l+1];if(n===undefined){return false}$("#imgright").css("opacity",1).animate({opacity:0.7},500);var m=$(window).width();$("#loading").show();$("#maskinner img").animate({left:"-="+(m-64)},"fast",function(){$(this).remove()});d(n,"left",false);$(window).unmousewheel(i);return false};$("#imgright").click(g);var f=function(){var l=$.inArray($("#maskinner img").attr("src"),h);var n=h[l-1];if(n===undefined){return false}$("#imgleft").css("opacity",1).animate({opacity:0.7},500);var m=$(window).width();$("#maskinner img").animate({left:"+="+m},"fast",function(){$(this).remove()});d(n,"right",false);$(window).unmousewheel(i);return false};$("#imgleft").click(f);var c=function(l){switch(l.keyCode){case 37:f();break;case 39:g();break;case 27:j(false);break}};if($.browser.mozilla){$(document).keypress(c)}else{$(document).keydown(c)}if(location.hash.length>0){var a=location.hash.substring(1);e();d(a,undefined,true)}$(window).hashchange(function(){if(location.hash.length===0){j(true);return}var l=location.hash.substring(1);if(l.length===0){j(true)}else{e();d(l,undefined,true)}})};