Fix infinite scrolling and add loading styles

robhardwick · Dec 5, 2011 · 10b7dd9 · 10b7dd9
1 parent 6a3e6a1
commit 10b7dd9
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 64 deletions.
diff --git a/static/css/giflord.css b/static/css/giflord.css
diff --git a/static/js/giflord.js b/static/js/giflord.js
@@ -1,81 +1,83 @@
 (function($) {
 
-    function getPos($win, $link, type) {
-        var win = (type == 'width') ? $win.width() : $win.height();
-        return parseInt((win / 2) - ((parseInt($link.data(type)) + 40) / 2), 10);
-    }
+    $(document).ready(function() {
 
-    function loadImage($win, $overlay, $link) {
+        var $loading = $('.loading').fadeIn('fast'),
+            $win = $(window),
+            $main = $('#main');
 
-        var $gif = $overlay.children('img')
-                .hide()
-                .attr('src', $link.attr('href'));
+        function getPos($link, type) {
+            var win = (type == 'width') ? $win.width() : $win.height();
+            return parseInt((win / 2) - ((parseInt($link.data(type)) + 40) / 2), 10);
+        }
 
-        $.merge($gif, $overlay)
-            .animate({
-                width: $link.data('width') + 'px',
-                height: $link.data('height') + 'px',
-                left: getPos($win, $link, 'width'),
-                top: getPos($win, $link, 'height')
-            });
+        function loadImage($overlay, $link) {
 
-        $gif.imagesLoaded(function() {
-                $gif.fadeIn('fast');
-            });
+            var $gif = $overlay.children('img')
+                    .hide()
+                    .attr('src', $link.attr('href'));
 
-    }
+            $.merge($gif, $overlay)
+                .animate({
+                    width: $link.data('width') + 'px',
+                    height: $link.data('height') + 'px',
+                    left: getPos($link, 'width'),
+                    top: getPos($link, 'height')
+                });
 
-    $(document).ready(function() {
+            $gif.imagesLoaded(function() {
+                    $gif.fadeIn('fast');
+                });
 
-        var $loading = $('.loading').fadeIn('fast'),
-            $win = $(window),
-            $main = $('#main');
+        }
 
-        var $items = $main.find('a')
-            .click(function() {
-
-                var $link = $(this),
-                    $overlay = $('<div/>')
-                        .addClass('overlay')
-                        .css({
-                            position: 'absolute',
-                            width: $link.data('width')+'px',
-                            height: $link.data('height')+'px'
-                        })
-                        .appendTo('body')
-                        .overlay({
-                            load: true,
-                            left: getPos($win, $link, 'width'),
-                            top: getPos($win, $link, 'height'),
-                            mask: {
-                                color: '#000',
-                                opacity: 0.4,
-                                loadSpeed: 200
-                            },
-                            onBeforeLoad: function(e) {
-                                $link.css('boxShadow', 'none');
-                            },
-                            onClose: function(e) {
-                                $overlay.remove();
-                            }
-                        });
+        function thumbClick(link) {
 
-                $('<img/>')
-                    .attr('src', $link.attr('href'))
-                    .attr('width', $link.data('width'))
-                    .attr('height', $link.data('height'))
-                    .click(function() {
-                        $link = $link.parent().next().children('a');
-                        if ($link.size() == 0) {
-                            $link = $items.filter(':first');
-                        }
-                        loadImage($win, $overlay, $link);
+            var $link = $(link),
+                $overlay = $('<div/>')
+                    .addClass('overlay')
+                    .css({
+                        position: 'absolute',
+                        width: $link.data('width')+'px',
+                        height: $link.data('height')+'px'
                     })
-                    .appendTo($overlay);
+                    .appendTo('body')
+                    .overlay({
+                        load: true,
+                        left: getPos($link, 'width'),
+                        top: getPos($link, 'height'),
+                        mask: {
+                            color: '#000',
+                            opacity: 0.4,
+                            loadSpeed: 200
+                        },
+                        onBeforeLoad: function(e) {
+                            $link.css('boxShadow', 'none');
+                        },
+                        onClose: function(e) {
+                            $overlay.remove();
+                        }
+                    });
+
+            $('<img/>')
+                .attr('src', $link.attr('href'))
+                .attr('width', $link.data('width'))
+                .attr('height', $link.data('height'))
+                .click(function() {
+                    $link = $link.parent().next().children('a');
+                    if ($link.size() == 0) {
+                        $link = $items.filter(':first');
+                    }
+                    loadImage($overlay, $link);
+                })
+                .appendTo($overlay);
+
+            return false;
 
-                return false;
+        }
 
-            });
+        var $items = $main.find('a')
+            .click(function() { return thumbClick(this); });
 
         $main.imagesLoaded(function($images) {
             $main
@@ -87,7 +89,37 @@
                 .fadeOut('fast', function() {
                     $main.find('li')
                         .fadeIn();
+                    $('#main').infinitescroll({
+                        navSelector: '.next',
+                        nextSelector: '.next',
+                        itemSelector: '#main li',
+                        bufferPx: 100,
+                        loading: {
+                            finishedMsg: null,
+                            img: '/static/img/loading.gif',
+                            msg: null,
+                            msgText: '',
+                        },
+                        pathParse: {
+                            join: function(page) {
+                                return '/' + page
+                            }
+                        }
+                    },
+                    function(items) {
+                        var $items = $(items)
+                            .addClass('show')
+                            .hide();
+                        $items.find('a')
+                            .click(function() { return thumbClick(this); });
+                        $items.imagesLoaded(function() {
+                            $main.masonry('appended', $items, true);
+                            $items.fadeIn('fast');
+                        });
+                    });
+
                 });
+
         });
 
     });