1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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"
});
});
}
|
