Some lightbox improvements

pinry/static/css/lightbox.css

@@ -4,9 +4,32 @@
     left: 0;
     right: 0;
     position: absolute;
+    z-index: 9001;
 }
 
     .lightbox-wrapper {
+        border: 1px solid #bbb;
         position: absolute;
         left: 50%;
     }
+
+        .lightbox-data {
+            background: white;
+        }
+
+            .lightbox-data .avatar img {
+                width: 40px;
+                height: 40px;
+                padding: 5px;
+            }
+
+            .lightbox-data .text {
+                margin-top: 3px;
+                font-size: 18px;
+                font-weight: bold;
+            }
+
+            .lightbox-data .text .dim {
+                color: #999;
+                font-size: 14px;
+            }

pinry/static/js/lightbox.js

@@ -2,20 +2,20 @@ $(window).load(function() {
     window.lightbox = function(pins) {
         var links = pins.find('.lightbox');
 
-        function createBox(imageUrl) {
+        function createBox(boxData) {
             var template = Handlebars.compile($('#lightbox-template').html());
-            var html = template({image: imageUrl});
+            var html = template(boxData);
             $('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'
+                    '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'
                 });
             });
@@ -27,7 +27,12 @@ $(window).load(function() {
             link = links.eq(i);
             link.off('click');
             link.click(function(e) {
-                var box = createBox($(this).attr('href'));
+                var box = createBox({
+                    image: $(this).attr('href'),
+                    gravatar: $(this).data('gravatar'),
+                    username: $(this).data('username'),
+                    tags: $(this).data('tags').split(',')
+                });
                 box.click(function() {
                     box.remove()
                 });

pinry/templates/pins/recent_pins.html

@@ -18,6 +18,20 @@
         <script id="lightbox-template" type="text/x-handlebars-template">
             <div class="lightbox-background">
                 <div class="lightbox-wrapper">
+                    <div class="lightbox-data clearfix">
+                        <div class="avatar pull-left">
+                            <img src="http://gravatar.com/avatar/{{gravatar}}.jpg">
+                        </div>
+                        <div class="text pull-left">
+                            <span class="dim">pinned by</span> {{username}}
+                            {{#if tags}}
+                                <br /><span class="dim">in</span>
+                            {{#each tags}}
+                                <span class="tag label">{{this}}</span>
+                            {{/each}}
+                            {{/if}}
+                        </div>
+                    </div>
                     <img src="{{image}}" />
                 </div>
             </div>
@@ -33,7 +47,7 @@
                         </div>
                     </div>
                 {{/if}}
-                <a href="{{image}}" class="lightbox">
+                <a href="{{image}}" class="lightbox" data-username="{{submitter.username}}" data-tags="{{tags}}" data-gravatar="{{submitter.gravatar}}">
                     <img src="{{thumbnail}}" />
                 </a>
                 {{#if description}}