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();
62 $('#imgdesc').css({ 'width': $('body').width() - (2 * 64) - 4 + 'px' });
65 var desc = $(".shot a[href='" + url + "']").parent().children('span').text();
66 $('#imgdesc .description').text(desc);
69 var pos = url.lastIndexOf('/');
70 var filename = (pos !== -1 ? url.substr(pos+1) : url);
71 $('#imgdesc .filename').text(filename);
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;
81 'width': (img.width > max_w ? max_w : img.width),
84 dims.height = (dims.width / img.width) * img.height;
85 if (dims.height > max_h) {
87 dims.width = (dims.height / img.height) * img.width;
89 dims.top = (max_h - dims.height) / 2 + 2;
90 dims.left = ((max_w - dims.width) / 2) + 64;
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);
104 element.css({ 'left':'-' + winW + 'px' });
105 element.animate({ 'left': '+=' + (winW + dims.left) }, 'fast', function() {
106 $(window).mousewheel(wheelhandler);
110 $('#maskinner').show();
114 if (!fromhash && window.history.pushState) {
115 window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url);
122 img.onload = loadcomplete;
126 // clicking anywhere outside the image will bring you back to the page
127 var masks = $('#mask, #bigimg');
129 var endshow = function(fromhash) {
131 $('#maskinner img').remove();
133 if (!fromhash && window.history.pushState) {
134 window.history.pushState(undefined, 'i3 screenshots', '#');
138 masks.click(function() {
141 var showmask = function() {
142 var winH = $(window).height();
143 var maskHeight = $(document).height();
144 var maskWidth = $(window).width();
146 var mask = $('#mask');
147 mask.css({ 'width': maskWidth, 'height': maskHeight }).show();
150 $('.shot img').click(function() {
153 var full = $(this).parent().attr('href');
154 $('#loading').show();
156 loadimage(full, undefined, false);
158 // TODO: also preload the next image?
160 // don't follow the link
164 var imgright = function() {
165 var idx = $.inArray($('#maskinner img').attr('src'), images);
166 var next = images[idx+1];
168 if (next === undefined) {
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() {
179 loadimage(next, 'left', false);
181 // disable mousewheel handler during load (will be re-enabled after the animation)
182 $(window).unmousewheel(wheelhandler);
186 $('#imgright').click(imgright);
188 var imgleft = function() {
189 var idx = $.inArray($('#maskinner img').attr('src'), images);
190 var prev = images[idx-1];
192 if (prev === undefined) {
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() {
202 loadimage(prev, 'right', false);
204 // disable mousewheel handler during load (will be re-enabled after the animation)
205 $(window).unmousewheel(wheelhandler);
209 $('#imgleft').click(imgleft);
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')) {
234 if ($.browser.mozilla) {
235 $(document).keypress(keydown);
237 $(document).keydown(keydown);
240 if (location.hash.length > 0) {
241 var url = location.hash.substring(1);
243 loadimage(url, undefined, true);
246 $(window).hashchange(function() {
247 if (location.hash.length === 0) {
251 var url = location.hash.substring(1);
252 if (url.length === 0) {
256 loadimage(url, undefined, true);