1 // vim:ts=4:sw=4:expandtab
2 // © 2011 Michael Stapelberg
4 function initGallery() {
5 $('.shot span').css('color', '#888');
7 $('#imgleft, #imgright').mouseover(function() {
8 $(this).css('opacity', 0.9);
11 $('#imgleft, #imgright').mouseout(function() {
12 $(this).css('opacity', 0.7);
15 $('.shot img').mouseover(function() {
16 $(this).parent().parent().children('span').css('color', 'white');
19 $('.shot img').mouseout(function() {
20 $(this).parent().parent().children('span').css('color', '#888');
23 // build an array of all images (full URLs)
26 $('.shot a').each(function(idx, element) {
27 images[cnt++] = $(element).attr('href');
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'));
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')) {
47 } else if (delta > 0) {
54 $(window).mousewheel(wheelhandler);
56 var loadimage = function(url, direction, fromhash) {
58 var img = new Image();
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;
69 'width': (img.width > max_w ? max_w : img.width),
72 dims.height = (dims.width / img.width) * img.height;
73 if (dims.height > max_h) {
75 dims.width = (dims.height / img.height) * img.width;
77 dims.top = (winH - dims.height) / 2;
78 dims.left = ((max_w - dims.width) / 2) + 64;
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);
92 element.css({ 'left':'-' + winW + 'px' });
93 element.animate({ 'left': '+=' + (winW + dims.left) }, 'fast', function() {
94 $(window).mousewheel(wheelhandler);
98 $('#maskinner').show();
102 if (!fromhash && window.history.pushState) {
103 window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url);
110 img.onload = loadcomplete;
114 // clicking anywhere outside the image will bring you back to the page
115 var masks = $('#mask, #bigimg');
117 var endshow = function(fromhash) {
119 $('#maskinner img').remove();
121 if (!fromhash && window.history.pushState) {
122 window.history.pushState(undefined, 'i3 screenshots', '#');
126 masks.click(function() {
129 var showmask = function() {
130 var winH = $(window).height();
131 var maskHeight = $(document).height();
132 var maskWidth = $(window).width();
134 var mask = $('#mask');
135 mask.css({ 'width': maskWidth, 'height': maskHeight }).show();
138 $('.shot img').click(function() {
141 var full = $(this).parent().attr('href');
142 $('#loading').show();
144 loadimage(full, undefined, false);
146 // TODO: also preload the next image?
148 // don't follow the link
152 var imgright = function() {
153 var idx = $.inArray($('#maskinner img').attr('src'), images);
154 var next = images[idx+1];
156 if (next === undefined) {
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() {
167 loadimage(next, 'left', false);
169 // disable mousewheel handler during load (will be re-enabled after the animation)
170 $(window).unmousewheel(wheelhandler);
174 $('#imgright').click(imgright);
176 var imgleft = function() {
177 var idx = $.inArray($('#maskinner img').attr('src'), images);
178 var prev = images[idx-1];
180 if (prev === undefined) {
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() {
190 loadimage(prev, 'right', false);
192 // disable mousewheel handler during load (will be re-enabled after the animation)
193 $(window).unmousewheel(wheelhandler);
197 $('#imgleft').click(imgleft);
199 // setup key press handlers for the left/right arrow keys
200 var keydown = function(e) {
217 if ($.browser.mozilla) {
218 $(document).keypress(keydown);
220 $(document).keydown(keydown);
223 if (location.hash.length > 0) {
224 var url = location.hash.substring(1);
226 loadimage(url, undefined, true);
229 $(window).hashchange(function() {
230 if (location.hash.length === 0) {
234 var url = location.hash.substring(1);
235 if (url.length === 0) {
239 loadimage(url, undefined, true);