Merge remote-tracking branch 'gsoc2016/Subtitle-1'

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/css/subtitles.css

@@ -0,0 +1,4 @@
+textarea#subtitle {
+	height: 500px;
+	border: 3px solid #cccccc;
+}

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"
+        });
+    });
+}