Créer une galerie d'image à partir d'une seul image

Bonjour la communauté!

je suis en train de créer un site pour un costumier,
j'ai un scroll horizontal avec une succession d'image type diaporama (jquery),
j'aimerai créer des zones de type area shape (avec image réactive) sur chaque image
pour donner à voir son travail,
pour cela, je veux faire qu'à partir des area shape, une lightbox s'ouvre et permet de faire défiler plusieurs images les unes à la suite des autres en surimpression (comme toutes les lightbox)

donc créer une galerie d'image à partir d'une seule image.

pour l'instant j'ai :
le scroll
un area
une thickbox (mais pas plusieurs images)

j'ai appelé les scripts js pour chaque pas de souci

le code type dans le body pour une image contenu dans le scroll avec un areashape qui ouvre la thickbox :

<div id="accueil">
<div class="im">

<img src="images/monimage1.png" width="600" height="400" border="0" usemap="#Map" id="Image1"/>

<map name="Map" id="Map">

<area shape="rect" coords="530,108,581,202"
href="images/monimage3.png"
class="thickbox" title="commentaire
"

onmouseover="MM_swapImage('Image1','','images/monimage2.png',1)"


onmouseout=
"MM_swapImgRestore()"

onmousepress=


/>

</map>
</div>

merci!

Ps : je suis graphiste et non développeur donc j'espère que vos conseils élaborés seront compréhensible pour un poulpe comme moi

Voilà ce que je cherche pour être plus précis.

Modifié par pointpoint (21 Mar 2012 - 18:52)

salut..

tu devrais faire un tour sur fancybox...

c'est un système de lightbox très pratique... qui justement sait gérer très facilement plusieurs galerie dans une même page avec un clic sur une seule image

c'est par là -> http://fancybox.net/home

Un autre sur le même principe que fancybox proposé par pchlj :

-> http://www.grafikart.fr/zoombox

Hé! Merci à tous les deux! je vais voir çà!

Bon apparemment c'est pas si simple, il faut une commande php
pour la fancybox qui précise que si il y a une seul image on lance la galerie avec un nom de groupe.

qui se trouve ici :
http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2998
(vers la fin)

le code :

<div class="gallery">
{foreach from=$images item=image name=test}
{if $smarty.foreach.test.first}
<div class="imgs"><a class="group" href="{$image->file}" title="{$image->title}" rel="gallery"><img src="{$image->thumb}" alt="{$image->title}" /></a></div>

{else}<div class="imgs" style="display:none;"><a class="group" href="{$image->file}" title="{$image->title}" rel="gallery"><img src="{$image->thumb}" alt="{$image->title}" /></a></div>
{/if}
{/foreach}
<div class="galleryclear">&nbsp;</div>
</div>

le php c'est très compliqué pour moi
mais il faut absolument que je résous ce problème d'image!
(je pourrais l'utiliser dans tellement cas de figure!)

donc ma question c'est où placé ce code?
(faire un doc php à part? l'intégrer dans mon index et déclarer index.php?)
comment puis-je l'utiliser?

Merci de votre aide!