-
Notifications
You must be signed in to change notification settings - Fork 77
/
demo.html
186 lines (160 loc) · 8.94 KB
/
demo.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap Photo Gallery Demo</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="jquery.bsPhotoGallery.css" rel="stylesheet">
<script src="jquery.bsPhotoGallery.js"></script>
</script>
<script>
$(document).ready(function(){
$('ul.first').bsPhotoGallery({
"classes" : "col-xl-3 col-lg-2 col-md-4 col-sm-4",
"hasModal" : true,
"shortText" : false
});
});
</script>
</head>
<style>
/**************STYLES ONLY FOR DEMO PAGE**************/
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
background:#ebebeb;
}
</style>
<body>
<div class="container">
<div class="row" style="text-align:center; border-bottom:1px dashed #ccc; padding:30px 0 20px 0; margin-bottom:40px;">
<div class="col-lg-12">
<h3 style="font-family:'Bree Serif', arial; font-weight:bold; font-size:30px;">
<a style="text-decoration:none; color:#666;" href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Bootstrap Photo Gallery jQuery plugin <span style="color:red;">Demo</span></a>
</h3>
<p>Resize your browser and watch the gallery adapt to the view port size. Clicking on an image will activate the Modal. Click <strong><a style="color:red" href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Here</a></strong> to go back to the tutorial</p>
</div>
</div>
<ul class="row first">
<li>
<img alt="Rocking the night away" src="http://demo.michaelsoriano.com/images/photodune-174908-rocking-the-night-away-xs.jpg">
<p>Consectetur adipiscing elit</p>
</li>
<li>
<img alt="Yellow sign" src="http://demo.michaelsoriano.com/images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
<p>Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Colors" src="http://demo.michaelsoriano.com/images/photodune-460760-colors-xs.jpg">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</li>
<li>
<img alt="Retro party" src="http://demo.michaelsoriano.com/images/photodune-461673-retro-party-xs.jpg">
<p>Lorem, do eiusmod tempor incid Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Technology soup" src="http://demo.michaelsoriano.com/images/photodune-514834-touchscreen-technology-xs.jpg">
<p>Do eiusmod tempor</p>
</li>
<li>
<img alt="Legal docs" src="http://demo.michaelsoriano.com/images/photodune-916206-legal-xs.jpg" data-bsp-large-src="http://demo.michaelsoriano.com/images/photodune-916206-legal-large.jpg">
<p>Eiusmod tempor enim ad minim veniam</p>
</li>
<li>
<img alt="Nature shot" src="http://demo.michaelsoriano.com/images/photodune-1062948-nature-xs.jpg">
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Kid with camera" src="http://demo.michaelsoriano.com/images/photodune-1471528-insant-camera-kid-xs.jpg" data-bsp-large-src="http://demo.michaelsoriano.com/images/photodune-1471528-insant-camera-kid-large.jpg">
<p>Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Relax and Chill" src="http://demo.michaelsoriano.com/images/photodune-2255072-relaxed-man-xs.jpg">
<p>Eiusmod tempor enim ad minim veniam</p>
</li>
<li>
<img alt="Cool colors" src="http://demo.michaelsoriano.com/images/photodune-2360379-colors-xs.jpg">
<p>Consectetur adipiscing elit</p>
</li>
<li>
<img alt="Jump over" src="http://demo.michaelsoriano.com/images/photodune-2360571-jump-xs.jpg">
<p>Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Culture business" src="http://demo.michaelsoriano.com/images/photodune-2361384-culture-for-business-xs.jpg">
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Spaghetti bitch" src="http://demo.michaelsoriano.com/images/photodune-2441670-spaghetti-with-tuna-fish-and-parsley-s.jpg">
<p>Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Budget this" src="http://demo.michaelsoriano.com/images/photodune-2943363-budget-xs.jpg">
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Street art" src="http://demo.michaelsoriano.com/images/photodune-3444921-street-art-xs.jpg">
<p>Consectetur adipiscing elit, re magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Insurance and stuff" src="http://demo.michaelsoriano.com/images/photodune-3552322-insurance-xs.jpg">
<p>Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Food Explosion" src="http://demo.michaelsoriano.com/images/photodune-3807845-food-s.jpg">
<p>Eiusmod tempor enim ad minim veniam</p>
</li>
<li>
<img alt="Office worker sad" src="http://demo.michaelsoriano.com/images/photodune-3835655-down-office-worker-xs.jpg">
<p>Ut enim ad minim veniam</p>
</li>
<li>
<img alt="" src="http://demo.michaelsoriano.com/images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
<p>Do eiusmod tempor</p>
</li>
<li>
<img alt="Health" src="http://demo.michaelsoriano.com/images/photodune-5771958-health-xs.jpg">
<p>Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Constant consecutuir" src="http://demo.michaelsoriano.com/images/photodune-268693-businesswoman-using-laptop-outdoors-xs.jpg"><!--no alt tag-->
<p>Consectetur adipiscing elit, re magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Search code" src="http://demo.michaelsoriano.com/images/photodune-352207-search-of-code-s.jpg">
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Pountac" src="http://demo.michaelsoriano.com/images/photodune-247190-secret-email-xs.jpg"><!--no alt tag, no text-->
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</li>
<li>
<img alt="Budget again" src="http://demo.michaelsoriano.com/images/photodune-2943363-budget-xs.jpg">
<p>Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Some alt tag" src="http://demo.michaelsoriano.com/images/photodune-3444921-street-art-xs.jpg"><!--no alt-->
<p>Consectetur adipiscing elit, re magna aliqua. Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Insurance boy" src="http://demo.michaelsoriano.com/images/photodune-3552322-insurance-xs.jpg">
<p>Ut enim ad minim veniam</p>
</li>
<li>
<img alt="Food service" src="http://demo.michaelsoriano.com/images/photodune-3807845-food-s.jpg">
<p>Eiusmod tempor enim ad minim veniam</p>
</li>
<li>
<img alt="Dopamine high" src="http://demo.michaelsoriano.com/images/photodune-3835655-down-office-worker-xs.jpg">
<p>Ut enim ad minim veniam</p>
</li>
</ul>
</div> <!-- /container -->
</body>
</html>