Change image after delay in javascript

Question

I have a php code that gets a list of images and then shows them in this way:

<?php 
  $query_selfie = "SELECT * FROM selfie ORDER BY RAND() LIMIT 30";
  $stmt_selfie = $dbh->query($query_selfie);
  if($stmt_selfie->rowCount() > 0)
  {
    $i = 0;
    while($dati_selfie = $stmt_selfie->fetch(PDO::FETCH_ASSOC))
    {  $i++;?>

 <a href="profilo?id=<?php echo $dati_selfie['user_id'];?>" id="slf-<?php echo $i;?>" class="thumbnail slf" style="margin-top:10px;margin-bottom:0px !important;margin-left:0px !important;margin-right: 0px !important;border: 0 !important;">
      <img src="show_selfie.php?id=<?php echo $dati_selfie['id'];?>" alt="Immagine profilo" />
 </a>
 <?php } ?>
 <?php } ?>

So, for example it generates 30 <img> tags. What I want to do is display only one of this, then show another one..the problem is that the id passed to the page which shows the image (src attribute) is selected by random. There is a way to do that?

EDIT
I've added the slf class because there are a lot of thumbnails in the page, but only these are interested in this question.
I have to display only one of the image which have been selected by the query, then change the image after a delay. The problem is that I have to save somewhere the id of the image because the src attributes have a link and I have to pass the id of the image.

Answer 1

Add display: none; to the style of all except the first one. Then add jQuery code that hides and shows them periodically.

<?php 
  $query_selfie = "SELECT * FROM selfie ORDER BY RAND() LIMIT 30";
  $stmt_selfie = $dbh->query($query_selfie);
  if($stmt_selfie->rowCount() > 0)
  {
    $i = 0;
    $display = '';
    while($dati_selfie = $stmt_selfie->fetch(PDO::FETCH_ASSOC))
    {  
        if ($i > 0) {
            $display = 'display: none;';
        }
        $i++;?>

 <a href="profilo?id=<?php echo $dati_selfie['user_id'];?>" id="slf-<?php echo $i;?>" class="thumbnail slf" style="<?php echo $display; ?> margin-top:10px;margin-bottom:0px !important;margin-left:0px !important;margin-right: 0px !important;border: 0 !important;">
      <img src="show_selfie.php?id=<?php echo $dati_selfie['id'];?>" alt="Immagine profilo" />
 </a>
 <?php } ?>
 <?php } ?>

<script>
$(function() {
    var thumbnails = $("a.slf");
    var thumbcount = thumbnails.length;
    setInterval(function() {
        var current = $("a.slf:visible");
        current.hide();
        var next = (thumbnails.index(current) + 1) % thumbcount;
        thumbnails.eq(next).show();
    }, 2000);
});
</script>

Here's a simple demo with static HTML and no images:

 $(function() { var thumbnails = $("a.slf"); var thumbcount = thumbnails.length; setInterval(function() { var current = $("a.slf:visible"); current.hide(); var next = (thumbnails.index(current) + 1) % thumbcount; thumbnails.eq(next).show(); }, 2000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="http://www.google.com" class="thumbnail slf"> Image 1 </a> <a href="http://www.google.com" class="thumbnail slf" style="display: none;"> Image 2 </a> <a href="http://www.google.com" class="thumbnail slf" style="display: none;"> Image 3 </a> <a href="http://www.google.com" class="thumbnail slf" style="display: none;"> Image 4 </a> 

Answer 2

First your approach is so bad :( don't mix DB query or logics inside the view pages. Any way you can use following approach (if I understand your question correctly) Render all images (in your case 30 as you said) and set all invisible after that you can set visible one by one like below.

    <?php 
  $query_selfie = "SELECT * FROM selfie ORDER BY RAND() LIMIT 30";
  $stmt_selfie = $dbh->query($query_selfie);
  if($stmt_selfie->rowCount() > 0)
  {
    $i = 0;
    while($dati_selfie = $stmt_selfie->fetch(PDO::FETCH_ASSOC))
    {  $i++;?>

 <a style="display:none" href="profilo?id=<?php echo $dati_selfie['user_id'];?>" id="slf-<?php echo $i;?>" class="thumbnail" style="margin-top:10px;margin-bottom:0px !important;margin-left:0px !important;margin-right: 0px !important;border: 0 !important;">
      <img src="show_selfie.php?id=<?php echo $dati_selfie['id'];?>" alt="Immagine profilo" />
 </a>
 <?php } ?>
 <?php } ?>

<script type="text/javascript" >
var currentIndex = 0;
$(document).ready(function(){
    setInterval(function(){ 
        $("#parentDiv").children().hide();
        $($("#parentDiv").children()[currentIndex]).show();
        currentIndex++; 
        if( $("#parentDiv").children().length < currentIndex )
        {
            currentIndex = 0;
        }   
    }, 3000);
});
</script>

Answer 3

After the execution of the PHP script you get something like this (I extracted the CSS). You need to add display: none to every .thumbnail :

HTML:

<a href="profilo?id=123456" id="slf-0" class="thumbnail">
  <img src="show_selfie.php?id=123456" alt="Immagine profilo" />
</a>
<a href="profilo?id=654321" id="slf-1" class="thumbnail">
  <img src="show_selfie.php?id=654321" alt="Immagine profilo" />
</a>
<a href="profilo?id=101010" id="slf-2" class="thumbnail">
  <img src="show_selfie.php?id=101010" alt="Immagine profilo" />
</a>

CSS:

.thumbnail {
  display: none;
  margin: 10px 0 0 0 !important;
  border: 0 !important;
}

Then you want to show the next image after an interval:

$(document).ready(function() {
  var $previousElement = $('.thumbnail').first();

  var interval = setInterval(function() {
    var $nextElement = $previous.next();
    if($nextElement.length) {
      $nextElement.show();
      $previousElement.hide();
      $previousElement = $nextElement;
    }
    else {
      clearInterval(interval);
    }
  }, 1000);
});

The code is untested but I think you should get the idea.