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         var loadcomplete = function() {
  62             var winW = $(window).width();
  63             var winH = $(window).height();
  64             var max_w = winW - (2 * 64);
  65             var max_h = winH - 64;
  66             var dims = {
  67                 'top': 0,
  68                 'left': 0,
  69                 'width': (img.width > max_w ? max_w : img.width),
  70                 'height': img.height
  71             };
  72             dims.height = (dims.width / img.width) * img.height;
  73             if (dims.height > max_h) {
  74                 dims.height = max_h;
  75                 dims.width = (dims.height / img.height) * img.width;
  76             }
  77             dims.top = (winH - dims.height) / 2;
  78             dims.left = ((max_w - dims.width) / 2) + 64;
  79             $('#loading').hide();
  80             var element = $('<img>');
  81             element.attr({ 'src': url, 'width':dims.width });
  82             $('#maskinner').append(element);
  83             element.css({ 'z-index': 21, 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' });
  84             if (direction !== undefined) {
  85                 // slide from right to left
  86                 if (direction === 'left') {
  87                     element.css({ 'left':winW + 'px' });
  88                     element.animate({ 'left': '-=' + (winW - dims.left) }, 'fast', function() {
  89                         $(window).mousewheel(wheelhandler);
  90                     });
  91                 } else {
  92                     element.css({ 'left':'-' + winW + 'px' });
  93                     element.animate({ 'left': '+=' + (winW + dims.left) }, 'fast', function() {
  94                         $(window).mousewheel(wheelhandler);
  95                     });
  96                 }
  97             }
  98             $('#maskinner').show();
  99
 100             $('#bigimg').show();
 101
 102             if (!fromhash && window.history.pushState) {
 103                 window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url);
 104             }
 105         };
 106
 107         if (img.complete) {
 108             loadcomplete();
 109         } else {
 110             img.onload = loadcomplete;
 111         }
 112     };
 113
 114     // clicking anywhere outside the image will bring you back to the page
 115     var masks = $('#mask, #bigimg');
 116
 117     var endshow = function(fromhash) {
 118         masks.hide();
 119         $('#maskinner img').remove();
 120
 121         if (!fromhash && window.history.pushState) {
 122             window.history.pushState(undefined, 'i3 screenshots', '#');
 123         }
 124     };
 125
 126     masks.click(function() {
 127         endshow(false);
 128     });
 129     var showmask = function() {
 130         var winH = $(window).height();
 131         var maskHeight = $(document).height();
 132         var maskWidth = $(window).width();
 133
 134         var mask = $('#mask');
 135         mask.css({ 'width': maskWidth, 'height': maskHeight }).show();
 136     };
 137
 138     $('.shot img').click(function() {
 139         showmask();
 140
 141         var full = $(this).parent().attr('href');
 142         $('#loading').show();
 143
 144         loadimage(full, undefined, false);
 145
 146 // TODO: also preload the next image?
 147
 148         // don't follow the link
 149         return false;
 150     });
 151
 152     var imgright = function() {
 153         var idx = $.inArray($('#maskinner img').attr('src'), images);
 154         var next = images[idx+1];
 155
 156         if (next === undefined) {
 157             return false;
 158         }
 159
 160         $('#imgright').css('opacity', 1.0).animate({ opacity: 0.7 }, 500);
 161         // slide out the current image
 162         var winW = $(window).width();
 163         $('#loading').show();
 164         $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() {
 165             $(this).remove();
 166         });
 167         loadimage(next, 'left', false);
 168
 169         // disable mousewheel handler during load (will be re-enabled after the animation)
 170         $(window).unmousewheel(wheelhandler);
 171
 172         return false;
 173     };
 174     $('#imgright').click(imgright);
 175
 176     var imgleft = function() {
 177         var idx = $.inArray($('#maskinner img').attr('src'), images);
 178         var prev = images[idx-1];
 179
 180         if (prev === undefined) {
 181             return false;
 182         }
 183
 184         $('#imgleft').css('opacity', 1.0).animate({ opacity: 0.7 }, 500);
 185         // slide out the current image
 186         var winW = $(window).width();
 187         $('#maskinner img').animate({ 'left': '+=' + winW }, 'fast', function() {
 188             $(this).remove();
 189         });
 190         loadimage(prev, 'right', false);
 191
 192         // disable mousewheel handler during load (will be re-enabled after the animation)
 193         $(window).unmousewheel(wheelhandler);
 194
 195         return false;
 196     };
 197     $('#imgleft').click(imgleft);
 198
 199     // setup key press handlers for the left/right arrow keys
 200     var keydown = function(e) {
 201         switch (e.keyCode) {
 202             // left arrow
 203             case 37:
 204                 imgleft();
 205                 break;
 206             // right arrow
 207             case 39:
 208                 imgright();
 209                 break;
 210             // escape
 211             case 27:
 212                 endshow(false);
 213                 break;
 214         }
 215     };
 216
 217     if ($.browser.mozilla) {
 218         $(document).keypress(keydown);
 219     } else {
 220         $(document).keydown(keydown);
 221     }
 222
 223     if (location.hash.length > 0) {
 224         var url = location.hash.substring(1);
 225         showmask();
 226         loadimage(url, undefined, true);
 227     }
 228
 229     $(window).hashchange(function() {
 230         if (location.hash.length === 0) {
 231             endshow(true);
 232             return;
 233         }
 234         var url = location.hash.substring(1);
 235         if (url.length === 0) {
 236             endshow(true);
 237         } else {
 238             showmask();
 239             loadimage(url, undefined, true);
 240         }
 241     });
 242 }