CODEWITHSUNDEEP
javascriptphpmysqli
Mathias Hermansen
Mathias Hermansen

Reputation: 261

How to set up a slider with php

I am trying to set up a slider. I have a container with 4 photos that fades away and 4 photos fade in. I want a total of 20 photos (4 X 5) And i want to get this photos from a table ordered by DESC but im not sure how to do this since i have to put in some code after each 4th row. since i need to put 4 and 4 images inside a div. So what i have done so far is to put the first 4 from the table in 1 div. But i dont know how to get the last 16 in.. I will guess that the best way is maybe to change the php function somehow or do i need to make a function for each 4th?

HTML CODE:

<div id="slideshow">
   <div>
       <?php 
       echo getSlideshow($conn);

       ?>

   </div>
   <div>
    // in here i need to put the 5th - 8th on the list
     </div>

      <div>
    // in here i need to put the 9th - 12th on the list
     </div>

      <div>
    // in here i need to put the 13th - 16th on the list
     </div>

       <div>
    // in here i need to put the 17th - 20th on the list
     </div>


   </div>

JS/jquery code:

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1500)
    .next()
    .fadeIn(1500)
    .end()
    .appendTo('#slideshow');
}, 5000);

php function:

function getSlideshow($conn) {
    $sql = "SELECT * FROM status WHERE status_image!='noimage.png' ORDER BY likes DESC LIMIT 4";
    $query = mysqli_query($conn, $sql);
    while ($row = $query->fetch_assoc()) {
        echo "
       <div class='imagebox'>
     <img src='images/".$row['status_image']."'>
     </div>";
    }

}

Upvotes: 0

Views: 2925

Answers (1)

Ruben Vincenten
Ruben Vincenten

Reputation: 907

Use the modulus operator:

function getSlideshow($conn) {
    $sql = "SELECT * FROM status WHERE status_image!='noimage.png' ORDER BY likes DESC LIMIT 4";
    $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>';
        echo "
        <div class='imagebox'>
            <img src='images/".$row['status_image']."'>
        </div>";
        $i++;
    }
    if($i % 4) echo '</div>';
}

or the array_chunk function:

function getSlideshow($conn) {
    $sql = "SELECT * FROM status WHERE status_image!='noimage.png' ORDER BY likes DESC LIMIT 4";
    $query = mysqli_query($conn, $sql);
    $slides = array();
    while ($row = $query->fetch_assoc()) {
       $slides[] = $row;
    }
    foreach(array_chunk($slides, 4) as $chunk) {
        echo '<div>';
        foreach($chunk as $slide) {
            // code here
        }
        echo '</div>';
    }
}

Upvotes: 1

Related Questions