Bonjour tout le monde, bonjour Floriane76
Voilà ça marche, merci encore à Floriane76 pour son aide précieuse.
J'ai donc réussi à faire mon diaporama avec jquery et jcarousel.
L'étape suivante pour moi était d'associer au click sur la miniature, l'affichage
de l'image en plus grand avec un titre et un texte.
Pour cela j'ai utilisé l'exemple suivant :
http://enure.net/dev/hide-all-except-one/ conseillé par la FAQ du site
http://docs.jquery.com/Frequently_Asked_Questions#Recipe:_Hide_All_divs_Except_One.
Et cela donne cela :
http://ebwebcreations.fr/mairie-origne/carousel.html ... je pense que cela peut intéresser des personnes.
Comme je suis fainéante, j'ai fait en sorte que les <li> du carousel soient généres automatiquement : voilà 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" xml:lang="en-us">
<head>
<title>Page eebee</title>
<!--
jQuery library
-->
<script type="text/javascript" src="jquery/jquery.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="jquery/jcarousel/lib/jquery.jcarousel.pack.js"></script>
<!--
jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="jquery/jcarousel/lib/jquery.jcarousel.css" />
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="jquery/jcarousel/skins/tango_vert/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
/* pour chaque image décrite dans toggleThis, je cherche l'attribut src et je l'utilise pour construire un
<li></li> du carousel */
$('#toggleThis > div').find("img").each(function(i) {
var imgsrc = $(this).attr("src");
var imgalt = $(this).attr("alt");
var photoid = $(this).parent().attr("id");
$('#mycarousel').append( "<li><a class='toggle' href='#" + photoid +"' ><img src='" + imgsrc +"' width='75px' height='75px' alt='" + imgalt +"' /></a></li>");
});
jQuery('#mycarousel').jcarousel();
var hash = window.location.hash;
if (!hash) {
var href = $('#toggleThis > div:first');
}
else {
var href = window.location.hash;
}
hideAllExcept(href);
$('a.toggle').click(function() {
var href = $(this).attr('href');
hideAllExcept(href);
if ($.browser.msie) {window.location.reload();/* ajoute pour marcher avec ie */}
});
});
function hideAllExcept(el) {
$('#toggleThis > div').hide();
$(el).show();
}
</script>
<!-- <script type="text/javascript"src="jquery/hideAllExcept.js"></script> -->
</head>
<body>
<div id="wrap">
<ul id="mycarousel" class="jcarousel-skin-tango">
<!-- sera construit en fonction des .photoplus -->
</ul>
</div>
<br /><br /><br />
<div id="toggleThis">
<div class="photoplus" id="ecole">
<img src="http://ebwebcreations.fr/mairie-origne/img/ecole.jpg" alt="ecole origne" height = "200px" />
<h1>titre : ecole</h1>
<p>
Description : ecole
</p>
</div>
<div class="photoplus" id="cantine">
<img src="http://ebwebcreations.fr/mairie-origne/img/cantine.jpg" alt="salle de cantine" height = "200px" />
<h1>titre : cantine</h1>
<p>
Description : cantine
</p>
</div>
<div class="photoplus" id="mairie">
<img src="http://ebwebcreations.fr/mairie-origne/img/mairie2-p.jpg" alt="baptiment mairie" height = "200px" />
<h1>titre : mairie</h1>
<p>
Description : mairie
</p>
</div>
<div class="photoplus" id="ecole">
<img src="http://ebwebcreations.fr/mairie-origne/img/ecole.jpg" alt="ecole origne" height = "200px" />
<h1>titre : ecole</h1>
<p>
Description : ecole
</p>
</div>
<div class="photoplus" id="cantine">
<img src="http://ebwebcreations.fr/mairie-origne/img/cantine.jpg" alt="salle de cantine" height = "200px" />
<h1>titre : cantine</h1>
<p>
Description : cantine
</p>
</div>
<div class="photoplus" id="mairie">
<img src="http://ebwebcreations.fr/mairie-origne/img/mairie2-p.jpg" alt="baptiment mairie" height = "200px" />
<h1>titre : mairie</h1>
<p>
Description : mairie
</p>
</div>
</div>
</body>
</html>
Cela marchait super sur Firefox et Opera mais
sur (devinez quoi ?) IE7 : les divs des grandes images n'apparaissent qu'après un refresh de la page !!!!
Conclusion j'ai dû ajouter la ligne
if ($.browser.msie) {window.location.reload();/* ajoute pour marcher avec ie */}
Pas très jojo !!! Et c'est là que le forum intervient ... quelqu'un peut-il me dire s'il y a autre chose à faire de plus propre ?
C'est testé sur ie7, FireFox 2.0.0.8 et Opera 9.24 : si vous rencontrez des problèmes , dites le moi.
Si le code vous a intéressé
, si vous avez des remarques : ça m'intéresse.
Bye
eebee
