1 files changed, 70 insertions, 0 deletions
diff --git a/mediagoblin/static/js/lightbox.js b/mediagoblin/static/js/lightbox.js
new file mode 100644
index 00000000..8d7bf31f
--- /dev/null
+++ b/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"
+        });
+    });
+}