git.sur5r.net Git - i3/i3.github.io/blob - js/gallery.js

   1 // vim:ts=4:sw=4:expandtab
   2 // © 2011 Michael Stapelberg
   3
   4 function initGallery() {
   5     $('.shot span').css('color', '#888');
   6
   7     $('#imgleft, #imgright').mouseover(function() {
   8         $(this).css('opacity', 0.9);
   9     });
  10
  11     $('#imgleft, #imgright').mouseout(function() {
  12         $(this).css('opacity', 0.7);
  13     });
  14
  15     $('.shot img').mouseover(function() {
  16         $(this).parent().parent().children('span').css('color', 'white');
  17     });
  18
  19     $('.shot img').mouseout(function() {
  20         $(this).parent().parent().children('span').css('color', '#888');
  21     });
  22
  23     // build an array of all images (full URLs)
  24     var images = [];
  25     var cnt = 0;
  26     $('.shot a').each(function(idx, element) {
  27         images[cnt++] = $(element).attr('href');
  28     });
  29
  30     // handlers for mousewheel scrolling
  31     // defined here because we need to enable it after the animation finished
  32     $(window).mousewheel(function(event, delta) {
  33         // if we are not in the slideshow mode, process the event as normal
  34         return (!$('#mask').is(':visible'));
  35     });
  36
  37     var wheelhandler = function(event, delta) {
  38         // if we are not in the slideshow mode, process the event as normal
  39         if (!$('#mask').is(':visible')) {
  40             return true;
  41         }
  42
  43         if (delta < 0) {
  44             // scroll down
  45             imgright();
  46             return false;
  47         } else if (delta > 0) {
  48             // scroll up
  49             imgleft();
  50             return false;
  51         }
  52     };
  53
  54     $(window).mousewheel(wheelhandler);
  55
  56     var loadimage = function(url, direction, fromhash) {
  57         // now load the image
  58         var img = new Image();
  59         img.src = url;
  60
  61         // position imgdesc
  62         $('#imgdesc').css({ 'width': $('body').width() - (2 * 64) - 4 + 'px' });
  63
  64         // get description
  65         var desc = $(".shot a[href='" + url + "']").parent().children('span').text();
  66         $('#imgdesc .description').text(desc);
  67
  68         // get filename
  69         var pos = url.lastIndexOf('/');
  70         var filename = (pos !== -1 ? url.substr(pos+1) : url);
  71         $('#imgdesc .filename').text(filename);
  72
  73         var loadcomplete = function() {
  74             var winW = $(window).width();
  75             var winH = $(window).height();
  76             var max_w = winW - (2 * 64);
  77             var max_h = winH - 48;
  78             var dims = {
  79                 'top': 0,
  80                 'left': 0,
  81                 'width': (img.width > max_w ? max_w : img.width),
  82                 'height': img.height
  83             };
  84             dims.height = (dims.width / img.width) * img.height;
  85             if (dims.height > max_h) {
  86                 dims.height = max_h;
  87                 dims.width = (dims.height / img.height) * img.width;
  88             }
  89             dims.top = (max_h - dims.height) / 2 + 2;
  90             dims.left = ((max_w - dims.width) / 2) + 64;
  91             $('#loading').hide();
  92             var element = $('<img>');
  93             element.attr({ 'src': url, 'width':dims.width });
  94             $('#maskinner').append(element);
  95             element.css({ 'z-index': 21, 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' });
  96             if (direction !== undefined) {
  97                 // slide from right to left
  98                 if (direction === 'left') {
  99                     element.css({ 'left':winW + 'px' });
 100                     element.animate({ 'left': '-=' + (winW - dims.left) }, 'fast', function() {
 101                         $(window).mousewheel(wheelhandler);
 102                     });
 103                 } else {
 104                     element.css({ 'left':'-' + winW + 'px' });
 105                     element.animate({ 'left': '+=' + (winW + dims.left) }, 'fast', function() {
 106                         $(window).mousewheel(wheelhandler);
 107                     });
 108                 }
 109             }
 110             $('#maskinner').show();
 111
 112             $('#bigimg').show();
 113
 114             if (!fromhash && window.history.pushState) {
 115                 window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url);
 116             }
 117         };
 118
 119         if (img.complete) {
 120             loadcomplete();
 121         } else {
 122             img.onload = loadcomplete;
 123         }
 124     };
 125
 126     // clicking anywhere outside the image will bring you back to the page
 127     var masks = $('#mask, #bigimg');
 128
 129     var endshow = function(fromhash) {
 130         masks.hide();
 131         $('#maskinner img').remove();
 132
 133         if (!fromhash && window.history.pushState) {
 134             window.history.pushState(undefined, 'i3 screenshots', '#');
 135         }
 136     };
 137
 138     masks.click(function() {
 139         endshow(false);
 140     });
 141     var showmask = function() {
 142         var winH = $(window).height();
 143         var maskHeight = $(document).height();
 144         var maskWidth = $(window).width();
 145
 146         var mask = $('#mask');
 147         mask.css({ 'width': maskWidth, 'height': maskHeight }).show();
 148     };
 149
 150     $('.shot img').click(function() {
 151         showmask();
 152
 153         var full = $(this).parent().attr('href');
 154         $('#loading').show();
 155
 156         loadimage(full, undefined, false);
 157
 158 // TODO: also preload the next image?
 159
 160         // don't follow the link
 161         return false;
 162     });
 163
 164     var imgright = function() {
 165         var idx = $.inArray($('#maskinner img').attr('src'), images);
 166         var next = images[idx+1];
 167
 168         if (next === undefined) {
 169             return false;
 170         }
 171
 172         $('#imgright').css('opacity', 1.0).animate({ opacity: 0.7 }, 500);
 173         // slide out the current image
 174         var winW = $(window).width();
 175         $('#loading').show();
 176         $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() {
 177             $(this).remove();
 178         });
 179         loadimage(next, 'left', false);
 180
 181         // disable mousewheel handler during load (will be re-enabled after the animation)
 182         $(window).unmousewheel(wheelhandler);
 183
 184         return false;
 185     };
 186     $('#imgright').click(imgright);
 187
 188     var imgleft = function() {
 189         var idx = $.inArray($('#maskinner img').attr('src'), images);
 190         var prev = images[idx-1];
 191
 192         if (prev === undefined) {
 193             return false;
 194         }
 195
 196         $('#imgleft').css('opacity', 1.0).animate({ opacity: 0.7 }, 500);
 197         // slide out the current image
 198         var winW = $(window).width();
 199         $('#maskinner img').animate({ 'left': '+=' + winW }, 'fast', function() {
 200             $(this).remove();
 201         });
 202         loadimage(prev, 'right', false);
 203
 204         // disable mousewheel handler during load (will be re-enabled after the animation)
 205         $(window).unmousewheel(wheelhandler);
 206
 207         return false;
 208     };
 209     $('#imgleft').click(imgleft);
 210
 211     // setup key press handlers for the left/right arrow keys
 212     var keydown = function(e) {
 213         // if we are not in the slideshow mode, process the event as normal
 214         if (!$('#mask').is(':visible')) {
 215             return true;
 216         }
 217
 218         switch (e.keyCode) {
 219             // left arrow
 220             case 37:
 221                 imgleft();
 222                 break;
 223             // right arrow
 224             case 39:
 225                 imgright();
 226                 break;
 227             // escape
 228             case 27:
 229                 endshow(false);
 230                 break;
 231         }
 232     };
 233
 234     if ($.browser.mozilla) {
 235         $(document).keypress(keydown);
 236     } else {
 237         $(document).keydown(keydown);
 238     }
 239
 240     if (location.hash.length > 0) {
 241         var url = location.hash.substring(1);
 242         showmask();
 243         loadimage(url, undefined, true);
 244     }
 245
 246     $(window).hashchange(function() {
 247         if (location.hash.length === 0) {
 248             endshow(true);
 249             return;
 250         }
 251         var url = location.hash.substring(1);
 252         if (url.length === 0) {
 253             endshow(true);
 254         } else {
 255             showmask();
 256             loadimage(url, undefined, true);
 257         }
 258     });
 259 }