Search jQuery

jQuery Forum

p.favevar..

Infinite Loop matter !

in Using jQuery • 8 years ago

Hello I've got some matters with my infinite loop function on a website I've built.
Since some days, the loop doesn't loop at all. It stays fixed on the first image.

here is the url to the website.
laurevangaver.fr

I am pretty rubbish concerning the html code , so if you can help me, that would be great . Especially since it's pretty urgent, and my customer Needs to show her work fast enough!

And here is my code for this page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
       <title>Laure Van Gaver - Architecte d'intérieur - Paris</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <link rel="stylesheet" href="media/css/reset.css" type="text/css">
       <link rel="stylesheet" href="media/css/style.css" type="text/css">

       <link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon">
<style>
#picOne, #picTwo, #picThree, #picFour, #picFive, #picSix {
display:none;
position:absolute;
width:835px;
left:0%;
margin-top:130px;
margin-left:130px;
}
#pics {
width:50%;
}
#imgfond {
position:static;
width:835px;
margin-left:122px;
padding-top: 130px;
}

</style>

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
    function runPics(){
        $('#picOne').delay(0).fadeIn(2000,function(){
            $('#picTwo').delay(0).fadeIn(2000,function(){
              $('#picThree').delay(0).fadeIn(2000,function(){
                $('#picFour').delay(0).fadeIn(2000,function(){
                $('#picFive').delay(0).fadeIn(2000,function(){
                    $('#picOne').delay(0).fadeOut(2000)
                    $('#picTwo').delay(0).fadeOut(2000)
                    $('#picThree').delay(0).fadeOut(2000,function(){
                    $('#picFour').delay(0).fadeOut(2000,function(){
                    $('#picFive').delay(0).fadeOut(2000,function(){
                        $('#picOne').attr({src:'media/wrapper/boutique-835x438.jpg'})
                        runPics();
                    })
                })
            })
        })
    })
            })
            })
            })
    };
    runPics();
});
</script>
    </head>
    <body>
    <div id="wrap" class="de">
       <div id="head">
        <h1><a href="index.html">Laure Van Gaver - Architecte d'intérieur - Paris</a></h1>
        <ul id="nav" style="list-style-type:none">
            <li class="particuliers"><a href="fr/fr.part.html">Particuliers</a></li>
            <li class="boutiques"><a href="fr/fr.bout.html">Boutiques</a></li>
            <li class="faillant"><a href="fr/fr.partenariats.html">Partenariats - Faillant Dumas</a></li>
            <li class="contact"><a href="fr/fr.contact.html">Contact</a></li>
            <li class="lang"><a href="en/index.html">Language</a></li>
        </ul>
       </div>
       <div id="pics">
<img src="media/wrapper/boutique-835x438.jpg" width="50%" id="picOne" />
<img src="media/wrapper/particuliers1-835x438.jpg" width="50%" id="picTwo" />
<img src="media/wrapper/particuliers2-835x438.jpg" width="50%" id="picThree" />
<img src="media/wrapper/particuliers3-835x438.jpg" width="50%" id="picFour" />
<img src="media/wrapper/particuliers4-835x438.jpg" width="50%" id="picFive" />
</div>
<div id="imgfond">
<img src="media/wrapper/boutique-835x438.jpg"/>
</div>
    </body>
    </html>