Visualisation de photo sur un site Internet [Résolu]

passager123 · 02/08/2011, 12h51

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.

RomainVALERI · 02/08/2011, 13h49

J'imagine qu'une recherche autour de mots-clefs comme

Citation:

Javascript, miniatures, gallerie, agrandir, visionneuse

n'a rien donné ?

12monkeys · 02/08/2011, 14h15

Bonjour

Encore plus simple : tu mets un lien directement vers l'image...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="grande-image.jpg"><img src="petite-image.jpg" alt="" /></a>

la photo s'ouvra alors aussi en grand... dans une nouvelle page...

passager123 · 02/08/2011, 14h54

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.

Finality · 02/08/2011, 15h04

Salut,

ça c'est du javascript

Fais une recherche sur JQuery et fancybox

passager123 · 02/08/2011, 15h10

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 !!

RomainVALERI · 02/08/2011, 15h16

Difficile de faire plus clair....

La seule manière pour nous d'en faire plus, ça serait de le faire à ta place...

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)

passager123 · 02/08/2011, 15h18

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.

RomainVALERI · 02/08/2011, 15h28

Citation:

Envoyé par passager123

Il faut que je ~~télécharge~~ lise des trucs, franchement la je patauge lol.

Hop hop hop.

>>> la matière >>> HTML
>>> l'esprit >>> Javascript
>>> la lumière >>> CSS

Comment ça je vire mystique...

Bovino · 02/08/2011, 16h23

Citation:

Envoyé par passager123

Donc il faut que j'ajoute toutes ces morceaux de mon code à l’intérieur de ma page c'est ça ?

Bah... j'espère pour toi que les morceaux de ton code sont déjà dans ta page

passager123 · 02/08/2011, 17h27

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

RomainVALERI · 02/08/2011, 17h40

On a même pas eu un extrait de ton code actuel avant modification...

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"

Comment ça ça existe déjà ?)

passager123 · 02/08/2011, 17h46

Tu as tout a fait raison, voici le code de ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
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>&nbsp;&nbsp;&nbsp;&nbsp;</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">&nbsp;</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">&nbsp;</td>
                    			</tr>
                    		<tr> 
                      			<td width="241" valign="middle">&nbsp;</td>
                    		</tr>
                    		<tr> 
                      			<td valign="middle">&nbsp;</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">&nbsp;</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">&nbsp;</td>
                    			</tr>
                    		
                    <tr> 
                      <td width="241" valign="middle">&nbsp;</td>
                    		</tr>
                    		<tr> 
                      			
                      <td valign="middle">&nbsp;</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>&nbsp;</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>&nbsp;</p>
      <p>&nbsp;</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>&nbsp;</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">&nbsp;&nbsp;&nbsp;Palox </a></li>
          
          <li><a href="caisses.html">&nbsp;&nbsp;&nbsp;Caisses </a></li>
          
          <li><a href="Palettes.html">&nbsp;&nbsp;&nbsp;Palettes</a></li>
				  
          <li><a href="Bins.html">&nbsp;&nbsp;&nbsp;Bins</a></li>
				  
          <li><a href="presentoirs.html">&nbsp;&nbsp;&nbsp;Présentoirs</a></li>
				  
          <li><a href="lame_a_volet.html">&nbsp;&nbsp;&nbsp;Lames à volets</a></li>
				  
          <li><a href="volets.html">&nbsp;&nbsp;&nbsp;Volets</a></li>
				  
          <li><a href="planchers.html">&nbsp;&nbsp;&nbsp;Planchers</a></li>
				  
          <li><a href="lambris.html">&nbsp;&nbsp;&nbsp;Lambris</a></li>
				  
          <li><a href="amenagement_jardin.html">&nbsp;&nbsp;&nbsp;Aménagements 
            de jardin</a></li>
				  
          <li><a href="maison_en_bois.html">&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;Holztech</a></li>
				  
          <li><a href="http://www.disber.com/disberfr.htm">&nbsp;&nbsp;&nbsp;Disber</a></li>
				  
          <li><a href="http://www.robland.com/fr">&nbsp;&nbsp;&nbsp;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>

En rouge mes 3 images.

Merci encore

RomainVALERI · 02/08/2011, 22h12

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

(et puis c'est pas gagné qu'on m'aurait laissé faire, d'ailleurs

)

passager123 · 03/08/2011, 09h47

Super ça fonctionne.

Merci pour votre patience.

02/08/2011, 12h51	#1
passager123 Inscription : avril 2009 Messages : 42 Détails du profil Informations forums : Inscription : avril 2009 Messages : 42 Points : -3 Points : -3	Visualisation de photo sur un site Internet 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.
	00

02/08/2011, 14h15	#3
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonjour Encore plus simple : tu mets un lien directement vers l'image... Code : Sélectionner tout - Visualiser dans une fenêtre à part <a href="grande-image.jpg"><img src="petite-image.jpg" alt="" /></a> la photo s'ouvra alors aussi en grand... dans une nouvelle page... __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	10

02/08/2011, 15h16	#7
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 074 Points : 4 074	Difficile de faire plus clair.... La seule manière pour nous d'en faire plus, ça serait de le faire à ta place... 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) __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	10

02/08/2011, 17h40	#12
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 074 Points : 4 074	On a même pas eu un extrait de ton code actuel avant modification... 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" Comment ça ça existe déjà ?) __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	10

02/08/2011, 22h12	#14
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 074 Points : 4 074	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 (et puis c'est pas gagné qu'on m'aurait laissé faire, d'ailleurs ) __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

02/08/2011, 14h54	#4
passager123 Inscription : avril 2009 Messages : 42 Détails du profil Informations forums : Inscription : avril 2009 Messages : 42 Points : -3 Points : -3	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.
	00

02/08/2011, 15h04	#5
Finality Membre éclairé Webmaster Inscription : septembre 2007 Messages : 376 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Webmaster Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2007 Messages : 376 Points : 377 Points : 377	Salut, ça c'est du javascript Fais une recherche sur JQuery et fancybox
	10

02/08/2011, 15h10	#6
passager123 Inscription : avril 2009 Messages : 42 Détails du profil Informations forums : Inscription : avril 2009 Messages : 42 Points : -3 Points : -3	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 !!
	00

02/08/2011, 15h18	#8
passager123 Inscription : avril 2009 Messages : 42 Détails du profil Informations forums : Inscription : avril 2009 Messages : 42 Points : -3 Points : -3	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.
	01

02/08/2011, 17h27	#11
passager123 Inscription : avril 2009 Messages : 42 Détails du profil Informations forums : Inscription : avril 2009 Messages : 42 Points : -3 Points : -3	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
	00

03/08/2011, 09h47	#15
passager123 Inscription : avril 2009 Messages : 42 Détails du profil Informations forums : Inscription : avril 2009 Messages : 42 Points : -3 Points : -3	Super ça fonctionne. Merci pour votre patience.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email