Bonjour à tous, comme dis dans le titre ma question concerne l'effet fadeIn de jQuery dont je me sert pour faire un petit diaporama.
Et comme souvent (pour ne pas dire comme d'hab' ^^) j'ai un probleme avec ie8, le diapo fonctionne très bien mais je n'ai aucun changement d'opacité.
Aprés quelques recherche j'ai essayer iepngfix (malgrés que j'utilise des jpg) en supposant que la fonction fadeIn() transorme les images en png mais sans succes.
Merci d'avance !!
Mon code
Js (complet):
Et le html(juste le diapo) :
Un exemple en ligne : Ici
PS : les images sont deformées c'est normal, juste le temps du test rassurer vous ^^
Modifié par colegos (20 Dec 2011 - 15:57)
Et comme souvent (pour ne pas dire comme d'hab' ^^) j'ai un probleme avec ie8, le diapo fonctionne très bien mais je n'ai aucun changement d'opacité.
Aprés quelques recherche j'ai essayer iepngfix (malgrés que j'utilise des jpg) en supposant que la fonction fadeIn() transorme les images en png mais sans succes.
Merci d'avance !!
Mon code
Js (complet):
$(function(){
var grand = $('#fulldiap'); i=1;
function diapo(){
xy = setInterval(function(){//interval de 5s entre chaque photos
var pti = $('#list article img:eq('+ i++ +')');//selectionne la balise suivante
grand.fadeOut('slow',function(){//fait disparaitre #fulldiap
grand.empty();//vide la balise #fulldiap
pti.clone().prependTo(grand);//Copie la petite image dans #fulldiap
grand.fadeIn('slow');//fait apparaitre #fulldiap
if(i == 6){//A la derniere image le compteur se remet a zero
i = 0;
}
});
}, 5000);
}
diapo();//execute la fonction au chargement
$('#list article img').click(function(){
var pti = $(this);//recupere l'image cliqué
grand.fadeOut('fast', function(){
grand.empty();
pti.clone().prependTo(grand);
grand.fadeIn('normal');
clearInterval(xy);//stop l'interval
setTimeout(function(){diapo();}, 10000);//reprend l'interval 10s aprés
});
});
});
Et le html(juste le diapo) :
<section id="diap">
<section id="fulldiap">
<img src="FILES/001.jpg"/>
</section>
<section id="list">
<article>
<img src="FILES/001.jpg" />
</article>
<article>
<img src="FILES/002.jpg" />
</article>
<article>
<img src="FILES/003.jpg" />
</article>
<article>
<img src="FILES/004.jpg" />
</article>
<article>
<img src="FILES/005.jpg" />
</article>
<article>
<img src="FILES/006.jpg" />
</article>
</section>
</section>
Un exemple en ligne : Ici
PS : les images sont deformées c'est normal, juste le temps du test rassurer vous ^^
Modifié par colegos (20 Dec 2011 - 15:57)