Home/ Questions/Q 9039971
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T09:52:04+00:00

I’m having a problem with a simple jquery slide-show (English is not my first

  • 0

I’m having a problem with a simple jquery slide-show (English is not my first language so I’ll try to explain it). I have my index.php in which I place the slideshow.html by using jquery. Here’s the code for the index.php, the jquery and the slideshow0.html

index.php

<body>
<div class="main">
    <div class="contenedorHeader">
        <?php include("header.html"); ?>
     </div>
    <div class="central">
        <div class="fondoDescription">
            <div id="contenedorDescription"></div>
        </div>
        <div id="slideshowHolder"></div>
    </div>
    <div class="footer"></div>
</div>
</body>

jquery code:

$(document).ready(function()
{
    $("#slideshowHolder").load("slideshow0.html");
});

slideshow0.html:

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshowContent IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshowContent IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshowContent IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>
</head>

<body>
 <div id="slideshowContent">
            <img src="images/slideshows/home/image1.png" alt="Slideshow Image 1"  class="active"/>
            <img src="images/slideshows/home/image2.png" alt="Slideshow Image 2" />
            <img src="images/slideshows/home/image3.png" alt="Slideshow Image 3" />
        </div>
</body>
</html>

As you can see, the slideshow0.html is loaded into “slideshowHolder”. There’s no problem here, but when I click an item in the menu I need to replace “slideshow0.html with another slide-show which is exactly like this one except for the images, and the problem is that the looping interval doesn’t works properly, it’s like a function is executing twice, or something like that. I’ve tested the slide-show outside the PHP and they works fine, so I’m guessing is a problem with the PHP or the method to load/replace the HTML.

You can see the project here: http://www.spamtv.com.ar/coya/index.php The first slide-show is slideshow0.html, click in “web” to load the next slide-show (which doesn’t works)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you load/replace the slideshow, the old interval defined by setInterval( "slideSwitch()", 5000 ); is still set and running. Each time you load a new slideshow, a new interval will be defined but the old ones won’t be deleted.

    You have to manually stop them:

    $(document).ready(function()
{
    if (slideshowInterval) {
        clearInterval(slideshowInterval);
    }
    $("#slideshowHolder").load("slideshow0.html");
});

    And when defining it:

    $(function() {
    slideshowInterval = setInterval( "slideSwitch()", 5000 );
});
    • 0