0
Un premier carrousel :
<ul id="diaporama" class="jcarousel-skin-diaporama"> <li><img src="temp/diaporama_1.jpg" width="710" height="399" alt="Légende de la photo 1"/></li> <li><img src="temp/diaporama_2.jpg" width="710" height="399" alt="Légende de la photo 2"/></li> <li><img src="temp/diaporama_3.jpg" width="710" height="399" alt="Légende de la photo 3"/></li> <li><img src="temp/diaporama_4.jpg" width="710" height="399" alt="Légende de la photo 4"/></li> <li><img src="temp/diaporama_5.jpg" width="710" height="399" alt="Légende de la photo 5"/></li> <li><img src="temp/diaporama_6.jpg" width="710" height="399" alt="Légende de la photo 6"/></li> <li><img src="temp/diaporama_7.jpg" width="710" height="399" alt="Légende de la photo 7"/></li> <li><img src="temp/diaporama_8.jpg" width="710" height="399" alt="Légende de la photo 8"/></li> <li><img src="temp/diaporama_9.jpg" width="710" height="399" alt="Légende de la photo 9"/></li> <li><img src="temp/diaporama_10.jpg" width="710" height="399" alt="Légende de la photo 10"/></li> <li><img src="temp/diaporama_11.jpg" width="710" height="399" alt="Légende de la photo 11"/></li> <li><img src="temp/diaporama_12.jpg" width="710" height="399" alt="Légende de la photo 12"/></li> </ul>
Un second carrousel :
<ul id="thumbs" class="jcarousel-control jcarousel-skin-thumbs"> <li><a href="#" rel="1"><img src="temp/diaporama_1_thumb.jpg" width="102" height="57" alt="Légende de la photo 1"/></a></li> <li><a href="#" rel="2"><img src="temp/diaporama_2_thumb.jpg" width="102" height="57" alt="Légende de la photo 2"/></a></li> <li><a href="#" rel="3"><img src="temp/diaporama_3_thumb.jpg" width="102" height="57" alt="Légende de la photo 3"/></a></li> <li><a href="#" rel="4"><img src="temp/diaporama_4_thumb.jpg" width="102" height="57" alt="Légende de la photo 4"/></a></li> <li><a href="#" rel="5"><img src="temp/diaporama_5_thumb.jpg" width="102" height="57" alt="Légende de la photo 5"/></a></li> <li><a href="#" rel="6"><img src="temp/diaporama_6_thumb.jpg" width="102" height="57" alt="Légende de la photo 6"/></a></li> <li><a href="#" rel="7"><img src="temp/diaporama_7_thumb.jpg" width="102" height="57" alt="Légende de la photo 7"/></a></li> <li><a href="#" rel="8"><img src="temp/diaporama_8_thumb.jpg" width="102" height="57" alt="Légende de la photo 8"/></a></li> <li><a href="#" rel="9"><img src="temp/diaporama_9_thumb.jpg" width="102" height="57" alt="Légende de la photo 9"/></a></li> <li><a href="#" rel="10"><img src="temp/diaporama_10_thumb.jpg" width="102" height="57" alt="Légende de la photo 10"/></a></li> <li><a href="#" rel="11"><img src="temp/diaporama_11_thumb.jpg" width="102" height="57" alt="Légende de la photo 11"/></a></li> <li><a href="#" rel="12"><img src="temp/diaporama_12_thumb.jpg" width="102" height="57" alt="Légende de la photo 12"/></a></li> </ul>
Initialisation :
if ($('#diaporama').length > 0) {
$('#diaporama').jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback
});
$('#thumbs').jcarousel({
scroll: 1,
visible: 5,
buttonNextHTML: null,
buttonPrevHTML: null
});
}
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('rel')));
return false;
});
jQuery('.jcarousel-next').bind('click', function() {
carousel.next();
$('#thumbs').data('jcarousel').next();
return false;
});
jQuery('.jcarousel-prev').bind('click', function() {
carousel.prev();
$('#thumbs').data('jcarousel').prev();
return false;
});
};
On remarque :
$('#thumbs').data('jcarousel').next();
et
$('#thumbs').data('jcarousel').prev();
Littéralement, on va pouvoir contrôler le carrousel qui a l’ID thumbs alors que l’on se trouve dans le callback du carrousel qui a l’ID diaporama !
J’ai cherché longtemps (genre, des mois), il n’y a rien dans la doc et pas d’exemple disponible.
J’ai finalement trouvé dans le changelog de jCarousel :
Version 0.2.4 – 2010-04-19
Updated jQuery to version 1.4.2.
jCarousel instance can now be retrieved by $(selector).data(’jcarousel’).
Ouf !!!!!
DATE 11 Mar 2011
