[Résolu]Galerie d'images[Résolu]

Bonjour à tous.

J'aimerais faire une galerie d'images, mais je ne sais pas si je ne m'y prends bien.
Pouvez-vous me donner votre avis s'il vous plaît.
J'aimerais également faire, quand on clique sur la vignette, une autre page s'ouvre sur la grande image. J'ai essayé, mais je n'y arrive pas, pouvez-vous me donner un coup de main.
Je vous en remercie.
Cordialement.

http://ile.chrispat.free.fr/20/index.php

/* CSS Document */

dl.gallery
{
border: 1px solid #000;
background-color: #ddd;
width: 102px;/* largeur du cadre */
text-align: center;
padding: 10px;
float: left;
margin-right: 1em;
}

.gallery dt { font-weight: bold; }

.gallery dt img
{
border: 1px solid #000;
width: 100px;
height: 100px;
}

.gallery dd
{
margin: 0;
padding: 0;
}

code HTML

<div id="content">
<dl class="gallery">
<dt><a href="nocario/no1.jpg"><img src="nocario/no01.jpg" alt=""></a></dt>
<dt>Nocario</dt>
<dd></dd>
</dl>
<dl class="gallery">
<dt><img src="nocario/no02.jpg" alt=""></dt>
<dt>Nocario</dt>
<dd></dd>
</dl>
<dl class="gallery">
<dt><img src="nocario/no03.jpg" alt=""></dt>
<dt>Nocario</dt>
<dd></dd>
</dl>

Modifié par CharlotteDeCorse (04 May 2005 - 15:41)

Bonsoir,

J'utilise ces bouts de code pour réaliser une gallerie avec des mini images qui ouvrent une pop-up contenant l'images originale. La pop-up se ferme automatiquement quand elle perd le focus.

Le script :

<script type="text/javascript">
function montre(img){
win = window.open("","Win","menubar=no");
win.document.open("text/html");
win.document.write('<STY'+'LE>\n');
win.document.write('body{margin-left:0;margin-top:0}\n');
win.document.write('</STY'+'LE>\n');
win.document.write('<SCR'+'IPT>\n');
win.document.write('function resize(){\n');
if (document.all)win.document.write('li=document.images[0].width+10;hi=document.images[0].height+35;\n');
else win.document.write('li=document.images[0].width+6;hi=document.images[0].height+26;\n');
win.document.write('resizeTo(li,hi);\n');
win.document.write('lar=screen.width;hau=screen.height;x=(lar-li)/2;y=(hau-hi)/2;window.moveTo(x,y);\n');
win.document.write('} </SCR'+'IPT>\n');
win.document.write('<BO'+'DY topmargin="20" leftmargin="20" onLoad="window.focus()" onBlur="window.close()">');
win.document.write('<IMG GALLERYIMG="no" Src="'+img+'" onLoad="resize()">');
win.document.write('</BO'+'DY>');
win.document.close();
}
</script>

Le bout de CSS

<style type="text/css" media="screen">
#gallery {text-align:center;}
#gallery p {display:inline;}
#gallery span {display:block;display:inline-table;display:inline-block;}
#gallery p img {margin:5px;border: 0px solid #000;cursor:hand;width:64px;height;48px;}
</style>

Et un zeste de HTML exemple :

<div id="gallery">
<p><span><img src="mini/vars1.jpg" onclick="montre('vars1.jpg')"><br>Photo 1</span></p>
<p><span><img src="mini/vars2.jpg" onclick="montre('vars2.jpg')"><br>Photo 2</span></p>
<p><span><img src="mini/vars3.jpg" onclick="montre('vars3.jpg')"><br>Photo 3</span></p>
<p><span><img src="mini/vars4.jpg" onclick="montre('vars4.jpg')"><br>Photo 4</span></p>
<p><span><img src="mini/vars6.jpg" onclick="montre('vars6.jpg')"><br>Photo 6</span></p>
....
</div>

J'espère t'avoir aidé
Modifié par papyjo (04 May 2005 - 07:06)

Bonsoir papyjo

je te remercie vraiment pour ton code, c'est exactement ce que je cherchais, et que je voulais, et j'ai les adapté, et sa marche super bien.
Encore un grand merci à toi.