Discussion :

[momox19]

Bonjour tout le monde, je vous écris car je suis à bout. Après de longue recherche je suis perdu et je viens ici consulter vos esprits ingénieux en quête de réponse.

http://jquery.malsup.com/cycle/

Mon problème, comme le titre l'indique concerne le module jquery Cycle qui permet de gérer un diaporama assez facilement. Mon diaporama fonctionne bien sur Chrome, Firefox, Safari. Le problème se pose pour Internet Explorer.

Dans Internet explorer (IE) 2 cas se présente :

-Si j'arrive sur ma page le diaporama s'affiche bien.
-Si je réactualise la page les images sont toutes petites.

Cela le fait sur les version IE7, 8 , 9.

Pour créer un diaporama le code dans la page html est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="publiciteSlide" align="center">
	<img src="image1.jpg" alt="Accueil" title="Publicité Accueil">
	<img src="image2.jpg" alt="Publicité test" title="Publicité test">
</div>

Dans le Js on met :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('.publiciteSlide').cycle({
	fx:'fade'
});

Normalement, après cela marche partout. Pourtant lorsque je réactualise ma page sur IE beug.....

En regardant dans jquery.cycle.all.js, les lignes suivantes m'interpellent (ceux sont ces lignes qui fixeront le height et le width a mon div ou est contenu le diaporama. Oui je ne peux mettre un height en durs car les images sont appelées de manière dynamique) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var reshape = opts.containerResize && !$cont.innerHeight();
	if (reshape) { // do this only if container has no size http://tinyurl.com/da2oa9
		var maxw = 0, maxh = 0;
		for(var j=0; j < els.length; j++) {
			var $e = $(els[j]), e = $e[0], w = $e.outerWidth(), h = $e.outerHeight();
			if (!w) w = e.offsetWidth || e.width || $e.attr('width');
			if (!h) h = e.offsetHeight || e.height || $e.attr('height');
			maxw = w > maxw ? w : maxw;
			maxh = h > maxh ? h : maxh;
		}
 
		if (maxw > 0 && maxh > 0)
			$cont.css({width:maxw+'px',height:maxh+'px'});
	}

Els= mon slider avec mes photos.
$cont = le div contenant mon slider.

Selon que je réactualise ma page ou que je vais directement dessus le outerWidth() me retourne 2 résultats complètement différent. J'ai lu sur internet que cette méthode rencontrait des problème avec IE.

Donc ma question est, par quoi pourrais je remplacer tout cela?
Quelqu'un aurait il une idée d'ou vient mon problème?
Des gens ont déja résolu ce problème?

[momox19]

Bon beh j'ai résolu mon problème.

J'ai remplacé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
// DIAPORAMA publiclité  ---------------------------------------------------
$('.publiciteSlide').cycle({
	fx:'fade',
 
});

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
// DIAPORAMA publiclité  ---------------------------------------------------
$('.publiciteSlide').cycle({
	fx:'fade',
	before:function onAfter(curr, next, opts, fwd){
	        //get the height of the current slide
		var $ht = $(this).height();
		var $wt = $(this).width();
 
		//set the container's height to that of the current slide
		$(this).parent().css("height", $ht);
		$(this).parent().css("width", $wt);
	}
});

Ainsi le height et le width sont bien attribués de manière dynamique. 2 jours de boulots pour trouver cela mais je suis bien content ^^.