www.webdeveloper.com
Results 1 to 4 of 4

Thread: Random images from flickr feed

  1. #1
    Join Date
    Feb 2009
    Posts
    124

    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
    Join Date
    Feb 2009
    Posts
    124
    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
    Join Date
    Feb 2009
    Posts
    124
    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?

  4. #4
    Join Date
    May 2012
    Posts
    1

    Jquery Animate image from Flickr API in Json format

    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">
    <!-- or change to another name but also change it in the css and Jquery functions-->


    </div>
    </body>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles