Using The flickr.galleries.getList API With Javascript

Question

Nathan Campos 23 Junior Poster

13 Years Ago

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

javascript

2 Contributors
1 Reply
284 Views
19 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2011-01-09T22:44:05+00:00

Nathan,

The code should work. All you have done is to add user_id=........, which is quite legal (moreover required) according to the API.

I can only think that this is a charset issue. The API makes it clear here that "The Flickr API expects all data to be UTF-8 encoded" and I assume this includes HTTP requests.

I'm not the greatest expert in character encoding, but here goes ....

If you created the page in eg. MS Word/Wordpad (or others) then there's a chance the UTF-8 requirement is not met. Try the following:

Open the page in Notepad (I use FirstPage 2000; Notepad++ is also very good)
Add <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> in the document head.
Save as... (new file name) to make a copy.

Now upload/test the new file.

With a bit of luck this will fix it. If not, then I'm fresh out of ideas.

Airshow