CODEWITHSUNDEEP
javascriptjquerycss
Mathias Hermansen
Mathias Hermansen

Reputation: 261

Pause a photo slider interval when i click on image

I have made a photo slider, and added some w3 css so i get up a photo modal when i click on a image in the slider.. but when the javascript code want to slide the slider it mess up my model if i have to modal up, is their any way to pause the javascript when i open the modal?

My PHP code:

function getSlideshow($conn) {
    $sql = "SELECT * FROM status WHERE status_image!='noimage.png' ORDER BY likes DESC LIMIT 8";
    $query = mysqli_query($conn, $sql);
    $i = 0;
    while ($row = $query->fetch_assoc()) {
        if($i % 4 == 0 && $i) echo "</div>";
        if($i % 4 == 0) echo "<div class='inner'>";
        echo "
        <div class='imagebox'>
            <img src='images/".$row['status_image']."' onclick='document.getElementById(\"modal".$row['sid']."\").style.display=\"block\"' class='w3-hover-opacity'>
            </div>
            <div id='modal".$row['sid']."' class='w3-modal' onclick='this.style.display=\"none\"'>
    <span class='w3-closebtn w3-hover-green w3-container w3-padding-16 w3-display-topright'>&times;</span>
    <div class='w3-modal-content w3-animate-zoom'>
      <img src='images/".$row['status_image']."' style='width:100%'>
  </div>
</div>

        ";
        $i++;
    }
    if($i % 4) echo '</div>';
}

JS/JQuery code:

    $("#slideshow1h > .inner:gt(0)").hide();

setInterval(function() {
  $('#slideshow1h > .inner:first')
    .fadeOut(1500)
    .next()
    .fadeIn(1500)
    .end()
    .appendTo('#slideshow1h');
}, 6000);

Upvotes: 0

Views: 91

Answers (1)

Brian McCall
Brian McCall

Reputation: 1907

setInterval returns an ID i.e 1 so you can clearInterval(1) or you can set the interval function as a variable and clearInterval(myTimer)

$("#slideshow1h > .inner:gt(0)").hide();

setInterval(function() {
  $('#slideshow1h > .inner:first')
    .fadeOut(1500)
    .next()
    .fadeIn(1500)
    .end()
    .appendTo('#slideshow1h');
}, 6000);

   $('img').on('click', function() {
     clearInterval(1)
   }
);

that will stop it forever, you will have to call setInterval again to resume

Upvotes: 1

Related Questions