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
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="Author" content="Daniel Hagnoul" />
<title>Test Lightbox</title>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<style type="text/css">
body {
background-color:#696969;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
}
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
margin:0px;
padding:0px;
}
div#conteneur {
width:95%;
margin:12px auto;
padding:6px;
background-color:#FFFFFF;
color:#000000;
border:1px solid red;
font-size:0.8em;
}
/* jQuery lightBox plugin - Gallery style */
#galleryUn {
background-color: #444;
padding: 10px;
width: 520px;
}
#galleryUn ul { list-style: none; }
#galleryUn ul li { display: inline; }
#galleryUn ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#galleryUn ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#galleryUn ul a:hover { color: #fff; }
/* jQuery lightBox plugin - Gallery style */
#galleryDeux {
background-color: #444;
padding: 10px;
width: 520px;
}
#galleryDeux ul { list-style: none; }
#galleryDeux ul li { display: inline; }
#galleryDeux ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#galleryDeux ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#galleryDeux ul a:hover { color: #fff; }
</style>
<script type="text/javascript" src="../lib/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#galleryUn a").lightBox();
$("#galleryDeux a").lightBox();
});
</script>
</head>
<body>
<div id="conteneur">
<div id="galleryUn">
<ul>
<li>
<a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
</a>
</li>
</ul>
</div>
<div> </div>
<div id="galleryDeux">
<ul>
<li>
<a href="photos/centre1910a1.jpg" title="Cartes postales anciennes. Linsmeau. La rue du centre en 1910.">
<img src="photos/thImage-centre1910a1.jpg" width="160" height="102" alt="" />
</a>
</li>
<li>
<a href="photos/Chapelle.jpg" title="Cartes postales anciennes. Linsmeau. La chapelle Notre Dame de la Colombe. Monument classé.">
<img src="photos/thImage-Chapelle.jpg" width="160" height="108" alt="" />
</a>
</li>
<li>
<a href="photos/Chateau.jpg" title="Cartes postales anciennes. Linsmeau. Le chateau de Linsmeau. Ancienne forterese féodale.">
<img src="photos/thImage-Chateau.jpg" width="160" height="109" alt="" />
</a>
</li>
<li>
<a href="photos/cpForge.jpg" title="Cartes postales anciennes. Linsmeau. La rue du centre. La forge.">
<img src="photos/thImage-cpForge.jpg" width="160" height="106" alt="" />
</a>
</li>
<li>
<a href="photos/Eglise.jpg" title="Cartes postales anciennes. Linsmeau. Église Saints Pierre et Paul. Tour ancienne.">
<img src="photos/thImage-Eglise.jpg" width="160" height="109" alt="" />
</a>
</li>
</ul>
</div>
</div>
</body>
</html> |
Plugin lightbox. Comment dois-je l'utiliser ?
Blog
) et ses 'overlays' . Voici le lien vers un exemple. Ce qui est intéressant c'est que tu disposes d'un ensemble de paramètres et d'effets pour gérer l'ouverture de ta box : position , couleur du masque , vitesse d'ouverture ....
Répondre avec citation
Partager