diff --git a/js/gallery.js b/js/gallery.js new file mode 100644 index 0000000..9524e71 --- /dev/null +++ b/js/gallery.js @@ -0,0 +1,243 @@ +// vim:ts=4:sw=4:expandtab +// Â© 2011 Michael Stapelberg + +function initGallery() { + $(document).ready(function() { + $('.shot span').css('color', '#888'); + + $('.shot').mouseover(function() { + $(this).children('span').css('color', 'white'); + }); + + $('.shot').mouseout(function() { + $(this).children('span').css('color', '#888'); + }); + + // build an array of all images (full URLs) + var images = []; + var cnt = 0; + $('.shot a').each(function(idx, element) { + images[cnt++] = $(element).attr('href'); + }); + + // handlers for mousewheel scrolling + // defined here because we need to enable it after the animation finished + $(window).mousewheel(function(event, delta) { + // if we are not in the slideshow mode, process the event as normal + return (!$('#mask').is(':visible')); + }); + + var wheelhandler = function(event, delta) { + //console.log('event = ' + event + ', delta = ' + delta); + + // if we are not in the slideshow mode, process the event as normal + if (!$('#mask').is(':visible')) { + return true; + } + + if (delta < 0) { + // scroll down + imgright(); + return false; + } else if (delta > 0) { + // scroll up + imgleft(); + return false; + } + }; + + $(window).mousewheel(wheelhandler); + + var loadimage = function(url, direction, fromhash) { + // now load the image + var img = new Image(); + img.src = url; + + var loadcomplete = function() { + var winW = $(window).width(); + var winH = $(window).height(); + var max_w = winW - (2 * 64); + var max_h = winH - 64; + var dims = { + 'top': 0, + 'left': 0, + 'width': (img.width > max_w ? max_w : img.width), + 'height': img.height + }; + dims.height = (dims.width / img.width) * img.height; + if (dims.height > max_h) { + dims.height = max_h; + dims.width = (dims.height / img.height) * img.width; + } + dims.top = (winH - dims.height) / 2; + dims.left = ((max_w - dims.width) / 2) + 64; + $('#loading').hide(); + var element = $(''); + element.attr({ 'src': url, 'width':dims.width }); + element.css({ 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' }); + if (direction !== undefined) { + // slide from right to left + if (direction === 'left') { + element.css({ 'left':winW + 'px' }); + element.animate({ 'left': '-=' + (winW - dims.left) }, 'fast', function() { + $(window).mousewheel(wheelhandler); + }); + } else { + element.css({ 'left':'-' + winW + 'px' }); + element.animate({ 'left': '+=' + (winW + dims.left) }, 'fast', function() { + $(window).mousewheel(wheelhandler); + }); + } + } + $('#maskinner').append(element); + $('#maskinner').show(); + + $('#bigimg').show(); + + if (!fromhash && window.history.pushState) { + window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url); + } + }; + + if (img.complete) { + //console.log('image already in cache'); + loadcomplete(); + } else { + //console.log('loading image'); + img.onload = loadcomplete; + } + }; + + // clicking anywhere outside the image will bring you back to the page + var masks = $('#mask, #bigimg'); + + var endshow = function(fromhash) { + masks.hide(); + $('#maskinner img').remove(); + + if (!fromhash && window.history.pushState) { + window.history.pushState(undefined, 'i3 screenshots', '#'); + } + }; + + masks.click(function() { + endshow(false); + }); + var showmask = function() { + var winH = $(window).height(); + var maskHeight = $(document).height(); + var maskWidth = $(window).width(); + + var mask = $('#mask'); + mask.css({ 'width': maskWidth, 'height': maskHeight }).show(); + }; + + $('.shot img').click(function() { + showmask(); + + var full = $(this).parent().attr('href'); + var loading = $('#loading'); + loading.show(); + + loadimage(full, undefined, false); + + // TODO: also preload the next image? + + // don't follow the link + return false; + }); + + var imgright = function() { + var idx = $.inArray($('#maskinner img').attr('src'), images); + var next = images[idx+1]; + + if (next === undefined) { + //console.log('there is no next image'); + return false; + } + + //console.log('loading next one: ' + next); + // slide out the current image + var winW = $(window).width(); + $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() { + $(this).remove(); + }); + loadimage(next, 'left', false); + + // disable mousewheel handler during load (will be re-enabled after the animation) + $(window).unmousewheel(wheelhandler); + + return false; + }; + $('#imgright').click(imgright); + + var imgleft = function() { + var idx = $.inArray($('#maskinner img').attr('src'), images); + var prev = images[idx-1]; + + if (prev === undefined) { + //console.log('there is no next image'); + return false; + } + + //console.log('loading prev one: ' + prev); + // slide out the current image + var winW = $(window).width(); + $('#maskinner img').animate({ 'left': '+=' + winW }, 'fast', function() { + $(this).remove(); + }); + loadimage(prev, 'right', false); + + // disable mousewheel handler during load (will be re-enabled after the animation) + $(window).unmousewheel(wheelhandler); + + return false; + }; + $('#imgleft').click(imgleft); + + // setup key press handlers for the left/right arrow keys + var keydown = function(e) { + switch (e.keyCode) { + // left arrow + case 37: + imgleft(); + break; + // right arrow + case 39: + imgright(); + break; + // escape + case 27: + endshow(false); + break; + } + }; + + if ($.browser.mozilla) { + $(document).keypress(keydown); + } else { + $(document).keydown(keydown); + } + + if (location.hash.length > 0) { + var url = location.hash.substring(1); + showmask(); + loadimage(url, undefined, true); + } + + $(window).hashchange(function() { + if (location.hash.length === 0) { + endshow(true); + return; + } + var url = location.hash.substring(1); + if (url.length === 0) { + endshow(true); + } else { + showmask(); + loadimage(url, undefined, true); + } + }); + + }); +} diff --git a/js/gallery.min.js b/js/gallery.min.js new file mode 100644 index 0000000..f2f74fb --- /dev/null +++ b/js/gallery.min.js @@ -0,0 +1,14 @@ +/* + * jQuery hashchange event - v1.3 - 7/21/2010 + * http://benalman.com/projects/jquery-hashchange-plugin/ + * + * Copyright (c) 2010 "Cowboy" Ben Alman + * Dual licensed under the MIT and GPL licenses. + * http://benalman.com/about/license/ + */ +function initGallery(){ +(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('