-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo6.html
112 lines (107 loc) · 4.55 KB
/
demo6.html
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<title>Demo 6: Using jQuery Slider as a Lightbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="6/thumbnail-slider.css" rel="stylesheet" />
<script src="6/thumbnail-slider.js" type="text/javascript"></script>
<style>
body {font: normal 0.9em Arial;color:#ddd;background:#333;}
header {display:block; font-size:1.2em;margin-bottom:100px;}
header a, header span {
display: inline-block;
padding: 4px 8px;
margin-right: 10px;
border: 2px solid #000;
background: #DDD;
color: #000;
text-decoration: none;
text-align: center;
height: 20px;
}
header span {background:white;}
a {color:#7fa9fe;}
</style>
</head>
<body>
<!--start-->
<div style="padding:100px 0;background:#333;">
<div id="thumbnail-slider" style="display:none;">
<div class="inner">
<ul>
<li>
<a class="thumb" href="img/1.jpg"></a>
</li>
<li>
<a class="thumb" href="img/2.jpg"></a>
</li>
<li>
<a class="thumb" href="img/3.jpg"></a>
</li>
<li>
<a class="thumb" href="img/4.jpg"></a>
</li>
<li>
<a class="thumb" href="img/5.jpg"></a>
</li>
<li>
<a class="thumb" href="img/6.jpg"></a>
</li>
<li>
<a class="thumb" href="img/7.jpg"></a>
</li>
<li>
<a class="thumb" href="img/8.jpg"></a>
</li>
<li>
<a class="thumb" href="img/9.jpg"></a>
</li>
</ul>
</div>
<div id="closeBtn">CLOSE</div>
</div>
<ul id="myGallery">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
<li><img src="img/8.jpg" /></li>
<li><img src="img/9.jpg" /></li>
</ul>
<div style="clear:both;"></div>
<script>
//Note: this script should be placed at the bottom of the page, or after the slider markup. It cannot be placed in the head section of the page.
var thumbSldr = document.getElementById("thumbnail-slider");
var closeBtn = document.getElementById("closeBtn");
var galleryImgs = document.getElementById("myGallery").getElementsByTagName("li");
for (var i = 0; i < galleryImgs.length; i++) {
galleryImgs[i].index = i;
galleryImgs[i].onclick = function (e) {
var li = this;
thumbSldr.style.display = "block";
mcThumbnailSlider.init(li.index);
};
}
thumbSldr.onclick = closeBtn.onclick = function (e) {
//This event will be triggered only when clicking the area outside the thumbs or clicking the CLOSE button
thumbSldr.style.display = "none";
};
</script>
</div>
<!--end-->
<div style="max-width:700px;margin:0 auto 80px;background:#333;">
<header><a href="demo1.html">Demo 1</a> <a href="demo2.html">Demo 2</a> <a href="demo3.html">Demo 3</a> <a href="demo4.html">Demo 4</a> <a href="demo5.html">Demo 5</a> <span>Demo 6</span></header>
<h1>Demo 6: Using jQuery Slider as a Lightbox</h1>
<p> </p>
<p>
Clicking the image gallery will pop up the jQuery slider as a lightbox to show the image details.
</p>
<p>We added a script into the page that will hide the jQuery Slider lightbox by default. It will display when the the gallery images are clicked.</p>
<p>Please visit <a href="http://www.menucool.com/slider/jquery-slider-lightbox">Demo 6: Using jQuery Slider as a Lightbox</a> for detailed instructions, or
visit the <a href="http://www.menucool.com/jquery-slider">Full documentation of the image slider</a>.</p>
</div>
</body>
</html>