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