gallery: add image description bar

diff --git a/css/style.css b/css/style.css
index 017745c633b387c5c209d0fde3749c8a6dacd23d..30d413dad7ae7161e354a19341cd26610a794b81 100644 (file)
--- a/css/style.css
+++ b/css/style.css
@@ -322,6 +322,27 @@ img {
     background-image: url('/img/nextbtn.png');
 }
 
+#imgdesc {
+    position: fixed;
+    left: 64px;
+    bottom: 0;
+    background-color: #333;
+    width: 100%;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    padding-left: 2em;
+    border: 1px solid #555;
+    border-bottom: 0;
+}
+
+#imgdesc .filename {
+    font-weight: bold;
+}
+
+#imgdesc .description {
+    padding-left: 1em;
+}
+
 /* clearfix */
 .clearfix:after {
     content: ".";

diff --git a/js/gallery.js b/js/gallery.js
index aede94327567a8e2cbb89fe2ae2d4c4cf9333033..11459799e01ea12d592cbb43b751ea092cb140c1 100644 (file)
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -58,11 +58,23 @@ function initGallery() {
         var img = new Image();
         img.src = url;
 
+        // position imgdesc
+        $('#imgdesc').css({ 'width': $('body').width() - (2 * 64) - 4 + 'px' });
+
+        // get description
+        var desc = $(".shot a[href='" + url + "']").parent().children('span').text();
+        $('#imgdesc .description').text(desc);
+
+        // get filename
+        var pos = url.lastIndexOf('/');
+        var filename = (pos !== -1 ? url.substr(pos+1) : url);
+        $('#imgdesc .filename').text(filename);
+
         var loadcomplete = function() {
             var winW = $(window).width();
             var winH = $(window).height();
             var max_w = winW - (2 * 64);
-            var max_h = winH - 64;
+            var max_h = winH - 48;
             var dims = {
                 'top': 0,
                 'left': 0,
@@ -74,7 +86,7 @@ function initGallery() {
                 dims.height = max_h;
                 dims.width = (dims.height / img.height) * img.width;
             }
-            dims.top = (winH - dims.height) / 2;
+            dims.top = (max_h - dims.height) / 2 + 2;
             dims.left = ((max_w - dims.width) / 2) + 64;
             $('#loading').hide();
             var element = $('<img>');

diff --git a/js/gallery.min.js b/js/gallery.min.js
index a9295551889c97811e2b621c14bbb7fa0a87056b..e941cac5fd8c0d1ab7379127e4d79afa7b49f02d 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);
-$(".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){if(!$("#mask").is(":visible")){return true}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(p,q,l){var o=new Image();o.src=p;$("#imgdesc").css({width:$("body").width()-(2*64)-4+"px"});var r=$(".shot a[href='"+p+"']").parent().children("span").text();$("#imgdesc .description").text(r);var s=p.lastIndexOf("/");var n=(s!==-1?p.substr(s+1):p);$("#imgdesc .filename").text(n);var m=function(){var v=$(window).width();var x=$(window).height();var w=v-(2*64);var t=x-48;var y={top:0,left:0,width:(o.width>w?w:o.width),height:o.height};y.height=(y.width/o.width)*o.height;if(y.height>t){y.height=t;y.width=(y.height/o.height)*o.width}y.top=(t-y.height)/2+2;y.left=((w-y.width)/2)+64;$("#loading").hide();var u=$("<img>");u.attr({src:p,width:y.width});$("#maskinner").append(u);u.css({"z-index":21,position:"absolute",top:y.top+"px",left:y.left+"px"});if(q!==undefined){if(q==="left"){u.css({left:v+"px"});u.animate({left:"-="+(v-y.left)},"fast",function(){$(window).mousewheel(i)})}else{u.css({left:"-"+v+"px"});u.animate({left:"+="+(v+y.left)},"fast",function(){$(window).mousewheel(i)})}}$("#maskinner").show();$("#bigimg").show();if(!l&&window.history.pushState){window.history.pushState(undefined,"i3 screenshot: "+p,"#"+p)}};if(o.complete){m()}else{o.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){if(!$("#mask").is(":visible")){return true}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)}})};

diff --git a/screenshots/index.html.mako b/screenshots/index.html.mako
index ae989e122920d8057eac2315a5c56bdd570b21ef..7bb41db4d41178aba727f3026f6391cf1494f66f 100644 (file)
--- a/screenshots/index.html.mako
+++ b/screenshots/index.html.mako
@@ -19,6 +19,10 @@
             </div>
             <div id="imgright">
             </div>
+           <div id="imgdesc">
+           <span class="filename">i3-2.png</span>
+           <span class="description">VIM, MPlayer</span>
+           </div>
         </div>
     </div>
 </div>