From 9e4837278ba88ca483e67c0a6edc813a77996a67 Mon Sep 17 00:00:00 2001
From: Michael Stapelberg <michael@stapelberg.de>
Date: Sat, 23 Jul 2011 14:09:02 +0200
Subject: [PATCH] gallery: add proper previous / next buttons, progress
 indicator

---
 css/style.css     |  15 +++++++++------
 img/loading.gif   | Bin 0 -> 1805 bytes
 img/nextbtn.png   | Bin 0 -> 777 bytes
 img/prevbtn.png   | Bin 0 -> 812 bytes
 js/gallery.js     |  24 +++++++++++++-----------
 js/gallery.min.js |   2 +-
 6 files changed, 23 insertions(+), 18 deletions(-)
 create mode 100644 img/loading.gif
 create mode 100644 img/nextbtn.png
 create mode 100644 img/prevbtn.png

diff --git a/css/style.css b/css/style.css
index 564611f..b568027 100644
--- a/css/style.css
+++ b/css/style.css
@@ -270,9 +270,10 @@ img {
     position: fixed;
     left: 50%;
     top: 50%;
-    width: 64px;
-    height: 64px;
-    background-color: red;
+    width: 58px;
+    height: 60px;
+    background-color: black;
+    background-image: url('/img/loading.gif');
     opacity: 0.9;
     z-index: 20;
     display: none;
@@ -305,17 +306,19 @@ img {
     width: 64px;
     height: 64px;
     border-radius: 4px;
-    background-color: green;
-    z-index: 19;
+    background-color: black;
+    z-index: 22;
+    opacity: 0.7;
 }
 
 #imgleft {
     left: 0;
+    background-image: url('/img/prevbtn.png');
 }
 
 #imgright {
     right: 0;
-    background-color: blue;
+    background-image: url('/img/nextbtn.png');
 }
 
 /* clearfix */
diff --git a/img/loading.gif b/img/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f51f9c65a76aed60cb061c7026697b91a5ceedcf
GIT binary patch
literal 1805
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
AZ2$lO

literal 0
HcmV?d00001

diff --git a/img/nextbtn.png b/img/nextbtn.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5d1190ea4672064e70bd4d47d6358a2b947214b
GIT binary patch
literal 777
zcmeAS@N?(olHy`uVBq!ia0vp^4nXY4!3-qBUI%#sDaPU;cPEB*=VV?2Ih+L^k;Op8
z*Fl)kNn>^eP>{XE)7O>#HoG{thFrptPM|4_ngKo`u0SbD0231v3kwSy8yhz_HxCbw
zfPjFIkdTOoh^VNjn3$Nnyu6Z<l8TCos;a7*nwplDmXVQ>v9YnKsj024t)ru(v$M0S
ztE-2HhnJU^x3{;Ck56P|WK>jCbaZq=LPAnfQc6lnW@ctqR#skKUVeUlK|w)FOG|5O
zYgboSUtiypDO09Rn>Ky=^x3m#FIu!{@#4kn*RS8OVZ+9a8#is*v~S<O6DLlbJbCie
zsZ(dpoH=*y-1+n8FI~EH`SRtfSFhf_ef$3X`wt&JeERh1vuDqqKY#w_&6~Gx-+ub^
z>C2ZdU%!6+{{8#UpFjWp{rm6VzyJULPn^xZ8W>U{B|(0{42;ZXHhxjD%~R(uTD)?@
zrY)z={d<)boeB(8H%}MGkch)aZ-fUi1q!r2%swX>c%&ie*qRx|4kE@}Y$50N|99Qd
zZkc-V{pV2svwLOLSnQ>4Su4A_d&hDtG)!}e=2&>UqE11~=|!p05B`KZ%w`WtuQ9YS
zY!sD^U}`vi;(!suqvDH94sR+M9-U-v@H)nFWFosloSP2AN9%k>25~(H!&D}v$BYNI
za&~OrGMzE$F0+8ST!V&x6vKgi+y&Ne7#~&NI?Yh{g0aKt5);ES8;3`C&N$pr)n!<5
z%+?`ix5G6imz$NWfoCJ<Pdv1uRLFbvF;9_r_G7UEPaYr375T2YddbvlYgYX!ej^e(
z(K{mbZ{o2RK96j(zql<FUcR?`wPChhMVx_~%*Tz7c_JT`T$mN|S@_z5$e2zG?d5`t
zHc8h$+`)2A=-jEvH|MPSdMT87!STB>v*)nva^hIHbG?1mmTSN5`TsG*WOroMe0~Z}
No}R9LF6*2UngF9>HNXG>

literal 0
HcmV?d00001

