Improvements to lightbox to get a parallax mode

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;
             }
 

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',
+                    'width': boxData.width,
-                    'margin-left': '-'+String(width/2)+'px'
+                    '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();
             });

pinry/templates/includes/lightbox.html

@@ -4,6 +4,11 @@
             <div class="lightbox-wrapper">
                 <img src="{{image}}" />
                 <div class="lightbox-data clearfix">
+                {{#if description}}
+                    <div class="description">
+                        {{description}}
+                    </div>
+                {{/if}}
                     <div class="avatar pull-left">
                         <img src="http://gravatar.com/avatar/{{gravatar}}.jpg">
                     </div>
@@ -12,7 +17,7 @@
                         {{#if tags}}
                             <br /><span class="dim">in</span>
                         {{#each tags}}
-                            <span class="tag label">{{this}}</span>
+                            <span class="tag"><a href="/pins/tag/{{this}}/">{{this}}</a></span>
                         {{/each}}
                         {{/if}}
                     </div>

pinry/templates/includes/pins.html

@@ -9,7 +9,14 @@
                     </div>
                 </div>
             {{/if}}
-            <a href="{{image.standard.image}}" class="lightbox" data-username="{{submitter.username}}" data-tags="{{tags}}" data-gravatar="{{submitter.gravatar}}">
+            <a href="{{image.standard.image}}"
+               class="lightbox"
+               data-username="{{submitter.username}}"
+               data-tags="{{tags}}"
+               data-gravatar="{{submitter.gravatar}}"
+               data-description="{{description}}"
+               data-width="{{image.standard.width}}"
+               data-height="{{image.standard.height}}">
                 <img src="{{image.thumbnail.image}}" />
             </a>
             {{#if description}}