/
jquery-plugin.html
131 lines (76 loc) · 4.44 KB
/
jquery-plugin.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html><html>
<head>
<title>PhotoSwipe</title>
<meta name="author" content="Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="../photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../lib/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="../code-photoswipe-%%version%%.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Gallery a").photoSwipe();
});
/*
This example shows how to set up PhotoSwipe using the jQuery plugin.
It does not use jQuery as the engine so is still running on the
optimised version for mobile devices, WebKit browsers and Mozilla
To pass your own settings:
$("#Gallery a").photoSwipe({
loop: false
});
*/
</script>
</head>
<body>
<div id="Header">
<a href="http://www.codecomputerlove.com"><img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" /></a>
</div>
<div id="MainContent">
<div class="page-content">
<h1>PhotoSwipe</h1>
</div>
<div id="Gallery">
<div class="gallery-row">
<div class="gallery-item"><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></div>
<div class="gallery-item"><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" /></a></div>
<div class="gallery-item"><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" /></a></div>
<div class="gallery-item"><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" /></a></div>
<div class="gallery-item"><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" /></a></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" /></a></div>
<div class="gallery-item"><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" /></a></div>
<div class="gallery-item"><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" /></a></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" /></a></div>
<div class="gallery-item"><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" /></a></div>
<div class="gallery-item"><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" /></a></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" /></a></div>
<div class="gallery-item"><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" /></a></div>
<div class="gallery-item"><a href="images/full/015.jpg"><img src="images/thumb/018.jpg" alt="Image 015" /></a></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><a href="images/full/016.jpg"><img src="images/thumb/016.jpg" alt="Image 016" /></a></div>
<div class="gallery-item"><a href="images/full/017.jpg"><img src="images/thumb/017.jpg" alt="Image 017" /></a></div>
<div class="gallery-item"><a href="images/full/018.jpg"><img src="images/thumb/015.jpg" alt="Image 018" /></a></div>
</div>
</div>
</div>
<div id="Footer">
<p><small>© 2011 Code Computerlove Ltd - new media agency / digital marketing agency</small></p>
<div id="SocialLinks">
<a href="http://blog.codecomputerlove.com/"><img src="images/blogicon.png" width="32" height="32" alt="Blog" /></a>
<a href="http://www.twitter.com/computerlovers"><img src="images/twittericon.png" width="32" height="32" alt="Twitter" /></a>
<a href="http://www.facebook.com/CodeComputerlove"><img src="images/facebookicon.png" width="32" height="32" alt="Facebook" /></a>
<a href="http://www.flickr.com/photos/codecomputerlove"><img src="images/flickricon.png" width="32" height="32" alt="Flickr" /></a>
</div>
</body>
</html>