Bonjour,
j'ai actuellement un site avec une galerie fonctionnant avec lightbox et jquery
les photos sont classées par thèmes, chaque thème sa galerie (les listes <ul>)
je voudrais qu'au chargement de la page, une galerie soit ouverte automatiquement (la première)
si on clique sur le titre d'une autre galerie, la galerie déjà ouverte se ferme progressivement, et que l'autre galerie s'ouvre progressivement et dévoile... de facon progressive les miniatures cliquables
j'ai déjà testé des trucs, malheureusement je n'arrive pas tout à fait à faire ce que je veux
j'avais fais des tests avec des UL= class mais évidemment les nom de thèmes vont êtres différents
donc voila si vous pouviez me filer un petit coup de main vu que le javascript je connais pas trop (et en espérant avoir été assez clair), ce serait cool
merci d'avance
Tom
ps: l'adresse du site: www.photoericbrenard.be, et l'adresse du site de test : http://www.photoericbrenard.be/test/galeries.php
le code :
j'ai actuellement un site avec une galerie fonctionnant avec lightbox et jquery
les photos sont classées par thèmes, chaque thème sa galerie (les listes <ul>)
je voudrais qu'au chargement de la page, une galerie soit ouverte automatiquement (la première)
si on clique sur le titre d'une autre galerie, la galerie déjà ouverte se ferme progressivement, et que l'autre galerie s'ouvre progressivement et dévoile... de facon progressive les miniatures cliquables
j'ai déjà testé des trucs, malheureusement je n'arrive pas tout à fait à faire ce que je veux
j'avais fais des tests avec des UL= class mais évidemment les nom de thèmes vont êtres différents
donc voila si vous pouviez me filer un petit coup de main vu que le javascript je connais pas trop (et en espérant avoir été assez clair), ce serait cool
merci d'avance
Tom
ps: l'adresse du site: www.photoericbrenard.be, et l'adresse du site de test : http://www.photoericbrenard.be/test/galeries.php
le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="DC.title" content="Eric Brenard - Photographe"/>
<meta name="description" content="Eric Brenard Photographe, reportages, d�veloppement photos, photos d'identit�s, etc. Immortalise les �v�nemements"/>
<meta name="keywords" content="photo eric brenard, eric brenard, brenard, photographie, eric, photographie, photo, numerique, d�veloppement, reportage, rebecq, appareil photo" />
<meta name="Identifier-url" content="http://www.photoericbrenard.be"/>
<meta name="Abstract" content="Site web d'Eric Brenard - Photographe "/>
<meta name="Category" content="Photographie, photos, Rebecq"/>
<title>Eric Brenard | Photographe</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<!--[if IE 6]> <link href="styleie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
<style type="text/css" media="screen">
@import url(jquery.lightbox-0.3.css);
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.3.js"></script>
<script type="text/javascript">$(document).ready(function(){$('.photo a').lightBox();})</script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$(".galerie ul span" ).click(function(e)
{ // selectionne toutes les balises span qui se trouvent entre des balises ul
var class_ul = $(this).parents("ul" ).attr("class" ); // pour conna�tre l'id de la balise ul
$("." + class_ul + " li" ).slideToggle("slow" ); // affichera/cachera toutes les balises li contenues dans une balise ayant pour id id_ul.
e.preventDefault(); // �quivaut � un return false
});
});
-->
</script>
</head>
<body>
<!-- logo et menu-->
<div id="banner">
<a href="index.php"><img id="logo" src="images/logo.png" alt="logo" ></a>
<ul id="menu">
<li><a href="prix.php">Prix</a></li>
<li><a href="galeries.php">Galeries</a></li>
<li><a href="infos.php">Infos - Magasin</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
<!-- fin banniere
et image de transition-->
<img id="contenu_haut" src="images/top.png" alt="image de transition"/>
<!-- contenu global-->
<div id="contenu">
<h1> Galeries </h1>
<!-- contenu proprement dit-->
<div id="contenu_centre">
<ul class="galerie"> <a href="#"> <span> test</span> </a>
<li class="photo"> <a href="photos/1.jpg" <img src="photos/tumbs/thumb_1.jpg" alt="photo1"/></a></li>
<li class="photo"> <a href="photos/2.jpg" <img src="photos/tumbs/thumb_2.jpg" alt="photo2"/></a></li>
<li class="photo"> <a href="photos/3.jpg" <img src="photos/tumbs/thumb_3.jpg" alt="photo3"/></a></li>
<li class="photo"> <a href="photos/4.jpg" <img src="photos/tumbs/thumb_4.jpg" alt="photo4"/></a></li>
<li class="photo"> <a href="photos/5.jpg" <img src="photos/tumbs/thumb_5.jpg" alt="photo5"/></a></li>
<li class="photo"> <a href="photos/6.jpg" <img src="photos/tumbs/thumb_6.jpg" alt="photo6"/></a></li>
<li class="photo"> <a href="photos/7.jpg" <img src="photos/tumbs/thumb_7.jpg" alt="photo7"/></a></li>
<li class="photo"> <a href="photos/8.jpg" <img src="photos/tumbs/thumb_8.jpg" alt="photo7"/></a></li>
<li class="photo"> <a href="photos/9.jpg" <img src="photos/tumbs/thumb_9.jpg" alt="photo7"/></a></li>
<li class="photo"> <a href="photos/10.jpg"<img src="photos/tumbs/thumb_10.jpg" alt="photo7"/></a></li>
</ul>
<ul class="galerie"> <a href="#"> <span> test2</span> </a>
<li class="photo"> <a href="photos/1.jpg" <img src="photos/tumbs/thumb_1.jpg" alt="photo1"/></a></li>
<li class="photo"> <a href="photos/2.jpg" <img src="photos/tumbs/thumb_2.jpg" alt="photo2"/></a></li>
<li class="photo"> <a href="photos/3.jpg" <img src="photos/tumbs/thumb_3.jpg" alt="photo3"/></a></li>
<li class="photo"> <a href="photos/4.jpg" <img src="photos/tumbs/thumb_4.jpg" alt="photo4"/></a></li>
<li class="photo"> <a href="photos/5.jpg" <img src="photos/tumbs/thumb_5.jpg" alt="photo5"/></a></li>
<li class="photo"> <a href="photos/6.jpg" <img src="photos/tumbs/thumb_6.jpg" alt="photo6"/></a></li>
<li class="photo"> <a href="photos/7.jpg" <img src="photos/tumbs/thumb_7.jpg" alt="photo7"/></a></li>
<li class="photo"> <a href="photos/8.jpg" <img src="photos/tumbs/thumb_8.jpg" alt="photo7"/></a></li>
<li class="photo"> <a href="photos/9.jpg" <img src="photos/tumbs/thumb_9.jpg" alt="photo7"/></a></li>
<li class="photo"> <a href="photos/10.jpg"<img src="photos/tumbs/thumb_10.jpg" alt="photo7"/></a></li>
</ul>
</div>
<!-- fin contenu-->
</div>
<!-- fin conteneur-
et debut footer-->
<div id="footer">
<p> Eric Brenard | Photographe | 2008-2009 - tous droits réservés </p>
</div></body>
</html>
