From: Michael Stapelberg <michael@stapelberg.de>
Date: Sat, 23 Jul 2011 12:43:25 +0000 (+0200)
Subject: Bugfix: immediately run our code, not in $(document).ready()
X-Git-Url: https://git.sur5r.net/?a=commitdiff_plain;h=3f8a61a3b494b6907df6ebc2b5ca445a2c054374;p=i3%2Fi3.github.io

Bugfix: immediately run our code, not in $(document).ready()

Fixes gallery with Firefox 3.5
---

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 = $('<img>');
-                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 = $('<img>');
+            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);
-            }
-        });
-
     });
 }