diff --git a/pinry/static/css/lightbox.css b/pinry/static/css/lightbox.css
index e69de29..9d01822 100644
--- a/pinry/static/css/lightbox.css
+++ b/pinry/static/css/lightbox.css
@@ -0,0 +1,12 @@
+.lightbox-background {
+ background: rgba(0, 0, 0, 0.7);
+ top: 0;
+ left: 0;
+ right: 0;
+ position: absolute;
+}
+
+ .lightbox-wrapper {
+ position: absolute;
+ left: 50%;
+ }
diff --git a/pinry/static/js/lightbox.css b/pinry/static/js/lightbox.css
deleted file mode 100644
index e69de29..0000000
diff --git a/pinry/static/js/lightbox.js b/pinry/static/js/lightbox.js
new file mode 100644
index 0000000..2370f3e
--- /dev/null
+++ b/pinry/static/js/lightbox.js
@@ -0,0 +1,38 @@
+$(window).load(function() {
+ window.lightbox = function(pins) {
+ var links = pins.find('.lightbox');
+
+ function createBox(imageUrl) {
+ var template = Handlebars.compile($('#lightbox-template').html());
+ var html = template({image: imageUrl});
+ $('body').append(html);
+
+ $('.lightbox-wrapper img').load(function() {
+ $('.lightbox-background').css('height', String($(document).height())+'px');
+ $(this).css({
+ 'max-width': String($(window).width()-200)+'px',
+ 'max-height': String($(window).height()-200)+'px',
+ 'margin-top': String($(window).scrollTop()+100)+'px'
+ });
+ var width = $(this).width();
+ $('.lightbox-wrapper').css({
+ 'margin-left': '-'+String(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($(this).attr('href'));
+ box.click(function() {
+ box.remove()
+ });
+ e.preventDefault();
+ });
+ }
+ }
+});
diff --git a/pinry/static/js/pinry.js b/pinry/static/js/pinry.js
index 8763837..df57e27 100644
--- a/pinry/static/js/pinry.js
+++ b/pinry/static/js/pinry.js
@@ -45,6 +45,7 @@ $(window).load(function() {
colHeights[sCol] += block.height()+(blockMargin);
}
+ lightbox(blocks);
$('.spinner').css('display', 'none');
blockContainer.css('height', colHeights.sort().slice(-1)[0]);
}
@@ -63,7 +64,6 @@ $(window).load(function() {
// Set which items are editable by the current user
for (var i=0; i < pins.objects.length; i++)
pins.objects[i].editable = (pins.objects[i].submitter.username == currentUser);
- console.log(pins.objects);
// Use the fetched pins as our context for our pins template
var template = Handlebars.compile($('#pins-template').html());
diff --git a/pinry/templates/core/base.html b/pinry/templates/core/base.html
index b9ca536..abf53a9 100644
--- a/pinry/templates/core/base.html
+++ b/pinry/templates/core/base.html
@@ -9,9 +9,9 @@
{% compress css %}
-
+
{% endcompress %}
@@ -58,9 +58,9 @@
{% compress js %}
-
+
{% endcompress %}