Slideshow photos doesn't work on firefox

mertoxin

New Member
I want to add a slideshow photos to my website using html , I have used a HTML code from the net, the problem is the slideshow work fine on chrome and IE butit doesn't work on firefox( one or two photos appear and just I see the text from the alt field eg: image1 , image2)This is the link (sorry it's in french but at the bottom of the page exist a link for all the code): http://www.guillaumevoisin.fr/developpement/tutoriel-realiser-un-diaporama-simple-avec-jquerypage.html:\[code\]<!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"><!-- Website Template by freewebsitetemplates.com --><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Photos</title> <link rel="stylesheet" href="http://stackoverflow.com/questions/css/style.css" type="text/css"> <!-- Javascript --> <script type="text/javascript" src="http://stackoverflow.com/questions/scripts/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/scripts/jquery.diaporama.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/scripts/script.js"></script></head><body><table style=" border:0;"> <tr> <td style="border: 0px solid black;"><span style="font:Georgia, serif;font-size: 16px;font-weight: normal;"></span></td> <td> <ul style="width:450px;" class="diaporama" > <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0037.jpg" alt="Image 1" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0041.jpg" alt="Image 2" /> </li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0043.jpg" alt="Image 3" /> </li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0048.jpg" alt="Image 4" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0049.jpg" alt="Image 5" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0090.jpg" alt="Image 6" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0092.jpg" alt="Image 7" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0094.jpg" alt="Image 8" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0095.jpg" alt="Image 9" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0096.jpg" alt="Image 10" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0100.jpg" alt="Image 11" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0103.jpg" alt="Image 12" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0112.jpg" alt="Image 13" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0114.jpg" alt="Image 14" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0118.jpg" alt="Image 15" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0120.jpg" alt="Image 16" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0121.jpg" alt="Image 17" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0122.jpg" alt="Image 18" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0128.jpg" alt="Image 19" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0129.jpg" alt="Image 20" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0134.jpg" alt="Image 21" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0139.jpg" alt="Image 23" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0141.jpg" alt="Image 24" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0144.jpg" alt="Image 25" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0145.jpg" alt="Image 26" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0146.jpg" alt="Image 27" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0147.jpg" alt="Image 28" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0151.jpg" alt="Image 29" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0152.jpg" alt="Image30" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0153.jpg" alt="Image 31" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0157.jpg" alt="Image 32" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0160.jpg" alt="Image 33" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0162.jpg" alt="Image 34" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0168.jpg" alt="Image 35" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0253.jpg" alt="Image 36" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0256.jpg" alt="Image 37" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0257.jpg" alt="Image 38" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0259.jpg" alt="Image 39" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0261.jpg" alt="Image 40" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0266.jpg" alt="Image 41" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0272.jpg" alt="Image 42" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0275.jpg" alt="Image 43" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0313.jpg" alt="Image 44" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0314.jpg" alt="Image 45" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0315.jpg" alt="Image 46" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0316.jpg" alt="Image 47" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0317.jpg" alt="Image 48" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0321.jpg" alt="Image 49" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0322.jpg" alt="Image 50" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0326.jpg" alt="Image 51" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0332.jpg" alt="Image52" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0335.jpg" alt="Image 53" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0336.jpg" alt="Image 54" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0339.jpg" alt="Image 55" /></li> <li><img width="450" src="http://stackoverflow.com/questions/images/Public/DSC_0340.jpg" alt="Image 56" /></li>....... </ul></td> <td></td> <td style="border: 0px ;"><span></span></td> </tr> <tr> <td><br/></td> <td><br/></td> </tr> </table></body></html>\[/code\]jquery.diaporama.js\[code\](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*1000)); var sens = "right"; var pause = false; $(obj).find("li").hide(); $(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed); // Controls if(options.controls) { $(obj).after("<div class='diaporama_controls'><div class='btns'><a href='http://stackoverflow.com/questions/15741263/#' class='prev'>Prec.</a> <a href='http://stackoverflow.com/questions/15741263/#' class='pause'>Pause</a> <a href='http://stackoverflow.com/questions/15741263/#' 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*1000)); sens = "left"; }); $(obj).siblings().find(".next").click(function(){ clearInterval(inter); nextElt(options); if(!pause) inter = setInterval(function(){nextElt(options)}, (options.delay*1000)); 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*1000)); pause = false; } ); } // Affiche l'
 
Back
Top