Problème jCarousel sur Firefox : Mauvaise image de démarrage

Bonjour,

Je suis confronté à un problème avec jCarousel.
En effet, sur le site que je suis en train de faire, j'ai besoin que le carousel commence sur l'image 2. Jusque là, pas de soucis, j'indique bien le parametre "start: 2".
Ça marche parfaitement sur Safari et Chrome, mais les autrse navigateurs commencent eux, sur l'image 1.

Parallèlement, j'affiche en dessous du carousel, le n° de l'image et la légende correspondante. Ces 2 éléments fonctionnent parfaitement aussi bien sur Safari ou chrome que sur FireFox ou IE…
(pour les tests, les légendes commencent par "aaa", "bbb", etc…)

Je reste donc dubitatif quand au bug qui m'affiche le bandeau d'image curieusement sur FF.

Si vous pouviez m'éclairer, je vous en serai bien reconnaissant

Lien de test :
http://aurore.ghmd.fr/portfolio/fashion1-8.html

Le code pour le carousel :

	// Carousel diapo
	function mycarousel_initCallback(carousel) {
	    jQuery('.jcarousel-control a').bind('click', function() {
	        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
	        return false;
	    });
	
	    jQuery('.jcarousel-scroll select').bind('change', function() {
	        carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
	        return false;
	    });
	
	    jQuery('#mycarousel-next').bind('click', function() {
	        carousel.next();
	        return false;
	    });
	
	    jQuery('#mycarousel-prev').bind('click', function() {
	        carousel.prev();
	        return false;
	    });
	};
	
	// Ride the carousel...
	jQuery(document).ready(function() {
	    jQuery("#diapo").jcarousel({
			start: 2,
			scroll: 1,
			initCallback: mycarousel_initCallback,
			// This tells jCarousel NOT to autobuild prev/next buttons
			buttonNextHTML: null,
			buttonPrevHTML: null,
			
			// Gestion des légende, n° d'image et boutons prev/next
			itemFirstInCallback: {
			  onBeforeAnimation: mycarousel_itemMasqueLegende,
			  onAfterAnimation: mycarousel_itemFirstInCallback
			}
		});
		
		// Affichage des n° d'image, de la légende correspondante et des boutons prev/next
		function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
			$('#pagination span').text(idx);
			
			maxItem = carousel.size() - 1;
			
			// On masque le bouton Prev. si on est sur la première image
			if(idx == 1) $('#mycarousel-prev').text(' ');
			else $('#mycarousel-prev').text('<');
			
			// On masque le bouton Next si on est sur la dernière image
			if(idx == maxItem) $('#mycarousel-next').text(' ');
			else $('#mycarousel-next').text('>');
			
			$("#diapo ul li a img").each( 
				function (key, value) {
					indexImg = idx - 1;
					if(key == indexImg)	$('.legende').text($(this).attr('alt')).fadeIn();
				}
			);
			
		};
		
		// Masquage de la légende avant de changer d'image
		function mycarousel_itemMasqueLegende (carousel, item, idx, state) {
			$(".legende").fadeOut('fast');
		}
		
		// pour centrer l'image active
		$('.jcarousel-list-horizontal').css('left', '180px');
		
	});

L'image active est placée au milieu de la page et on voit à gauche et à droite, une partie des images précédante et suivante.
Modifié par AnakinDSL (06 Nov 2010 - 12:18)