Version imprimable
Bonjour,
J'aurai besoin d'aide pour la visualisation des photos sur mon site Internet.
J'ai mis plusieurs photos en petites tailles sur mon site et j'aimerai que lorsqu'on clique sur la photo elle s'ouvre en grand.
Est-ce que quelqu'un à une idée du code.
Merci d'avance pour votre aide.
J'imagine qu'une recherche autour de mots-clefs commen'a rien donné ? :whistle:Citation:
Javascript, miniatures, gallerie, agrandir, visionneuse
Bonjour
Encore plus simple : tu mets un lien directement vers l'image...
la photo s'ouvra alors aussi en grand... dans une nouvelle page...Code:<a href="grande-image.jpg"><img src="petite-image.jpg" alt="" /></a>
Oui j'avais pensé à ca mais ca ne fais pas super de le faire avec un lien.
Est-ce que tu connais un endroit ou je pourrais trouver le code en javascript car j'ai vu sur un site une personne utilise cette technique pour visionner les image mais je ne vois pas du tout comment il fait.
Voila je site : http://www.menuiseriedelaunay.com/ et ensuite je vais dans fenêtre et je clique sur une image.
Salut,
ça c'est du javascript ;) Fais une recherche sur JQuery et fancybox ;)
Ah super avec Fancybox ça serai tout a fait ça.
Est-ce que quelqu'un peut me dire comment je peux faire pour faire cela sur mon site car je m'y connais pas du tout en programmation.
En tout cas merci !!
Difficile de faire plus clair.... :?
La seule manière pour nous d'en faire plus, ça serait de le faire à ta place... :roll:
Allez ne t'inquiète pas ce n'est pas si dur, et n'hésite pas à nous dire si tu as des soucis à l'adapter à ton site. (et si oui : en postant un extrait de ton code) :)
Merci en tout cas !!
Donc il faut que j'ajoute toutes ces morceaux de mon code à l’intérieur de ma page c'est ça ?
Il faut que je télécharge des trucs, franchement la je patauge lol.
:nono:Hop hop hop.Citation:
Envoyé par passager123
>>> la matière >>> HTML
>>> l'esprit >>> Javascript
>>> la lumière >>> CSS
Comment ça je vire mystique... :whistle:
:mrgreen:
Bah... j'espère pour toi que les morceaux de ton code sont déjà dans ta page :haha:Citation:
Envoyé par passager123
:dehors:
Est-ce que quelqu'un peux me guider car je suis totalement débutant et je ne sais pas trop comment faire ma page est deja faite avec les photos j'aimerai juste que lorsque je clique sur ces photos elle s'ouvre en plus gros comme avec Fancybox.
Merci beaucoup
On a même pas eu un extrait de ton code actuel avant modification... :no:
Comme tu vois, il y a plein de monde qui vient ici, mais tu sais ce qu'on peut apporter, c'est une aide technique, pas de la sous-traitance caritative... :?
Si tu es en cours d'apprentissage du JS, OK on va t'aider, sors ton code et c'est parti.
Si tu n'es pas en cours d'apprentissage du JS, developpez.net n'a pas pour vocation de fournir des codes gratuits sur demande...
(tiens c'est un concept ça, après la VOD, le COD : "Code On Demand" 8-) Comment ça ça existe déjà ?)
Tu as tout a fait raison, voici le code de ma page :
En rouge mes 3 images.Code:
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>EtsDUFOUR</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="styles.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="content"> <table width="817" height="73" border="0" align="center" bordercolor="#504029"> <tr> <td width="10" height="69" align="left"> <p> </p></td> <td width="74" align="left"><img src="images/scie.gif" alt="" width="76" height="69" /></td> <td width="719" align="left"><font size="+3" color="#9f0000" >Etablissement</font><font size="+3" color="#4e3e27"> DUFOUR</font></td> </tr> </table> <table width="816" height="120" border="0" align="center" bordercolor="#504029"> <tr> <td width="265" height="120" align="center"><img src="images/IMG_0537.JPG" width="229" height="105" /></td> <td width="281" align="center"><img src="images/100_1323.jpg" width="229" height="105" /></td> <td width="256" align="center"><img src="images/IMG_0456.JPG" width="229" height="105" /></td> </tr> </table> <!-- header begins --> <div id="menu"> <ul> <li id="button1"><a href="index.html" title="">Accueil</a></li> <li id="button2"><a href="plan.html" title="">Plan d'accés</a></li> <li id="button3"><a href="contact.html" title="">Nous contacter</a></li> <li id="button4"><a href="devis.html" title="">Demande de Devis</a></li> </ul> </div> <!-- header ends --> <!-- content begins --> <div id="main"> <div id="right"> <h4>Caisses</h4> </br> <table border="0" cellpadding="0" cellspacing="0" width="356"> <tr> <td valign="top"><a href="Zoom_SapNorJoint2Faces.html"></a><img src="images/Nos produits/Caisses/caisse2.jpg" alt="" width="147" height="112" /></td> <td width="25" valign="top" rowspan="4"></td> <td valign="top" width="341" rowspan="4"> </td> <td valign="top" width="241" rowspan="4"><table width="239" height="44" border="0"> <tr> <td height="19"><table width="252" border="0" cellpadding="3" cellspacing="0"> <tr> <td width="241" valign="middle" bgcolor="#504029"> <p> <h3><font color="#FFFFFF">Caisse clairevoie</font></h3></p></td> </tr> <tr bgcolor="#ffffff"> <td width="241" valign="middle" class="Style10">Toutes dimensions</td> </tr> <tr bgcolor="#ffffff"> <td width="241" valign="middle" bgcolor="#fef5e9"> </td> </tr> <tr> <td width="241" valign="middle"> </td> </tr> <tr> <td valign="middle"> </td> </tr> </table></td> </tr> </table></td> </tr> <tr height="2"> <td valign="top" height="2"></td> </tr> <tr> <td valign="top"> <div align="left"></div></td> </tr> <tr> <td height="36" valign="top"> <div align="center"></div></td> </tr> </table> </br> </br> <table border="0" cellpadding="0" cellspacing="0" width="356"> <tr> <td valign="top"><a href="Zoom_SapNorJoint2Faces.html"></a><img src="images/Nos produits/Caisses/caisse-bois1.jpg" alt="" width="149" height="106" /></td> <td width="25" valign="top" rowspan="4"></td> <td valign="top" width="341" rowspan="4"> </td> <td valign="top" width="241" rowspan="4"><table width="239" height="44" border="0"> <tr> <td height="19"><table width="252" border="0" cellpadding="3" cellspacing="0"> <tr> <td width="241" valign="middle" bgcolor="#504029"> <p> <h3><font color="#FFFFFF">Caisse industrielle</font></h3></p></td> </tr> <tr bgcolor="#ffffff"> <td width="241" valign="middle" class="Style10">Toutes dimensions</td> </tr> <tr bgcolor="#ffffff"> <td width="241" valign="middle" bgcolor="#fef5e9"> </td> </tr> <tr> <td width="241" valign="middle"> </td> </tr> <tr> <td valign="middle"> </td> </tr> </table></td> </tr> </table></td> </tr> <tr height="2"> <td valign="top" height="2"></td> </tr> <tr> <td valign="top"> <div align="left"></div></td> </tr> <tr> <td height="36" valign="top"> <div align="center"></div></td> </tr> </table> </br> </br> <p> </p> <table width="361" height="36" border="1"> <tr> <td width="158"><img src="../../IMG_0261.JPG" alt="" width="160" height="120" /></td> <td width="167"><img src="../../IMG_0261.JPG" alt="" width="145" height="119" /></td> <td width="14"><img src="../../IMG_0261.JPG" alt="" width="160" height="120" /></td> </tr> </table> <p> </p> <p> </p> <td height="42"><div align="right"><a href="devis.html"><img src="images/demande-devis.jpg" width="200" height="79" border="0" /></a></div> <p> </p> <div> <div></div> <div></div> </div> <div> </div> <div> <div></div> <div></div> </div> </div> <div id="left"> <div id="left_top"></div> <div id="categories"> <h3>Menu principal</h3> <ul> <li><a href="index.html"><u>Accueil</u></a></li> <li><a href="atelier.html">L'atelier</a></li> <li><a href="contact.html">Nous contacter</a></li> <li><a href="devis.html">Demande de Devis</a></li> <li><a href="plan.html">Plan d'accés</a></li> <li><a href="javascript:void(favoris());">Ajouter aux favoris</a></li> </ul> </div> <div id="partners"> <h3>Nos réalisations</h3> <ul> <li><a href="palox.html"> Palox </a></li> <li><a href="caisses.html"> Caisses </a></li> <li><a href="Palettes.html"> Palettes</a></li> <li><a href="Bins.html"> Bins</a></li> <li><a href="presentoirs.html"> Présentoirs</a></li> <li><a href="lame_a_volet.html"> Lames à volets</a></li> <li><a href="volets.html"> Volets</a></li> <li><a href="planchers.html"> Planchers</a></li> <li><a href="lambris.html"> Lambris</a></li> <li><a href="amenagement_jardin.html"> Aménagements de jardin</a></li> <li><a href="maison_en_bois.html"> Maisons en bois</a></li> </ul> </div> <div id="partners2"> <h3>Nos partenaires</h3> <ul> <li><a href="http://www.holztech.com/fr/producten.html"> Holztech</a></li> <li><a href="http://www.disber.com/disberfr.htm"> Disber</a></li> <li><a href="http://www.robland.com/fr"> Robland</a></li> </ul> </div> <div style="clear:both"></div> <!--content ends --> <!--footer begins --> </div> </div> </div> <div id="bot"> <div id="footer"> <p>Copyright 2010. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p> <p>Design by <a href="http://www.metamorphozis.com/" title="Website Templates">FRÉVILLE Bruno </a> </p> </div> </div> <!-- footer ends--> </body> </html>
Merci encore
Bon, alors qu'est-ce qui n'allait pas dans les étapes présentées par la documentation ? :?
1) le DOCTYPE, OK tu l'as.
2) et 3) des ressources à insérer dans le head de ta page et les fichiers à télécharger qui vont avec, correctement placés dans l'arborescence de ton site.
Jusque là, OK ?
en 4) et 5), il est expliqué comment remplacer tes images (comme tu as plusieurs images, il ne faut pas fonctionner sur l'id mais sur une class, voir le passage de la fin à adapter à tes propres images) et aussi comment déclencher la fonction fancybox().
Ce n'est pas évident quand on ne connait pas jQuery... moi je trouvais le conseil de 12monkeys plus pertinent ^^ si je me mets à la peinture demain matin, je vais pas attaquer le plafond de la Chapelle Sixtine ce week-end :mrgreen: (et puis c'est pas gagné qu'on m'aurait laissé faire, d'ailleurs :aie:)
Super ça fonctionne.
Merci pour votre patience.