Random images from flickr feed

**ttmt** · 02-22-2011 11:36 AM

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

Code:

<!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

Code:

<!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>

**ttmt** · 02-22-2011 03:07 PM

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

Code:

<!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>

**ttmt** · 02-22-2011 04:34 PM

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

Code:

data.items[ranNum].link;

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

Code:

data.items.splice(ranNum, 1)

How can I remove the ranNum element from the array?

**flavius.ioan69** · 05-30-2012 08:05 AM

JQUERY + JSON + FLICKR API

$(document).ready(function () {
buscarimagens();
setInterval("slideSwitch()", 3000);
});

function imagens() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
id: "your ID",
tags: "your Tag",
tagmode: "any",
format: "json"
},
function (dados, status) {

$.each(dados.items, function (i, item) {

$("<img/>").attr("src", item.media.m).appendTo("#slideshow");

if (i == 3) return false;
});

$('#slideshow img:first').addClass('active'); //set class:active to the first image
});
}

//Animaion
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')

.animate({ opacity: 1.0 }, 1000, function () {
$active.removeClass('active last-active');
});
}

CSS - Animation

<style type="text/css">

#slideshow {
position:relative;
height:300px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
width: 250px;
height: 300px
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
</style>

Html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<body>
<div id="slideshow">


</div>
</body>

Thread: Random images from flickr feed

Thread Tools

Display

Random images from flickr feed

Jquery Animate image from Flickr API in Json format

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions