Bonjour,
Depuis peu intéressé par Jquery, j'ai un code de diaporama qui fonctionne parfaitement sous FF.
Avec Internet Explorer 8 j'ai une erreur qui fait que le diaporama ne se lance même pas. L'erreur est "Objet attendu" et pointe sur le début de mon script $(document).ready(function(){...
Je vous donne une capture d'écran de l'erreur :
Voilà mon fichier index :
Et voici le code du diaporama
Si vous avez des idées je suis preneur j'ai essayé pas mal de solutions déjà...
Depuis peu intéressé par Jquery, j'ai un code de diaporama qui fonctionne parfaitement sous FF.
Avec Internet Explorer 8 j'ai une erreur qui fait que le diaporama ne se lance même pas. L'erreur est "Objet attendu" et pointe sur le début de mon script $(document).ready(function(){...
Je vous donne une capture d'écran de l'erreur :
Voilà mon fichier index :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Diaporama Simple JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!-- Cascading Style Sheets -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="jquery_diaporama.js"></script>
</head>
<body>
<ul class="diaporama">
<li><img src="index.jpeg" alt="Image 1" /></li>
<li><img src="trop1.jpeg" alt="Image 2" /></li>
<li><img src="trop2.jpeg" alt="Image 3" /></li>
<li><img src="trop3.jpeg" alt="Image 4" /></li>
<li><img src="trop4.jpeg" alt="Image 5" /></li>
</ul>
</body>
</html>
Et voici le code du diaporama
(function($){
$.fn.diaporama = function(options) {
var defaults = {
delay: 3,
animationSpeed: "normal",
controls:true
};
var options = $.extend(defaults, options);
this.each(function(){
var obj=$(this);
if($(obj).find("li").length>1){
var inter = setInterval(function(){nextElt(options)}, (options.delay*3000));
var sens="right";
var pause = "false";
$(obj).find("li").hide();
$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
}
if(options.controls)
{
$(obj).after("<div class='diaporama_controls'><div class='btns'><a href='#' class='prev'>Prec.</a> <a href='#' class='pause'>Pause</a> <a href='#' class='next'>Suiv.</a></div></div>");
$(obj).siblings().find(".prev").click(function(){
clearInterval(inter);
prevElt(options);
if(!pause)
inter = setInterval(function(){prevElt(options)}, (options.delay*3000));
sens = "left";
});
$(obj).siblings().find(".next").click(function(){
clearInterval(inter);
nextElt(options);
if(!pause)
inter = setInterval(function(){nextElt(options)}, (options.delay*3000));
sens = "right";
});
$(obj).siblings().find(".pause").toggle(
function(){
$(this).removeClass("pause").addClass("play");
clearInterval(inter);
pause = true;
},
function(){
$(this).removeClass("play").addClass("pause");
inter = setInterval(function(){(sens=="right")?nextElt(options):prevElt(options)}, (options.delay*3000));
pause = "false";
}
);
}
function nextElt(options)
{
$(obj).find("li.active").fadeOut(options.animationSpeed);
if(!$(obj).find("li.active").is(":last-child"))
{
$(obj).find("li.active").next().addClass("active").prev().removeClass("active");
$(obj).find("li.active").fadeIn(options.animationSpeed);
}
else
{
$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
$(obj).find("li:last-child").removeClass("active");
}
}
});
return this;
};
})(jQuery);
Si vous avez des idées je suis preneur j'ai essayé pas mal de solutions déjà...