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
| <div class="demo-wrapper">
<!--// Gallery Markup: A container that the plugin is called upon, and two lists for the images (use images with same aspect ratio) //-->
<div id="gallery-container">
<ul class="items--small">
<li class="item"><a href="#"><img src="images/small/angel_s2.jpg" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small/destructuration_s2.jpg" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small/femme_vegetale_s2.jpg" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small/fire_face_1_s2.jpg" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small/fire_face_2_s2.jpg" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small/gaga_robot_s2.jpg" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small/portrait_decoupe_s2.jpg" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small/tiger_woman_s2.jpg" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small/trois_femmes_s2.jpg" alt="" /></a></li>
<li class="item"><a href="#"><img src="images/small/un_reve_s2.jpg" alt="" /></a></li>
</ul>
<ul class="items--big">
<li class="item--big"><a href="#"><img src="images/big/angel2.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big/destructuration2.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big/femme_vegetale2.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big/fire_face_12.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big/fire_face_22.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big/gaga_robot2.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big/portrait_decoupe2.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big/tiger_woman2.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big/trois_femmes2.jpg" alt="" /></a></li>
<li class="item--big"><a href="#"><img src="images/big/un_reve2.jpg" alt="" /></a></li>
</ul>
<div class="controls">
<span class="control icon-arrow-left" data-direction="previous"></span>
<span class="control icon-arrow-right" data-direction="next"></span>
<span class="grid icon-grid"></span>
<span class="fs-toggle icon-fullscreen"></span>
</div>
<script src="js/jquery-1.9.0.js"></script>
<script src="js/plugins.js"></script>
<script src="js/scripts.js"></script>
<script>
$(document).ready(function(){
$('#gallery-container').sGallery({
fullScreenEnabled: true
});
});
</script> |
