5 Replies - 2059 Views - Last Post: 09 January 2011 - 08:12 AM

#1 nathanpc  Icon User is offline

  • SCIENCE!
  • member icon

Reputation: 112
  • View blog
  • Posts: 1,171
  • Joined: 31-July 09

Using The flickr.galleries.getList API With Javascript

Posted 08 January 2011 - 08:39 PM

I'm trying to adapt the opensource code from the page Drag and Drop in MobileSafari, here is a snippet of the code I've changed from:
	function jsonFlickrApi(data) {
		for (var i = 0; i < data.photos.photo.length; i++) {
			var p = data.photos.photo[i],
				img = document.createElement("img");
			img.src = 'http://farm'+p.farm+'.static.flickr.com/'+p.server+'/'+p.id+'_'+p.secret+'_m.jpg';
			img.className = "movable";
			img.xfmTX = Math.random()*(window.innerWidth-240);
			img.xfmTY = Math.random()*(window.innerHeig?        ndom()*(wsndo>b-his).hide();
                });
                // to w.Damg.Uidiv>
    p9bU15" tabtttttttttttord9;/ar lickrApi(data) {
		for (varT= dit		for (varT= dit		for (varT= dit		s a snippe i++) {
			var p = data.photos.photo[i],
				img = docte thahahahahahahaha`e= diqo			img.clasf-    t-ti HTf4g    <divcS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    
    <title>Edit - Stack Overflow</title>
    <link rel="stylesheet" type="text/css" href="http://sstatic.net/stackoverflow/all.css?v=dbbe6b2e88cb">
    <link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
    <link rel="apple-touch-icon" href="http://sstatic.net/stackoverflow/img/apple-touch-icon.png">
    <link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="http://sstatic.net/js/master.min.js?v=66d89fbc893d"></script>
    <script type="text/javascript">
    var imagePath='http://sstatic.net/stackoverflow/img/';
    var inboxUnviewedCount = 0;
    </script>
    
    <script src="http://sstatic.net/js/question.js?v=831020582915" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(function() {        
            $("#wmd-input").focus();
            $("#title").focus();
            $("#revisions-list").change(function() { window.location = '/posts/4628925/edit/' + $(this).val(); });        
        });        
    </script>


        <script type="text/javascript">gauth.informStackAuth('http://stackauth.com');</script>

</head>
<body class="ask-page">
    <noscript><div id="noscript-padding"></div></noscript>
    <div id="notify-container"></div>

    <div id="overlay-header"></div>
    <div id="custom-header"></div>
    <div class="container">
        <div id="header">
            <div id="portalLink">
                
                <a class="genu" href="http://stackexchange.com">Stack Exchange</a>
                
            </div>
            <div id="topbar">
                <div id="hlinks">
                    <span id="hlinks-user">
                  <a href="/users/recent/126353" title="you have no new replies"><span class="envelope-off"> </span></a> 
                  <a href="/users/126353/nathan-campos" >Nathan Campos</a> <a href="/privileges"><span class="reputation-score" title="your reputation; view reputation privileges">3,538</span></a><span title="11 silver badges"><span class="badge2"></span><span class="badgecount">11</span></span><span title="36 bronze badges"><span class="badge3"></span><span class="badgecount">36</span></span>
 <span class="lsep">|</span>

                  </span>
                  <span id="hlinks-nav">
                  <a href="/users/logout?returnurl=%2fposts%2f4628925%2fedit">log out</a>
 <span class="lsep">|</span>

                  </span>
                  <span id="hlinks-custom">
                  <a href="http://chat.stackoverflow.com">chat</a>
 <span class="lsep">|</span>
<a href="http://meta.stackoverflow.com">meta</a>
 <span class="lsep">|</span>
<a href="/about">about</a>
 <span class="lsep">|</span>
<a href="/faq">faq</a>
                  </span>
                </div>
                <div id="hsearch">
                    <form id="search" action="/search" method="get">
                    <div>
                        <input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search">
                    </div>
                    </form>
                </div>
            </div>
            <br class="cbt">
            <div id="hlogo">
                <a href="/">Stack Overflow</a>
            </div>
            <div id="hmenus">
                <div class="nav mainnavs">
                    <ul>
                        <li><a id="nav-questions" href="/questions">Questions</a></li>
                        <li><a id="nav-tags" href="/tags">Tags</a></li>
                        <li><a id="nav-users" href="/users">Users</a></li>
                        <li><a id="nav-badges" href="/badges">Badges</a></li>
                        <li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li>
                    </ul>
                </div>
                <div class="nav askquestion">
                    <ul>
                        <li >
                            <a id="nav-askquestion" href="/questions/ask">Ask Question</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    
        <div id="content">
            

<div class="ask-mainbar" id="mainbar">

    
    
    <form id="post-form" action="/posts/4628925/edit-submit/dd545981-5791-447f-b43e-20f0fb3e6d96" method="post">
        <input type="hidden" id="client-revision-guid" value="dd545981-5791-447f-b43e-20f0fb3e6d96">
        <input type="hidden" id="post-id" value="4628925">
        
<script src="http://sstatic.net/Js/wmd.js?v=90ee36ec1c46" type="text/javascript"></script>


<script type="text/javascript">
    
    var enableImageUploads = true; 
    
    $(function() { 
        editorReady('edit', true/* confirm navigation after wmd keypress */);
    });  
</script>


<div id="post-editor">

    <script type="text/javascript">
        $(function() {
            var map = { 'wmd-input':'#how-to-format', 'tagnames':'#how-to-tag', 'title':'#how-to-title' };
            var jInputs = $('#wmd-input, #tagnames, #title');
            var getHelp = function(i) { return $(map[$(i).attr('id')]); };

            jInputs.focus(function() {
                jInputs.each(function() {
                    getHelp(this).hide();
                });
                // to accommodate special css files, wrap the help in another div and animate that - remove wrapper when complete                
                getHelp(this).wrap('<div class="dno" />').show().parent().fadeIn('slow', function() { $(this).children().unwrap(); });
            });
        });
    </script>

    <div class="form-item" style="margin:0px; padding:0px">
        <table style="width:668px">
            <tr>
                <td style="width:50px"><label for="title">Title</label></td>
                <td style="padding-left:5px"><input id="title" name="title" type="text" maxlength="300" tabindex="100" class="ask-title-field" value="Using The flickr.galleries.getList API With Javascript">
                    <span class="edit-field-overlay">what's your programming question? be specific.</span>                    
                </td>
            </tr>
        </table>
    </div>

    
    <div id="wmd-container">
        <div id="wmd-button-bar"></div>
        <textarea id="wmd-input" name="post-text" cols="92" rows="15" tabindex="101">I'm trying to adapt the opensource code from the page [Drag and Drop in MobileSafari][1], here is a snippet of the code I've changed from:

	function jsonFlickrApi(data) {
		for (var i = 0; i < data.photos.photo.length; i++) {
			var p = data.photos.photo[i],
				img = document.createElement("img");
			img.src = 'http://farm'+p.farm+'.static.flickr.com/'+p.server+'/'+p.id+'_'+p.secret+'_m.jpg';
			img.className = "movable";
			img.xfmTX = Math.random()*(window.innerWidth-240);
			img.xfmTY = Math.random()*(window.innerHeight-240);
			img.xfmR = Math.random()*180-90;
			img.xfmS = Math.random()/2+0.5;
			img.setAttribute("style", "position: absolute; top: 0px; left: 0px;");
			document.body.appendChild(img);
			updateTransform(img);
		}
	}
	
	function init() {
		// touch event listeners
		document.addEventListener("touchstart", touchHandler, false);
		document.addEventListener("touchmove", touchHandler, false);
		document.addEventListener("touchend", touchHandler, false);
		document.addEventListener("touchcancel", touchHandler, false);
		
		// get the 10 latest "interesting images" from Flickr
		var flickrApiCall = document.createElement("script");
		document.body.appendChild(flickrApiCall);
		flickrApiCall.src = 'http://api.flickr.com/services/rest/?method=flickr.galleries.getList&api_key=856affa07586845de6fcbfb82520aa3e&per_page='+10+'&format=json';
	}


Into this at the last line(I've just changed it):
flickrApiCall.src = 'http://api.flickr.com/services/rest/?method=flickr.galleries.getList&api_key=856affa07586845de6fcbfb82520aa3e&user_id=39158660@N08&per_page='+10+'&format=json';

And I didn't get any image after I done this change. What should I do to correct this?

Best Regards,
Nathan Paulino Campos



PS: The user_id I've used was my own one

This post has been edited by nathanpc: 09 January 2011 - 04:54 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Using The flickr.galleries.getList API With Javascript

#2 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 162
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: Using The flickr.galleries.getList API With Javascript

Posted 09 January 2011 - 12:47 AM

1) In don't think setting flickrApiCall.src will work. I tried:
var js=document.createElement('script');
document.body.appendChild(js);
js.src="alert('hello');";


It doesn't work. Its better to extract the JSON data and pass it to jsonFlickrApi OR (if you trust flickr) then call eval (and also put that in a try-catch for EvalError).

2) And try the URL directly on the browser address bar. I don't see anything but an error message jsonFlickrApi({"stat":"fail", "code":1, "message":"User not found"}). It's probably something to do with not setting user_id parameter.
EDIT:

Quote

PS: The `user_id` I've used was my own one

Ah, I see. Then the issue might be point 1.

This post has been edited by Munawwar: 09 January 2011 - 12:51 AM

Was This Post Helpful? 1
  • +
  • -

#3 nathanpc  Icon User is offline

  • SCIENCE!
  • member icon

Reputation: 112
  • View blog
  • Posts: 1,171
  • Joined: 31-July 09

Re: Using The flickr.galleries.getList API With Javascript

Posted 09 January 2011 - 05:01 AM

View PostMunawwar, on 09 January 2011 - 06:47 AM, said:

1) In don't think setting flickrApiCall.src will work. I tried:
var js=document.createElement('script');
document.body.appendChild(js);
js.src="alert('hello');";


It doesn't work. Its better to extract the JSON data and pass it to jsonFlickrApi OR (if you trust flickr) then call eval (and also put that in a try-catch for EvalError).

Sorry, but I haven't understand what to do. Could you explain it a bit more please?
Was This Post Helpful? 0
  • +
  • -

#4 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 162
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: Using The flickr.galleries.getList API With Javascript

Posted 09 January 2011 - 06:08 AM

What I meant (in simple words) is use AJAX to call the URL and use eval to call the function.
Here is a snippet:
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","http://api.flickr.com/services/rest/?method=flickr.galleries.getList&api_key=856affa07586845de6fcbfb82520aa3e&user_id=39158660@N08&per_page='10&format=json",false);
xmlhttp.send(null);
xmlhttp.responseText;

alert(xmlhttp.responseText);
eval(xmlhttp.responseText); //Easy way of doing things


Was This Post Helpful? 1
  • +
  • -

#5 nathanpc  Icon User is offline

  • SCIENCE!
  • member icon

Reputation: 112
  • View blog
  • Posts: 1,171
  • Joined: 31-July 09

Re: Using The flickr.galleries.getList API With Javascript

Posted 09 January 2011 - 06:28 AM

I got an alert saying this:
jsonFlickrApi({"galleries":{"total":"0", "page":1, "pages":0, "per_page":1, "user_id":"39158660@N08", "gallery":[]}, "stat":"ok"})

And still no images. But let's think different now, there is anyway to tweak that code to make it display images from URLs stored in a Array instead of Flickr ones?
Was This Post Helpful? 0
  • +
  • -

#6 Munawwar  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 162
  • View blog
  • Posts: 457
  • Joined: 20-January 10

Re: Using The flickr.galleries.getList API With Javascript

Posted 09 January 2011 - 08:12 AM

I think is you didn't create any galleries. Probably you want to use flickr.people.getPublicPhotos.

If you want an array, then
function jsonFlickrApi(imagesArray) {
   for (var i = 0; i < imagesArray.length; i++) {
      img = document.createElement("img");
      img.src = imagesArray[i];
      ...
      ...
   }
}
//Call
jsonFlickrApi(['image1.jpg','image2.jpg','image3.jpg']);


If you are not going to use the flickr images, then you don't need the flickr api. You can use any JS image gallery/slideshow script out there.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1