From 3f8a61a3b494b6907df6ebc2b5ca445a2c054374 Mon Sep 17 00:00:00 2001 From: Michael Stapelberg Date: Sat, 23 Jul 2011 14:43:25 +0200 Subject: [PATCH] Bugfix: immediately run our code, not in $(document).ready() Fixes gallery with Firefox 3.5 --- js/gallery.js | 391 +++++++++++++++++++++++++------------------------- 1 file changed, 194 insertions(+), 197 deletions(-) diff --git a/js/gallery.js b/js/gallery.js index e601b2e..8811860 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -2,244 +2,241 @@ // © 2011 Michael Stapelberg function initGallery() { - $(document).ready(function() { - $('.shot span').css('color', '#888'); + $('.shot span').css('color', '#888'); - $('#imgleft, #imgright').mouseover(function() { - $(this).css('opacity', 0.9); - }); + $('#imgleft, #imgright').mouseover(function() { + $(this).css('opacity', 0.9); + }); - $('#imgleft, #imgright').mouseout(function() { - $(this).css('opacity', 0.7); - }); + $('#imgleft, #imgright').mouseout(function() { + $(this).css('opacity', 0.7); + }); - $('.shot img').mouseover(function() { - $(this).parent().parent().children('span').css('color', 'white'); - }); + $('.shot img').mouseover(function() { + $(this).parent().parent().children('span').css('color', 'white'); + }); - $('.shot img').mouseout(function() { - $(this).parent().parent().children('span').css('color', '#888'); - }); + $('.shot img').mouseout(function() { + $(this).parent().parent().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'); - }); + // 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')); - }); + // 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) { - // if we are not in the slideshow mode, process the event as normal - if (!$('#mask').is(':visible')) { - return true; - } + var wheelhandler = function(event, 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; - } - }; + 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({ 'z-index': 21, '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(); + $(window).mousewheel(wheelhandler); - $('#bigimg').show(); + var loadimage = function(url, direction, fromhash) { + // now load the image + var img = new Image(); + img.src = url; - if (!fromhash && window.history.pushState) { - window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + 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 }; - - if (img.complete) { - loadcomplete(); - } else { - img.onload = loadcomplete; + 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; } - }; - - // clicking anywhere outside the image will bring you back to the page - var masks = $('#mask, #bigimg'); + 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({ 'z-index': 21, '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(); - var endshow = function(fromhash) { - masks.hide(); - $('#maskinner img').remove(); + $('#bigimg').show(); if (!fromhash && window.history.pushState) { - window.history.pushState(undefined, 'i3 screenshots', '#'); + window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url); } }; - masks.click(function() { - endshow(false); - }); - var showmask = function() { - var winH = $(window).height(); - var maskHeight = $(document).height(); - var maskWidth = $(window).width(); + if (img.complete) { + loadcomplete(); + } else { + img.onload = loadcomplete; + } + }; - var mask = $('#mask'); - mask.css({ 'width': maskWidth, 'height': maskHeight }).show(); - }; + // clicking anywhere outside the image will bring you back to the page + var masks = $('#mask, #bigimg'); - $('.shot img').click(function() { - showmask(); + var endshow = function(fromhash) { + masks.hide(); + $('#maskinner img').remove(); - var full = $(this).parent().attr('href'); - $('#loading').show(); + if (!fromhash && window.history.pushState) { + window.history.pushState(undefined, 'i3 screenshots', '#'); + } + }; - loadimage(full, undefined, false); + masks.click(function() { + endshow(false); + }); + var showmask = function() { + var winH = $(window).height(); + var maskHeight = $(document).height(); + var maskWidth = $(window).width(); - // TODO: also preload the next image? + var mask = $('#mask'); + mask.css({ 'width': maskWidth, 'height': maskHeight }).show(); + }; - // don't follow the link - return false; - }); + $('.shot img').click(function() { + showmask(); - var imgright = function() { - var idx = $.inArray($('#maskinner img').attr('src'), images); - var next = images[idx+1]; + var full = $(this).parent().attr('href'); + $('#loading').show(); - if (next === undefined) { - return false; - } + loadimage(full, undefined, false); - $('#imgright').css('opacity', 1.0).animate({ opacity: 0.7 }, 500); - // slide out the current image - var winW = $(window).width(); - $('#loading').show(); - $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() { - $(this).remove(); - }); - loadimage(next, 'left', false); +// TODO: also preload the next image? - // disable mousewheel handler during load (will be re-enabled after the animation) - $(window).unmousewheel(wheelhandler); + // 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) { return false; - }; - $('#imgright').click(imgright); + } - var imgleft = function() { - var idx = $.inArray($('#maskinner img').attr('src'), images); - var prev = images[idx-1]; + $('#imgright').css('opacity', 1.0).animate({ opacity: 0.7 }, 500); + // slide out the current image + var winW = $(window).width(); + $('#loading').show(); + $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() { + $(this).remove(); + }); + loadimage(next, 'left', false); - if (prev === undefined) { - return false; - } + // disable mousewheel handler during load (will be re-enabled after the animation) + $(window).unmousewheel(wheelhandler); - $('#imgleft').css('opacity', 1.0).animate({ opacity: 0.7 }, 500); - // slide out the current image - var winW = $(window).width(); - $('#maskinner img').animate({ 'left': '+=' + winW }, 'fast', function() { - $(this).remove(); - }); - loadimage(prev, 'right', false); + return false; + }; + $('#imgright').click(imgright); - // disable mousewheel handler during load (will be re-enabled after the animation) - $(window).unmousewheel(wheelhandler); + var imgleft = function() { + var idx = $.inArray($('#maskinner img').attr('src'), images); + var prev = images[idx-1]; + if (prev === undefined) { 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); + $('#imgleft').css('opacity', 1.0).animate({ opacity: 0.7 }, 500); + // 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); } - - $(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); - } - }); - }); } -- 2.39.5