forked from krewenki/jquery-lightbox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·102 lines (83 loc) · 5.7 KB
/
index.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>jQuery Lightbox | Test Page</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.lightbox.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
base_url = document.location.href.substring(0, document.location.href.indexOf('index.html'), 0);
$(".lightbox").lightbox({
fitToScreen: true,
imageClickClose: false
});
$(".lightbox-2").lightbox({
fitToScreen: true,
scaleImages: true,
xScale: 1.2,
yScale: 1.2,
displayDownloadLink: true
});
$(".lightbox-json").lightbox({
fitToScreen: true,
jsonData: new Array(
{url: base_url + 'images/image-0.jpg', title: 'Image 1 loaded using JSON data' },
{url: base_url + 'images/image-1.jpg', title: 'Image 2 loaded using JSON data' },
{url: base_url + 'images/image-2.jpg', title: 'Image 3 loaded using JSON data' },
{url: base_url + 'images/image-3.jpg', title: 'Image 4 loaded using JSON data' }
),
loopImages: true,
imageClickClose: false,
disableNavbarLinks: true
});
});
</script>
<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
</style>
</head>
<body>
<h1><a href="http://krewenki.github.com/jquery-lightbox">jQuery Lightbox <em>v0.5</em></a></h1>
<p>Modified work by <a href="http://krewenki.github.com/">Warren Krewenki</a></p>
<p>Originally written by <a href="http://www.huddletogether.com">Lokesh Dhakar</a></p>
<h2>Example 1: Single Image</h2>
<a href="http://farm2.static.flickr.com/1257/1092054504_0857149719_d.jpg" class="lightbox" title="Photo by Warren Krewenki"><img src="http://farm2.static.flickr.com/1257/1092054504_0857149719_t_d.jpg" height="40" alt="" /></a>
<h2>Example 2: Series</h2>
<a href="http://farm2.static.flickr.com/1036/1092054380_6040129664_d.jpg" class="lightbox-2" rel="flowers" title="Photo by Warren Krewenki"><img src="http://farm2.static.flickr.com/1036/1092054380_6040129664_t_d.jpg" height="40" alt="" /></a>
<a href="http://farm2.static.flickr.com/1257/1092054504_0857149719_d.jpg" class="lightbox-2" rel="flowers" title="Photo by Warren Krewenki"><img src="http://farm2.static.flickr.com/1257/1092054504_0857149719_t_d.jpg" height="40" alt="" /></a>
<a href="http://farm4.static.flickr.com/3130/2901336771_ecb32f7462_b_d.jpg" class="lightbox-2" rel="flowers" title="Photo by Warren Krewenki"><img src="http://farm4.static.flickr.com/3130/2901336771_ecb32f7462_t_d.jpg" height="40" alt="" /></a>
<a href="http://farm4.static.flickr.com/3487/3294395073_55c3e7583e_o_d.jpg" class="lightbox-2" rel="flowers" title="Bedford Basin by Warren Krewenki"><img src="http://farm4.static.flickr.com/3487/3294395073_1051c3daa1_t_d.jpg" height="40" alt="" /></a>
<h2>Example 3: Images loaded using jsonData parameter (thumbnails are static)</h2>
<a href="http://farm4.static.flickr.com/3130/2901336771_ecb32f7462_b_d.jpg" class="lightbox-json" title="Photo by Warren Krewenki"><img src="http://farm4.static.flickr.com/3130/2901336771_ecb32f7462_t_d.jpg" height="40" alt="" /></a>
<a href="http://farm4.static.flickr.com/3487/3294395073_55c3e7583e_o_d.jpg" class="lightbox-json" title="Photo by Warren Krewenki"><img src="http://farm4.static.flickr.com/3487/3294395073_1051c3daa1_t_d.jpg" height="40" alt="" /></a>
<h2>How to Use:</h2>
<h3>Part 1 - Setup</h3>
<ol>
<li>jQuery lightbox v0.5 uses the jQuery Library. You will need to include these two Javascript files in your header.
<pre><code><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="lightbox.js"></script>
</code></pre>
</li>
<li>Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<pre><code><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</code></pre>
</li>
<li>Check the CSS and make sure the referenced <code>prevlabel.gif</code> and <code>nextlabel.gif</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>closelabel.gif</code> files as referenced near the top of the <code>lightbox.js</code> file are in the right location.</li>
</ol>
<h3>Part 2 - Activate</h3>
<ol>
<li>Add a <code>class="lightbox"</code> attribute to any link tag to activate the lightbox. For example:
<pre><code><a href="images/image-1.jpg" class="lightbox" title="my caption">image #1</a>
</code></pre>
<em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption. </li>
<li>If you have a set of related images that you would like to group, follow step one but additionally include a group name in the rel attribute. For example:
<pre><code><a href="images/image-1.jpg" class="lightbox" rel="roadtrip">image #1</a>
<a href="images/image-2.jpg" class="lightbox" rel="roadtrip">image #2</a>
<a href="images/image-3.jpg" class="lightbox" rel="roadtrip">image #3</a>
</code></pre>
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li>
</ol>
</body>
</html>