SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Random images from flickr feed

    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>

  2. #2
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •