gallery: add proper previous / next buttons, progress indicator

diff --git a/css/style.css b/css/style.css
index 564611f7ed9adcac96da3bcf9f7039ba9c5e7231..b568027feef90f1f87b0dae4d3b13bb9e2ac6c71 100644 (file)
--- 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 (file)
index 0000000..f51f9c6
Binary files /dev/null and b/img/loading.gif differ

diff --git a/img/nextbtn.png b/img/nextbtn.png
new file mode 100644 (file)
index 0000000..f5d1190
Binary files /dev/null and b/img/nextbtn.png differ

diff --git a/img/prevbtn.png b/img/prevbtn.png
new file mode 100644 (file)
index 0000000..79506e9
Binary files /dev/null and b/img/prevbtn.png differ

diff --git a/js/gallery.js b/js/gallery.js
index 284fb21fbbecf034109ca6c7ef5e58c1537b7ff4..e601b2e2e0e28b63a4153aa59a8c5d94435d0c80 100644 (file)
--- 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 623d4ffc08cb07d3c0ffae9ca7339e512e0f0def..a2bafac54931110d4976335865d2ee239b804aca 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");$(".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)}})})};