1 // vim:ts=4:sw=4:expandtab
2 // © 2011 Michael Stapelberg
4 // Redistribution and use in source and binary forms, with or without
5 // modification, are permitted provided that the following conditions are met:
7 // * Redistributions of source code must retain the above copyright
8 // notice, this list of conditions and the following disclaimer.
10 // * Redistributions in binary form must reproduce the above copyright
11 // notice, this list of conditions and the following disclaimer in the
12 // documentation and/or other materials provided with the distribution.
14 // * Neither the name of Michael Stapelberg nor the
15 // names of contributors may be used to endorse or promote products
16 // derived from this software without specific prior written permission.
18 // THIS SOFTWARE IS PROVIDED BY Michael Stapelberg ''AS IS'' AND ANY
19 // EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
20 // WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
21 // DISCLAIMED. IN NO EVENT SHALL Michael Stapelberg BE LIABLE FOR ANY
22 // DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23 // (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24 // LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
25 // ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26 // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
27 // SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 function initGallery() {
30 $('.shot span').css('color', '#888');
32 $('#imgleft, #imgright').mouseover(function() {
33 $(this).css('opacity', 0.9);
36 $('#imgleft, #imgright').mouseout(function() {
37 $(this).css('opacity', 0.7);
40 $('.shot img').mouseover(function() {
41 $(this).parent().parent().children('span').css('color', 'white');
44 $('.shot img').mouseout(function() {
45 $(this).parent().parent().children('span').css('color', '#888');
48 // build an array of all images (full URLs)
51 $('.shot a').each(function(idx, element) {
52 images[cnt++] = $(element).attr('href');
55 // handlers for mousewheel scrolling
56 // defined here because we need to enable it after the animation finished
57 $(window).mousewheel(function(event, delta) {
58 // if we are not in the slideshow mode, process the event as normal
59 return (!$('#mask').is(':visible'));
62 var wheelhandler = function(event, delta) {
63 // if we are not in the slideshow mode, process the event as normal
64 if (!$('#mask').is(':visible')) {
72 } else if (delta > 0) {
79 $(window).mousewheel(wheelhandler);
81 var loadimage = function(url, direction, fromhash) {
83 var img = new Image();
87 $('#imgdesc').css({ 'width': $('body').width() - (2 * 64) - 4 + 'px' });
90 var desc = $(".shot a[href='" + url + "']").parent().children('span').text();
91 $('#imgdesc .description').text(desc);
94 var pos = url.lastIndexOf('/');
95 var filename = (pos !== -1 ? url.substr(pos+1) : url);
96 $('#imgdesc .filename').text(filename);
98 var loadcomplete = function() {
99 var winW = $(window).width();
100 var winH = $(window).height();
101 var max_w = winW - (2 * 64);
102 var max_h = winH - 48;
106 'width': (img.width > max_w ? max_w : img.width),
109 dims.height = (dims.width / img.width) * img.height;
110 if (dims.height > max_h) {
112 dims.width = (dims.height / img.height) * img.width;
114 dims.top = (max_h - dims.height) / 2 + 2;
115 dims.left = ((max_w - dims.width) / 2) + 64;
116 $('#loading').hide();
117 var element = $('<img>');
118 element.attr({ 'src': url, 'width':dims.width });
119 $('#maskinner').append(element);
120 element.css({ 'z-index': 21, 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' });
121 if (direction !== undefined) {
122 // slide from right to left
123 if (direction === 'left') {
124 element.css({ 'left':winW + 'px' });
125 element.animate({ 'left': '-=' + (winW - dims.left) }, 'fast', function() {
126 $(window).mousewheel(wheelhandler);
129 element.css({ 'left':'-' + winW + 'px' });
130 element.animate({ 'left': '+=' + (winW + dims.left) }, 'fast', function() {
131 $(window).mousewheel(wheelhandler);
135 $('#maskinner').show();
139 if (!fromhash && window.history.pushState) {
140 window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url);
147 img.onload = loadcomplete;
151 // clicking anywhere outside the image will bring you back to the page
152 var masks = $('#mask, #bigimg');
154 var endshow = function(fromhash) {
156 $('#maskinner img').remove();
158 if (!fromhash && window.history.pushState) {
159 window.history.pushState(undefined, 'i3 screenshots', '#');
163 masks.click(function() {
166 var showmask = function() {
167 var winH = $(window).height();
168 var maskHeight = $(document).height();
169 var maskWidth = $(window).width();
171 var mask = $('#mask');
172 mask.css({ 'width': maskWidth, 'height': maskHeight }).show();
175 $('.shot img').click(function() {
178 var full = $(this).parent().attr('href');
179 $('#loading').show();
181 loadimage(full, undefined, false);
183 // TODO: also preload the next image?
185 // don't follow the link
189 var imgright = function() {
190 var idx = $.inArray($('#maskinner img').attr('src'), images);
191 var next = images[idx+1];
193 if (next === undefined) {
197 $('#imgright').css('opacity', 1.0).animate({ opacity: 0.7 }, 500);
198 // slide out the current image
199 var winW = $(window).width();
200 $('#loading').show();
201 $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() {
204 loadimage(next, 'left', false);
206 // disable mousewheel handler during load (will be re-enabled after the animation)
207 $(window).unmousewheel(wheelhandler);
211 $('#imgright').click(imgright);
213 var imgleft = function() {
214 var idx = $.inArray($('#maskinner img').attr('src'), images);
215 var prev = images[idx-1];
217 if (prev === undefined) {
221 $('#imgleft').css('opacity', 1.0).animate({ opacity: 0.7 }, 500);
222 // slide out the current image
223 var winW = $(window).width();
224 $('#maskinner img').animate({ 'left': '+=' + winW }, 'fast', function() {
227 loadimage(prev, 'right', false);
229 // disable mousewheel handler during load (will be re-enabled after the animation)
230 $(window).unmousewheel(wheelhandler);
234 $('#imgleft').click(imgleft);
236 // setup key press handlers for the left/right arrow keys
237 var keydown = function(e) {
238 // if we are not in the slideshow mode, process the event as normal
239 if (!$('#mask').is(':visible')) {
259 if ($.browser.mozilla) {
260 $(document).keypress(keydown);
262 $(document).keydown(keydown);
265 if (location.hash.length > 0) {
266 var url = location.hash.substring(1);
268 loadimage(url, undefined, true);
271 $(window).hashchange(function() {
272 if (location.hash.length === 0) {
276 var url = location.hash.substring(1);
277 if (url.length === 0) {
281 loadimage(url, undefined, true);