Lightbox en diaporama

Bonjour,

Je ne sais pas si je met mon post au bon endroit, si c'est le bon intitulé mais je vais m'expliquer.

J'aimerai faire un principe de lightbox (je connais celle qui existe) mais au lieu d'avoir les petites vignettes les unes derrière les autres avant de l’enclencher, j'aimerai en avoir une seul qui enclenche toute une serie.

De plus j'aimerai evité celle utilisant prototype et scriptools car j'ai un carousel fonctionnant avec Jquery et une shadows box sur cette page déjà.

J'espère mettre bien expliquer.

Si quelqu'un à une piste de script de travail, de site etc je suis preneuse.

Merci par avance.

J'ai trouvé la fancybox qui pourrai bien correspondre à ce que je cherche.

http://fancybox.net/home

à la fin de la page il y a ce que image gallery mais là quand je lis les instructions pour mettre en place cette partie je ne trouve pas... ou quelque chose m'echappe.

J'ai justement réalisé ce type de diapo récemment.

En fait ce n'est pas bien compliqué... Pour commencer, tu places un lien sur une image ou un texte qui ouvrira la galerie et tu ajoutes un id à la balise de lien (par exemple id="galerie").

Ensuite, tu importes les scripts (jquery et fancybox).

Ensuite il te suffit d'ajouter ce script :

$(document).ready(function() {
$("#galerie").click(function() {
		$.fancybox([
			{
				'href'	: 'photos/photo1.jpg',
				'title'	: 'Caption 1'
			},
			{
				'href'	: 'photos/photo2.jpg',
				'title'	: 'Caption 2'
			},
			{
				'href'	: 'photos/photo3.jpg',
				'title'	: 'Caption 3'
			}
		], {
			'padding'			: 0,
			'transitionIn'		: 'elastic',
			'transitionOut'		: 'elastic',
			'type'              : 'image',
			'changeFade'        : 10
		});
	});
}

Où bien entendu tu peux aisément modifier les paramètres, les images,...

Et voilà, ta galerie s'ouvre lorsque tu cliques sur le lien !
Modifié par pixelb (27 May 2011 - 16:14)

Merci, je vais testé tous çà.

re, à nouveau moi..

J'ai testé et cela ne marche pas. Je pense avoir tout bien installé mais au lieu de m'ouvrir la fenetre, ,l'image s'ouvre dans une autre fenêtre.

Voici les extraits de mon code...
J'ai loupé un truc ?

Dans le head

<script type="text/javascript" src="jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

<script type="text/javascript">
$(document).ready(function() { 
$("#galerie").click(function() { 
        $.fancybox([ 
            { 
                'href'    : 'photos/photo1.jpg', 
                'title'    : 'Caption 1' 
            }, 
            { 
                'href'    : 'photos/photo2.jpg', 
                'title'    : 'Caption 2' 
            }, 
            { 
                'href'    : 'photos/photo3.jpg', 
                'title'    : 'Caption 3' 
            } 
        ], { 
            'padding'            : 0, 
            'transitionIn'        : 'elastic', 
            'transitionOut'        : 'elastic', 
            'type'              : 'image', 
            'changeFade'        : 10 
        }); 
    }); 
} 
</script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<link href="realisation.css" rel="stylesheet" type="text/css">
<link href="shadowbox.css" rel="stylesheet" type="text/css">
<link href="cedryane.css" rel="stylesheet" type="text/css">

Dans HTLM

div id="com">
<span class="bold">Publications institutionnels :</span><br>
<a id="galerie" href="photos/photo1.jpg"><img src="photos/photo2.jpg" width="20" height="30"alt=""/></a>
 
Guide et Atlas :</a><br>
Livrets Pédagogiques : <br>
</div>

Merci d'avance

c'est bon j'ai trouvé mon erreur..