mediagoblin/static/js/lightbox.js

   1 $(document).ready(function() {
   2     $(".lightbox").click(function() {
   3         overlayLink = $(this).attr("href");  //Getting the link for the media
   4         window.startOverlay(overlayLink);
   5         return false;
   6     });
   7 });
   8
   9 function startOverlay(overlayLink) {
  10
  11     // Adding elements to the page
  12     $("body")
  13         .append('<div class="overlay"></div><div class="box"></div>')
  14         .css({
  15             "overflow-y": "hidden"
  16         });
  17
  18     // To create the lightbox effect
  19     $(".container").animate({
  20         "opacity": "0.2"
  21     }, 300, "linear");
  22
  23     var imgWidth = $(".box img").width();
  24     var imgHeight = $(".box img").height();
  25
  26     //adding the image to the box
  27
  28     $(".box").html('<img height=100% width=100% src="' + overlayLink + '" alt="" />');
  29     //Position
  30     $(".box img").load(function() {
  31         var imgWidth = $(".box img").width();
  32         var imgHeight = $(".box img").height();
  33         if (imgHeight > screen.height - 170) imgHeight = screen.height - 170;
  34         if (imgWidth > screen.width - 300) imgWidth = screen.width - 300;
  35         $(".box")
  36             .css({
  37                 "position": "absolute",
  38                 "top": "50%",
  39                 "left": "50%",
  40                 "height": imgHeight + 10,
  41                 "width": imgWidth + 10,
  42                 "border": "5px solid white",
  43                 "margin-top": -(imgHeight / 2),
  44                 "margin-left": -(imgWidth / 2) //to position it in the middle
  45             })
  46             .animate({
  47                 "opacity": "1"
  48             }, 400, "linear");
  49
  50         //To remove
  51         window.closeOverlay();
  52     });
  53 }
  54
  55 function closeOverlay() {
  56     // allow users to be able to close the lightbox
  57     $(".overlay").click(function() {
  58         $(".box, .overlay").animate({
  59             "opacity": "0"
  60         }, 200, "linear", function() {
  61             $(".box, .overlay").remove();
  62         });
  63         $(".container").animate({
  64             "opacity": "1"
  65         }, 200, "linear");
  66         $("body").css({
  67             "overflow-y": "scroll"
  68         });
  69     });
  70 }