CODEWITHSUNDEEP
phpjqueryajax
patwoj98
patwoj98

Reputation: 447

Return unique index ajax

I have code which change photos every x seconds. My jQuery code:

setInterval("rotator();",4000);                        

function rotator(){
  var i = 0;
  var zdjecie = '';
  $('#rotate').html('');
    while(i<4){
        $.post('http://patwoj.hekko24.pl/rotator/content.php', function(data){
                       var wstaw='<li  style="display:inline"><a href="images/'+data+'" class="highslide" title="" onclick="return hs.expand(this, config1 )"><img src="images/'+data+'"  alt=""/> </a></li>';
                       $('#rotate').append(wstaw);
                       return data;
        });
        i++; 
    }
}  
<ul id="rotate">
	<li  style="display:inline" id="rot1">
	<a href="highslide/images/large/dyplom.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="http://www.akwarystyka-miedziowa.pl/highslide/images/thumbs/dyplom.jpg"  alt=""/>
	</a>
	</li>
	<li  style="display:inline" id="rot2">
	<a href="highslide/images/large/akw1.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="http://www.akwarystyka-miedziowa.pl/highslide/images/thumbs/akw1.jpg"  alt=""/>
	</a>
	</li>
	<li  style="display:inline" id="rot3">
	<a href="highslide/images/large/akw2.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="http://www.akwarystyka-miedziowa.pl/highslide/images/thumbs/akw2.jpg"  alt=""/>
	</a>
	</li>

	<li  style="display:inline" id="rot4">
	<a href="highslide/images/large/okon.jpg" class="highslide" 
			title="" 
			onclick="return hs.expand(this, config1 )">
		<img src="http://www.akwarystyka-miedziowa.pl/highslide/images/thumbs/okon.jpg"  alt=""/>
	</a>
	</li>

	</ul>

And code of my PHP

<?php
 $dir = 'images/';
 $files = scandir($dir);
 unset($files[0]);
 unset($files[1]); 
 $max = max(array_keys($files));
 $los = rand(2,$max);
 print_r($files[$los]);

?>

Records aren't unique (sometimes it shows 2 the same images). Is it possible to change it?

This is my site: http://patwoj.hekko24.pl/rotator/

Upvotes: 0

Views: 59

Answers (3)

Eduardo Escobar
Eduardo Escobar

Reputation: 3389

You better control the randomness of your images from within the server and gell all 4 of them in a single ajax call:

setInterval("rotator();",4000);                        

function rotator() {
  $('#rotate').html('');
  $.post('http://patwoj.hekko24.pl/rotator/content.php', function(data){
    for(i=0;i<data.length;i++) {
      var wstaw='<li  style="display:inline"><a href="images/'+data[i]+'" class="highslide" title="" onclick="return hs.expand(this, config1 )"><img src="images/'+data[i]+'"  alt=""/> </a></li>';
      $('#rotate').append(wstaw);
    }
  });
}

And your content.php:

<?php
 $dir = 'images/';
 $files = scandir($dir);
 unset($files[0]);
 unset($files[1]); 
 $rand_imgs_json = json_encode(array_rand($files, 4));
 header("Content-type: application/json");
 echo $rand_imgs_json;
?>

Upvotes: 2

Ashish Choudhary
Ashish Choudhary

Reputation: 2034

use something like

setInterval("rotator();",4000);                        

function rotator(){
  var i = 0;
  var zdjecie = []; // MODIFIED
  $('#rotate').html('');
    while(i<4){
        $.post('http://patwoj.hekko24.pl/rotator/content.php', function(data){

                       // ADDED LINE BELOW
                       if(zdjecie.indexOf(data) < 0) {
                           var wstaw='<li  style="display:inline"><a href="images/'+data+'" class="highslide" title="" onclick="return hs.expand(this, config1 )"><img src="images/'+data+'"  alt=""/> </a></li>';
                           $('#rotate').append(wstaw);
                           zdjecie.push(data);
                           i++;
                        }

        });

    }
}

You can push the data recieved in an array named zdjecie only when that data does not exists already in the array. Also increment the variable i when this happends. So that increment is only done when there is unique data available. In the end you will get unique data only.

Upvotes: 0

BI2O2T
BI2O2T

Reputation: 91

For each file name in your images directory you should store time() timestamp when it was last shown.

Then for each request take those with oldest timestamps saved. Take them more then you need at once, and randomly select those for showing. Store time() timestamp for selected files, show them. Done.

You will have different files shown each time, and they will not repeatedly be shown ever.

P.S.: You can store timestamps in a lots of manners, but if you already use database connection for some other reason for this site - you'd better prefer database table which will have 2 fields - filename varchar UNIQUE, tm timestamp index. Then just make request to database ordering data by tm DESC LIMIT 2x count of images needed at once. You'd also have to manage INSERT/UPDATE for that table correctly.

Upvotes: 0

Related Questions