Lightbox effect for images

mediagoblin/static/css/lightbox.css

@@ -0,0 +1,21 @@
+body {
+    height: 100%;
+}
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    z-index: 50;
+    cursor: pointer;
+}
+.box {
+    position: absolute;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    left: -9999em;
+    z-index: 51;
+}

mediagoblin/static/js/lightbox.js

@@ -0,0 +1,70 @@
+$(document).ready(function() {
+    $(".lightbox").click(function() {
+        overlayLink = $(this).attr("href");  //Getting the link for the media
+        window.startOverlay(overlayLink);
+        return false;
+    });
+});
+
+function startOverlay(overlayLink) {
+
+    // Adding elements to the page
+    $("body")
+        .append('<div class="overlay"></div><div class="box"></div>')
+        .css({
+            "overflow-y": "hidden"
+        });
+
+    // To create the lightbox effect
+    $(".container").animate({
+        "opacity": "0.2"
+    }, 300, "linear");
+
+    var imgWidth = $(".box img").width();
+    var imgHeight = $(".box img").height();
+
+    //adding the image to the box
+
+    $(".box").html('<img height=100% width=100% src="' + overlayLink + '" alt="" />');
+    //Position
+    $(".box img").load(function() {
+        var imgWidth = $(".box img").width();
+        var imgHeight = $(".box img").height();
+        if (imgHeight > screen.height - 170) imgHeight = screen.height - 170;
+        if (imgWidth > screen.width - 300) imgWidth = screen.width - 300;
+        $(".box")
+            .css({
+                "position": "absolute",
+                "top": "50%",
+                "left": "50%",
+                "height": imgHeight + 10,
+                "width": imgWidth + 10,
+                "border": "5px solid white",
+                "margin-top": -(imgHeight / 2),
+                "margin-left": -(imgWidth / 2) //to position it in the middle
+            })
+            .animate({
+                "opacity": "1"
+            }, 400, "linear");
+
+        //To remove
+        window.closeOverlay();
+    });
+}
+
+function closeOverlay() {
+    // allow users to be able to close the lightbox
+    $(".overlay").click(function() {
+        $(".box, .overlay").animate({
+            "opacity": "0"
+        }, 200, "linear", function() {
+            $(".box, .overlay").remove();
+        });
+        $(".container").animate({
+            "opacity": "1"
+        }, 200, "linear");
+        $("body").css({
+            "overflow-y": "scroll"
+        });
+    });
+}

mediagoblin/templates/mediagoblin/user_pages/media.html

@@ -25,10 +25,14 @@
 {% block mediagoblin_head %}
 <!--[if lte IE 8]><link rel="stylesheet"
     href="{{ request.staticdirect('/extlib/leaflet/leaflet.ie.css') }}" /><![endif]-->
+
+ <link rel="stylesheet" type="text/css" href="{{ request.staticdirect('/css/lightbox.css') }}">
   <script type="text/javascript"
           src="{{ request.staticdirect('/js/comment_show.js') }}"></script>
   <script type="text/javascript"
           src="{{ request.staticdirect('/js/keyboard_navigation.js') }}"></script>
+  <script type="text/javascript"
+          src="{{ request.staticdirect('/js/lightbox.js') }}"></script>
 
   {% template_hook("location_head") %}
   {% template_hook("media_head") %}
@@ -57,7 +61,7 @@
          #}
         {% if media.media_files.has_key('medium') %}
           <a href="{{ request.app.public_store.file_url(
-                        media.media_files['original']) }}">
+                        media.media_files['original']) }}" class="lightbox">
             <img class="media_image"
                  src="{{ display_media }}"
                  alt="{% trans media_title=media.title -%}