Plugin lightbox. Comment dois-je l'utiliser ?

Bonjour
je cherche à afficher une box à l'ouverture de la page d'accueil de mon site
J'ai bien vu une solution, mais il faut modifier le source de jquery

Quelqu'un a t'il une solution

Merci beaucoup

Peux tu

me préciser qu'est ce qu'une box ? Si tu aurais un site en exemple ?

Bonjour
Merci pour ta reponse

J'aimerais afficher une image dans une lightbox, colorbox ou autre en ajax
J ai bien réussi a faire un mouseover, mais j'arrive pas à le lancer dans le body on load

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Document sans titre</title> 
<link rel="stylesheet" href="lightbox.css" type="text/css"> 
		<script type="text/javascript" src="lightbox.js"></script> 
</head> <body>
 
<script language="javascript"> 
	//Si les fichiers et les div ont d�j� �t� ajout�es, on ne fait rien
	if(!document.getElementById('lightbox')){
		if(isIE()){document.body.onload = function(){initLightbox('/scripts/lightbox/')};}
		else{document.body.setAttribute("onload","initLightbox('/scripts/lightbox/')");}
	}
</script>
<a onmouseover="setVariables('', 'janvier2010.gif', '650', '550', '', '0', new Array('Ceci+est+un+titre')); openbox('image'); return false;"
 href="janvier2010.gif" target="blank"><img src="janvier2010.gif" border="0" width="200px" />
 
</a>
 
</body> 
</html>

Merci

Bonjour.

plugin lightbox : http://leandrovieira.com/projects/jquery/lightbox/

Exemple :

Code:

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>&nbsp;</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>

Oki,

je comprend mieux ce que tu souhaites. Une autre solution ,complémentaire à celle de Daniel , la librairie jquery tools ( je suis un peu fan ... ;) ) 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 ....

Bon jour
Je vais tester tout cela

Je vous remercie tous beaucoup

Bonne journée