Greatly improved lightbox view, much cleaner and smoother

pinry/static/css/lightbox.css

@@ -5,6 +5,7 @@
     right: 0;
     position: absolute;
     z-index: 9001;
+    display: none;
 }
 
     .lightbox-wrapper {
@@ -14,6 +15,15 @@
         border-radius: 3px;
         -moz-border-radius: 3px;
         -webkit-border-radius: 3px;
+        background: #eee;
+        background-image: url("../img/loader.gif");
+        background-repeat: no-repeat;
+        background-position: center center;
+        margin-bottom: 100px;
+    }
+
+    .lightbox-wrapper img {
+        display: none;
     }
 
         .lightbox-data {
@@ -28,6 +38,7 @@
             }
 
             .lightbox-data .avatar img {
+                display: block;
                 width: 40px;
                 height: 40px;
                 margin: 5px;

pinry/static/js/helpers.js

@@ -0,0 +1,22 @@
+/**
+ * Helpers for Pinry
+ * Descrip: A hodgepodge of useful things to help clean up Pinry's JavaScript.
+ * Authors: Pinry Contributors
+ * Updated: Feb 26th, 2013
+ * Require: jQuery
+ */
+
+
+function renderTemplate(templateId, context) {
+    var template = Handlebars.compile($(templateId).html());
+    return template(context);
+}
+
+
+function cleanTags(tags) {
+    if (typeof tags === 'string') {
+        tags = tags.split(',');
+        for (var i in tags) tags[i] = tags[i].trim();
+    }
+    return tags
+}

pinry/static/js/lightbox.js

@@ -1,55 +1,83 @@
+/**
+ * Lightbox for Pinry
+ * Descrip: A lightbox plugin for pinry so that I don't have to rely on some of
+ *          the massive code bases of other lightboxes, this one uses data
+ *          fields to acquire the info we need and dynamically loads comments.
+ *          It also has a nice parallax view mode where the top scrolls and the
+ *          background stays stationary.
+ * Authors: Pinry Contributors
+ * Updated: Feb 26th, 2013
+ * Require: jQuery, Pinry JavaScript Helpers
+ */
+
+
 $(window).load(function() {
-    var scrollLevel = 0;
-
-    window.lightbox = function(pins) {
-        var links = pins.find('.lightbox');
-
-        function createBox(boxData) {
-            var template = Handlebars.compile($('#lightbox-template').html());
-            var html = template(boxData);
-            $('body').append(html);
-
-            scrollLevel = $(window).scrollTop();
+    // Start Helper Functions
+    function freezeScroll(freeze) {
+        freeze = typeof freeze !== 'undefined' ? freeze : true;
+        if (freeze) {
+            $('body').data('scroll-level', $(window).scrollTop());
             $('#pins').css({
-                'margin-top': String(-scrollLevel)+'px',
-                'position': 'fixed'
+                'position': 'fixed',
+                'margin-top': -$('body').data('scroll-level')
             });
-
-            $('.lightbox-wrapper img').load(function() {
-                $('.lightbox-background').css('height', String($(document).height())+'px');
-                $('.lightbox-wrapper').css({
-                    'width': boxData.width,
-                    'margin-top': String(100)+'px',
-                    'margin-left': '-'+String(boxData.width/2)+'px'
-                });
-            });
-
-            return $('.lightbox-background');
-        }
-
-        for (var i=0; i < links.length; i++) {
-            link = links.eq(i);
-            link.off('click');
-            link.click(function(e) {
-                var box = createBox({
-                    image: $(this).attr('href'),
-                    gravatar: $(this).data('gravatar'),
-                    username: $(this).data('username'),
-                    description: $(this).data('description'),
-                    tags: $(this).data('tags').split(','),
-                    width: $(this).data('width'),
-                    height: $(this).data('height')
-                });
-                box.click(function() {
-                    box.remove()
-                    $('#pins').css({
-                        'position': 'static',
-                        'margin-top': 0
-                    });
-                    $(window).scrollTop(scrollLevel);
-                });
-                e.preventDefault();
+            $(window).scrollTop(0);
+        } else {
+            $('#pins').css({
+                'position': 'static',
+                'margin-top': 0
             });
+            $(window).scrollTop($('body').data('scroll-level'));
         }
     }
+
+    function getLightboxData(link) {
+        var data = link.data();
+        data.tags = cleanTags(data.tags);
+        data.image = link.attr('href');
+        return data;
+    }
+    // End Helper Functions
+
+
+    // Start View Functions
+    function createBox(context) {
+        freezeScroll();
+        $('body').append(renderTemplate('#lightbox-template', context));
+        var box = $('.lightbox-background');
+        box.css('height', $(document).height());
+        $('.lightbox-image-wrapper').css('height', context.height);
+        box.fadeIn(200);
+        $('.lightbox-image').load(function() {
+            $(this).fadeIn(200);
+        });
+        $('.lightbox-wrapper').css({
+            'width': context.width,
+            'margin-top': 100,
+            'margin-left': -context.width/2
+        });
+
+        box.click(function() {
+            $(this).fadeOut(200);
+            setTimeout(function() {
+                box.remove();
+            }, 200);
+            freezeScroll(false);
+        });
+    }
+    // End View Functions
+
+
+    // Start Global Init Function
+    window.lightbox = function() {
+        var links = $('body').find('.lightbox');
+        return links.each(function() {
+            $(this).off('click');
+            $(this).click(function(e) {
+                createBox(getLightboxData($(this)));
+                e.preventDefault();
+            });
+        });
+    }
+    // End Global Init Function
 });

pinry/static/js/pinry.js

@@ -44,7 +44,6 @@ $(window).load(function() {
             colHeights[sCol] += block.height()+(blockMargin);
         }
 
-        lightbox(blocks);
         $('.spinner').css('display', 'none');
         blockContainer.css('height', colHeights.sort().slice(-1)[0]);
     }
@@ -77,6 +76,7 @@ $(window).load(function() {
             $('#pins').ajaxStop(function() {
                 $('img').load(function() {
                     tileLayout();
+                    lightbox();
                 });
             });
 
@@ -93,6 +93,7 @@ $(window).load(function() {
     // If our window gets resized keep the tiles looking clean and in our window
     $(window).resize(function() {
         tileLayout();
+        lightbox();
     })
 
     // If we scroll to the bottom of the document load more pins

pinry/templates/includes/bookmarklet_link.html

@@ -1 +1 @@
-<a id="bookmarklet" href="javascript:void((function(d){var s=d.createElement('script');s.id='pinry-bookmarklet';s.src='http://{{ request.get_host }}/static/js/bookmarklet.js?'+Math.random()*10000000;d.body.appendChild(s)})(document));">Bookmarklet</a>
+<a id="bookmarklet" href="javascript:void((function(d){var s=d.createElement('script');s.id='pinry-bookmarklet';s.src='http://{{ request.get_host }}/static/js/bookmarklet.js?'+Math.random()*10000000000000000;d.body.appendChild(s)})(document));">Bookmarklet</a>

pinry/templates/includes/lightbox.html

@@ -2,7 +2,9 @@
     <script id="lightbox-template" type="text/x-handlebars-template">
         <div class="lightbox-background">
             <div class="lightbox-wrapper">
-                <img src="{{image}}" />
+                <div class="lightbox-image-wrapper">
+                    <img class="lightbox-image" src="{{image}}" />
+                </div>
                 <div class="lightbox-data clearfix">
                 {{#if description}}
                     <div class="description">