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.

Possible duplicate of [PHP MySQL pagination with random ordering](http://stackoverflow.com/questions/10729633/php-mysql-pagination-with-random-ordering) — ssc-hrep3, Jan 08 '16 at 12:24
I have to use jquery or js to show only one of the image selected by the database and then change after a delay, it isn't a duplicate. — gattass69, Jan 08 '16 at 12:26
You are describing a very basic image carousel - there are numerous free opensource ones available, or you can write it yourself by simply setting a css rule `a.thumbnail{display:none;}` then showing the next image in a loop with javascript `setInterval` — Steve, Jan 08 '16 at 12:31

Barmar · Accepted Answer · 2016-01-08T13:06:55.737

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>

it work partially, hide the first image and then not showing anyone of the other..and also i need a loop..so repeat the image not go to image 1 to 30 then stop..and it show only the first image in this way..and after 10 sec no image are displayed — gattass69, Jan 08 '16 at 12:48
Using `% thumbcount` makes it wrap around to `0` when it reaches the end. — Barmar, Jan 08 '16 at 12:50
sorry, it works..show all the images but then close every one of these and it stop working. in the console there isn't any error... — gattass69, Jan 08 '16 at 12:59

Nishan Senevirathna · Answer 2 · 2016-01-08T12:41:03.017

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>

This will (expensively) show the last image and nothing else. — Steve, Jan 08 '16 at 12:33
Yes you have to do something more!, Wait I'll update the answer, — Nishan Senevirathna, Jan 08 '16 at 12:34
I updated the answer... set invisible your link instead of images — Nishan Senevirathna, Jan 08 '16 at 12:42

ssc-hrep3 · Answer 3 · 2016-01-08T12:44:50.257

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.

it won't work..if i make a for which show the image by $i of the image? and then at the end set index of for = 0? the problem is that i don't know how to pass on the other value of the i after a time.. — gattass69, Jan 08 '16 at 13:03
You don't need an ID for selecting the "next" image. If you want to show an image by ID, this is something completely different. — ssc-hrep3, Jan 08 '16 at 13:20

Change image after delay in javascript

3 Answers3