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

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:

  1. Open the page in Notepad (I use FirstPage 2000; Notepad++ is also very good)
  2. Add <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> in the document head.
  3. 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

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.