diff --git a/pinry/static/css/lightbox.css b/pinry/static/css/lightbox.css index 74ddfa2..ec4cc71 100644 --- a/pinry/static/css/lightbox.css +++ b/pinry/static/css/lightbox.css @@ -12,21 +12,32 @@ position: absolute; left: 50%; border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; } .lightbox-data { background: white; } + .lightbox-data .description { + padding: 8px; + border-bottom: 1px solid #ddd; + font-family: "Georgia", "Times", "Times New Roman", Serif; + font-size: 16px; + } + .lightbox-data .avatar img { width: 40px; height: 40px; - padding: 5px; + margin: 5px; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; } .lightbox-data .text { margin-top: 3px; - font-size: 18px; font-weight: bold; } diff --git a/pinry/static/js/lightbox.js b/pinry/static/js/lightbox.js index 83e1267..9a7a2b5 100644 --- a/pinry/static/js/lightbox.js +++ b/pinry/static/js/lightbox.js @@ -1,4 +1,6 @@ $(window).load(function() { + var scrollLevel = 0; + window.lightbox = function(pins) { var links = pins.find('.lightbox'); @@ -7,16 +9,18 @@ $(window).load(function() { var html = template(boxData); $('body').append(html); + scrollLevel = $(window).scrollTop(); + $('#pins').css({ + 'margin-top': String(-scrollLevel)+'px', + 'position': 'fixed' + }); + $('.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()-300)+'px', - }); - var width = $(this).width(); $('.lightbox-wrapper').css({ - 'margin-top': String($(window).scrollTop()+100)+'px', - 'margin-left': '-'+String(width/2)+'px' + 'width': boxData.width, + 'margin-top': String(100)+'px', + 'margin-left': '-'+String(boxData.width/2)+'px' }); }); @@ -31,10 +35,18 @@ $(window).load(function() { image: $(this).attr('href'), gravatar: $(this).data('gravatar'), username: $(this).data('username'), - tags: $(this).data('tags').split(',') + 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(); }); diff --git a/pinry/templates/includes/lightbox.html b/pinry/templates/includes/lightbox.html index 1094232..06322b6 100644 --- a/pinry/templates/includes/lightbox.html +++ b/pinry/templates/includes/lightbox.html @@ -4,6 +4,11 @@