Random images from flickr feed

JavaScript
1

Random images from flickr feed

Hi all

I have adapted some code to import thumbnails from a flickr account

http://www.ttmt.org.uk/flickr/flickr.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css">
	 *{
	   margin:0;
	   padding:0;
	 }
	 #images{
	   margin:30px;
	 }
	 #images ul{
	   list-style:none;
	 }
	 #images ul li{
 	   float:left;
 	   margin-left:10px;
 	 }
	</style>
</head>

<body>

  <div id="images"> </div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
  <script>
  	   	
	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=59807924@N02&lang=en-us&format=json&jsoncallback=?", displayImages);
	
	function displayImages(data) {																																   
		var count = 0;								
		var htmlString = "<ul>";
		$.each(data.items, function(i,item){
			if(count <= 3){
  			var img = (item.media.m).replace("_m.jpg", "_s.jpg");		
  			htmlString += '<li><a href="' + item.link + '" target="_blank">';
  			htmlString += '<img src="' + img + '" alt="' + item.title + '" title="' + item.title + '"/>';
  			htmlString += '</a></li>';
  		}	
			count++;
		});			
	$('#images').html(htmlString + "</ul>");
	}
  </script>
</body>
</html>

This code will load the first 4 images from the flickr photos

What I want to do is randomly load 4 images so they won’t always be the same.

I tried this: http://www.ttmt.org.uk/flickr/flickr_ran.html

It’s not working and only seems to loop twice


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css">
	 *{
	   margin:0;
	   padding:0;
	 }
	 #images{
	   margin:30px;
	 }
	 #images ul{
	   list-style:none;
	 }
	 #images ul li{
 	   float:left;
 	   margin-left:10px;
 	 }
	</style>
</head>

<body>

  <div id="images"> </div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
  <script>
  	   	
	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=59807924@N02&lang=en-us&format=json&jsoncallback=?", displayImages);
	
	var count = 0;								
	var htmlString = "<ul>";
	
	function displayImages(data){
	  alert(count);
	  if(count <= 10){
		  var ranNum = Math.floor(Math.random()*($(data.items).size()));
		  var img = (data.items[ranNum].media.m).replace("_m.jpg", "_s.jpg");
		  var link  = data.items[ranNum].link;
		  var title = data.items[ranNum].title;
		  htmlString += '<li><a href="' + link + '" target="_blank">';
			htmlString += '<img src="' + img + '" alt="' + title + '" title="' + title + '"/>';
			htmlString += '</a></li>';
			count++;
			displayImages()
		}else{
		  $('#images').html(htmlString + "</ul>");
		}
	}
  </script>
</body>
</html>
2

So I have it working sort of

http://www.ttmt.org.uk/flickr/flickr_ran_work.html

Now it will load random images but they are not always individual.

How can I load 5 random images with each one individual


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css">
	 *{
	   margin:0;
	   padding:0;
	 }
	 img{
		border:0;
	 }
	 #images{
	   margin:30px;
	 }
	 #images ul{
	   list-style:none;
	 }
	 #images ul li{
 	   float:left;
 	   margin-left:10px;
 	 }
	</style>
</head>

<body>

  <div id="images"> </div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
  <script>
  	   	
	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=59807924@N02&lang=en-us&format=json&jsoncallback=?", displayImages);
	
	var count = 0;								
	var htmlString = "<ul>";
	
	function displayImages(data){
	  if(count <= 4){
		  var ranNum = Math.floor(Math.random()*($(data.items).size()));
		  var img = (data.items[ranNum].media.m).replace("_m.jpg", "_s.jpg");
		  var link  = data.items[ranNum].link;
		  var title = data.items[ranNum].title;
		  htmlString += '<li><a href="' + link + '" target="_blank">';
			htmlString += '<img src="' + img + '" alt="' + title + '" title="' + title + '"/>';
			htmlString += '</a></li>';
			count++;
			displayImages(data);
		}else{
		  htmlString += '</ul>'
		  $('#images').html(htmlString);
		}
	}
  </script>
</body>
</html>
3

I think I have an idea of how to do this but not how to execute it.

The JSON from flickr is supplied as an array, is that correct ?
I’m using the ranNum to pick out an image in this array


data.items[ranNum].link;

Couldn’t I then remove this image from the array, something like


data.items.splice(ranNum, 1)

How can I remove the ranNum element from the array?