diff --git a/img/prevbtn.png b/img/prevbtn.png
new file mode 100644
index 0000000000000000000000000000000000000000..79506e925865cdfec048deebc78ce554a8e4e70c
GIT binary patch
literal 812
zcmeAS@N?(olHy`uVBq!ia0vp^4nXY4!3-qBUI%#sDaPU;cPEB*=VV?2Ih+L^k;Op8
z*Fl)kNn>^eP>{XE)7O>#HoG{tKF96ARY!n&0s?$OT!B&)0!BtgCMG6kW@Z)^7FJeP
zHa0dcE-r3vZhn4#K|w(wAt7O5VG$7#QBhGbF);}V2{}1A1qB5~MMX6=HFb4$EiEl$
zV`CE&6H`-D3kwT7J3D)Odq+n{H#awLZ|~61(Ae16xVX5)#Kfeeq~zq})YR0pw6y&E
z{Gy_w^78VAhK81wmX3~&i4!MIpFVx&%$ZA;ELpZ}+4AMfSFc{ZVZ(;an>TOSvSsVm
zt=qP3+rEAKjvYG=95`_J@Zn>}j-5Gk=KT5dmo8npdiCnfn>X*=xpVjK-Fx@$J$Ufo
z;lqcI9zA;U<jK>gPoF(|_Wb$tmoHzwdiCnfn>U|7fByFE+xPF^fBg9I^XJcBzkdDx
z{rk_KKmY#y`~UyHcyo0bFhE61g8YIREUj!DoZXvRIy$?jO`kby_OeyK{<_VX28=OA
zM^6{Wkch)qZ@7jt6$r3=5Zzt8f!WYN@Qs5`j?NpWoWL3H>pw3t*ZX&z`!i$R`?smz
z&(3<Oxh}WBr*z@WNKfH8mtPoew&GZ6vbl<N#VPXz#c7oRj86Vfk`G8`#GRh>WR>=X
zjh>U9Y*RKU^5mRRvykae&wHMd<DRS%yB4tc><?m$y1qH2VPA3(<FWUejK%Lm8n#KS
zWcaH-r6FOG(1st5tQq|ixeN-tI63TtnHI%|G~B=Xl#At@2IFDPtOIhc5BylSg&deJ
zz_?{iiU|Y9au<ew%7P8%vo10yd{JQfAm72TXQDqZgW4pehI>0Wp2$7!U;fsO<-%5F
zrVnnHq!@Z)yBYqpD>3LSb!Au_uEcPE9|yzce5Hm5x}HUc_v(LnGwF;UXY1kJ6D;PR
x|9okx^oqa+uC3PMGiHiTooc=8%4h!b&H0C|r~WIm>|X^+zMigrF6*2UngH46MZ*99

literal 0
HcmV?d00001

diff --git a/js/gallery.js b/js/gallery.js
index 284fb21..e601b2e 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -5,6 +5,14 @@ function initGallery() {
     $(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');
         });
@@ -28,8 +36,6 @@ function initGallery() {
         });
 
         var wheelhandler = function(event, delta) {
-            //console.log('event = ' + event + ', delta = ' + delta);
-
             // if we are not in the slideshow mode, process the event as normal
             if (!$('#mask').is(':visible')) {
                 return true;
@@ -74,7 +80,7 @@ function initGallery() {
                 $('#loading').hide();
                 var element = $('<img>');
                 element.attr({ 'src': url, 'width':dims.width });
-                element.css({ 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' });
+                element.css({ 'z-index': 21, 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' });
                 if (direction !== undefined) {
                     // slide from right to left
                     if (direction === 'left') {
@@ -100,10 +106,8 @@ function initGallery() {
             };
 
             if (img.complete) {
-                //console.log('image already in cache');
                 loadcomplete();
             } else {
-                //console.log('loading image');
                 img.onload = loadcomplete;
             }
         };
@@ -136,8 +140,7 @@ function initGallery() {
             showmask();
 
             var full = $(this).parent().attr('href');
-            var loading = $('#loading');
-            loading.show();
+            $('#loading').show();
 
             loadimage(full, undefined, false);
 
@@ -152,13 +155,13 @@ function initGallery() {
             var next = images[idx+1];
 
             if (next === undefined) {
-                //console.log('there is no next image');
                 return false;
             }
 
-            //console.log('loading next one: ' + next);
+            $('#imgright').css('opacity', 1.0).animate({ opacity: 0.7 }, 500);
             // slide out the current image
             var winW = $(window).width();
+            $('#loading').show();
             $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() {
                 $(this).remove();
             });
@@ -176,11 +179,10 @@ function initGallery() {
             var prev = images[idx-1];
 
             if (prev === undefined) {
-                //console.log('there is no next image');
                 return false;
             }
 
-            //console.log('loading prev one: ' + prev);
+            $('#imgleft').css('opacity', 1.0).animate({ opacity: 0.7 }, 500);
             // slide out the current image
             var winW = $(window).width();
             $('#maskinner img').animate({ 'left': '+=' + winW }, 'fast', function() {
diff --git a/js/gallery.min.js b/js/gallery.min.js
index 623d4ff..a2bafac 100644
--- 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");$(".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({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");var m=$("#loading");m.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}var m=$(window).width();$("#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}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)}})})};
+$(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)}})})};
-- 
2.39.5