diff --git a/pinry/static/css/lightbox.css b/pinry/static/css/lightbox.css
index ec4cc71..33bdea6 100644
--- a/pinry/static/css/lightbox.css
+++ b/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;
diff --git a/pinry/static/js/helpers.js b/pinry/static/js/helpers.js
index e69de29..0989708 100644
--- a/pinry/static/js/helpers.js
+++ b/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
+}
diff --git a/pinry/static/js/lightbox.js b/pinry/static/js/lightbox.js
index 9a7a2b5..39f030d 100644
--- a/pinry/static/js/lightbox.js
+++ b/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
});
diff --git a/pinry/static/js/pinry.js b/pinry/static/js/pinry.js
index 4f89e07..5e6beee 100644
--- a/pinry/static/js/pinry.js
+++ b/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
diff --git a/pinry/templates/includes/bookmarklet_link.html b/pinry/templates/includes/bookmarklet_link.html
index 2659b9f..3b64e3d 100644
--- a/pinry/templates/includes/bookmarklet_link.html
+++ b/pinry/templates/includes/bookmarklet_link.html
@@ -1 +1 @@
-Bookmarklet
+Bookmarklet
diff --git a/pinry/templates/includes/lightbox.html b/pinry/templates/includes/lightbox.html
index 06322b6..eca197d 100644
--- a/pinry/templates/includes/lightbox.html
+++ b/pinry/templates/includes/lightbox.html
@@ -2,7 +2,9 @@