javascript - Getting location data from an image (Instagram/JS) -


i've been working on side project , have hit roadblock. can search through tags , display picture results fine, i'd put details below each picture, location information. i'm doing in javascript, , commented out lines believe need adjusted, comment marks removed not pictures show up. tips? json object printed call instagram returns data:

object   - data: array[20]     - 0: object       + caption: object       + comments: object         created_time: "1334402906"         filter: "nashville"         id: "169306311223447303_5913362"       - images: object         + low_resolution: object         - standard_resolution: object           height: 612           url: "http://distilleryimage7.instagram.com/f3f8d7b2862411e19dc71231380fe523_7.jpg"           width: 612         + thumbnail: object         + likes: object           link: "http://instagr.am/p/jzfzfqti8h/"           location: object           tags: array[1]           type: "image"           user: object

and code looks this:

// instantiate empty object. var instagram = {};  // small object holding important configuration data. instagram.config = {   clientid: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',   apihost: 'https://api.instagram.com' };   // ************************ // ** main application code // ************************ (function(){   var phototemplate, resource;    function init(){     bindeventhandlers();     phototemplate = _.template($('#photo-template').html());   }    function totemplate(photo){     photo = {       count: photo.likes.count,       avatar: photo.user.profile_picture,       photo: photo.images.low_resolution.url,       url: photo.link       //location: photo.location  <--------------------------this line.     };      return phototemplate(photo);   }    function toscreen(photos){     var photos_html = '';     //var photos_location = ''; <------------------------this line.      $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)                     .fadein();      $.each(photos.data, function(index, photo){       photos_html += totemplate(photo);       //photos_location += totemplate(photo); <-----------------this line.     });      $('div#photos-wrap').append(photos_html);     //$('div#photos-wrap').append(photos_location) <------------------this line.    }     function generateresource(tag){     var config = instagram.config, url;      if(typeof tag === 'undefined'){       throw new error("resource requires tag. try searching cherry blossoms.");     } else {       // make sure tag string, trim trailing/leading whitespace , take first       // word, if there multiple.       tag = string(tag).trim().split(" ")[0];     }      // configures url search pictures fit tag description.     url = config.apihost + "/v1/tags/" + tag + "/media/recent?callback=?&client_id=" + config.clientid;      return function(max_id){       var next_page;       if(typeof max_id === 'string' && max_id.trim() !== '') {         next_page = url + "&max_id=" + max_id;       }       return next_page || url;     };   }    function paginate(max_id){     $.getjson(generateurl(tag), toscreen);   }    function search(tag){     resource = generateresource(tag);     $('.paginate a').hide();     $('#photos-wrap *').remove();     fetchphotos();   }    function fetchphotos(max_id){     $.getjson(resource(max_id), toscreen);   }    function bindeventhandlers(){     $('body').on('click', '.paginate a.btn', function(){       var tagid = $(this).attr('data-max-tag-id');       fetchphotos(tagid);       return false;     });      // bind event handler `submit` event on form     $('form').on('submit', function(e){        // stop form fulfilling destinty.       e.preventdefault();        // extract value of search input text field.       var tag = $('input.search-tag').val().trim();        // invoke `search`, passing `tag` (unless tag empty string).       if(tag) {         search(tag);       };      });    }    function showphoto(p){     $(p).fadein();   }    // public api   instagram.app = {     search: search,     showphoto: showphoto,     init: init   }; }());   $(function(){   instagram.app.init();    instagram.app.search('takoyaki'); });

this works, long photo has location data, not of them do

css

body {   background: #e3e8ec url(http://grammy.eduvoyage.com/images/tile.png) repeat 50% 0; } #search {   height: 40px;   padding: 10px;   text-align: center;   position: fixed;   width: 240px;   margin: 0 auto;   z-index: 100;   left: 50%;   top: 0;   margin-left: -130px;   border-radius:0 0 5px 5px; }  .search-wrap {   background: white;   line-height: 30px;   height: 30px;   text-align: left;   border-radius: 3px;   width: 230px;   margin: 0;   border: 1px solid #ddd; }  #photos-wrap {   width: 810px;   margin: 70px auto 40px auto;   position: relative;   z-index: 1; }  .photo .avatar {   width: 40px;   height: 40px;   padding: 2px;   position: absolute;   bottom: 11px;   right: 8px;   background: white; }  .photo  {   margin-bottom: 20px;   float: left;   position: relative;   width: 250px;   height: 250px;   border-radius: 5px;   background: white;   padding: 5px;   margin: 5px;   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }  .photo .heart {   height: 16px;   position: absolute;   left: 13px;   bottom: 16px;   padding: 0 5px 0 22px;   font-size: 12px;   font-weight: bold;   line-height: 16px;   border-radius: 2px;   border: 1px solid #ddd;   background: white url('http://grammy.eduvoyage.com/images/fav.png') no-repeat 2px 0; }  .paginate {   display: block;   clear: both;   margin: 10px;   text-align: center;   margin: 0 auto;   padding: 20px 0;   height: 100px; }  .location {     position: relative;     top: -48px;     left: 7px;     border-style: solid;     border-width: 1px;     border-radius: 3px;     background-color: white; }

html 

      <div id='photos-wrap'>       </div>        <div class='paginate'>         <a class='btn'  style='display:none;' data-max-tag-id='' href='#'>view more...</a>       </div>     </div>   </div> </div>  <script type="text/template" id="photo-template">   <div class='photo'>     <a href='<%= url %>' target='_blank'>       <img class='main' src='<%= photo %>' width='250' height='250' style='display:none;' onload='instagram.app.showphoto(this);'/>     </a>     <img class='avatar' width='40' height='40' src='<%= avatar %>' />     <span class='heart'><strong><%= count %></strong></span>     <span class='location'><%= longitude %> <%= latitude %></span>   </div> </script>

javascript

// instantiate empty object. var instagram = {};  // small object holding important configuration data. instagram.config = {   clientid: '4895197dfce340cb9004101ce6ae9215',   apihost: 'https://api.instagram.com' };   // ************************ // ** main application code // ************************ (function(){   var phototemplate, resource;    function init(){     bindeventhandlers();     phototemplate = _.template($('#photo-template').html());   }    function totemplate(photo){     photo = {       count: photo.likes.count,       avatar: photo.user.profile_picture,       photo: photo.images.low_resolution.url,       url: photo.link,       longitude: photo.location && photo.location.longitude,       latitude: photo.location && photo.location.latitude     };      return phototemplate(photo);   }    function toscreen(photos){     var photos_html = '';      $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)                     .fadein();      $.each(photos.data, function(index, photo){       photos_html += totemplate(photo);     });      $('div#photos-wrap').append(photos_html);   }    function generateresource(tag){     var config = instagram.config, url;      if(typeof tag === 'undefined'){       throw new error("resource requires tag. try searching cats.");     } else {       // make sure tag string, trim trailing/leading whitespace , take first        // word, if there multiple.       tag = string(tag).trim().split(" ")[0];     }      url = config.apihost + "/v1/tags/" + tag + "/media/recent?callback=?&client_id=" + config.clientid;      return function(max_id){       var next_page;       if(typeof max_id === 'string' && max_id.trim() !== '') {         next_page = url + "&max_id=" + max_id;       }       return next_page || url;     };   }    function paginate(max_id){         $.getjson(generateurl(tag), toscreen);   }    function search(tag){     resource = generateresource(tag);     $('.paginate a').hide();     $('#photos-wrap *').remove();     fetchphotos();   }    function fetchphotos(max_id){     $.getjson(resource(max_id), toscreen);   }    function bindeventhandlers(){     $('body').on('click', '.paginate a.btn', function(){       var tagid = $(this).attr('data-max-tag-id');       fetchphotos(tagid);       return false;     });      // bind event handler `submit` event on form     $('form').on('submit', function(e){        // stop form fulfilling destinty.       e.preventdefault();        // extract value of search input text field.       var tag = $('input.search-tag').val().trim();        // invoke `search`, passing `tag` (unless tag empty string).       if(tag) {         search(tag);       };      });    }    function showphoto(p){     $(p).fadein();   }    // public api   instagram.app = {     search: search,     showphoto: showphoto,     init: init   }; }());  $(function(){   instagram.app.init();    // start search on cats; love cats.   instagram.app.search('cats');   });

on jsfiddle


Comments

Post a Comment

Popular posts from this blog

php - cannot display multiple markers in google maps v3 from traceroute result -

i'm newbie in php mysql , google maps v3. have problems in google maps v3. made traceroute web based , map traceroute's result in google maps v3 final project of college education. have try many tutorials didn't work. have tried tutorials in forum nothing worked. problem cannot display multiple markers got location data database. maybe because i'm newbie , not know how do. confuse looping show markers. here code <?php error_reporting(e_all ^ (e_notice)); ini_set('max_execution_time', 360); $enable_log_user = false; global $ip, $host_name, $host_ip; $host = @$_post['host']; $trace = @$_post['trace']; $self = $_server['php_self']; include("phpsqlajax_dbinfo.php"); $connection = mysql_connect ('127.0.0.1', $username, $password); if (!$connection) { die('not connected : ' . mysql_error());} $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ('can\'t use db :
Read more

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

i have detailsview control on page used edit various fields of record, works in respect. i looking way add 1 column (and if works, why not more) right, absolutely read-only, show same fields of record comparison purposes. i aware there no obvious way such thing out of box detailsview . have looked other controls (transposed gridview , recommended formview , listview ), nothing satisfies. have special data binding setup using detailsview , can't out of without losing features. anyone on how "hack in" additional columns (for display only) on detailsview ? the solution have now, use second detailsview , visible set false in aspx. in code, make sure databind hidden detailsview hosts data third column first, initial detailsview named itemdetails . and in item created event, pass third column html rendering of hidden controls (in last code block) : protected void itemdetails_itemcreated(object sender, eventargs e) { if (dataite
Read more

javascript - firefox memory leak -

i have following script (i use raphaeljs also) draws circle, waits 1 second, draws circle again, etc (you can copy paste - functional, need include raphael raphaeljs.com): <div id="holder"> </div> <script src="raphael.js" type="text/javascript"></script> <script> var paper = raphael(10, 50, 320, 200); var rad = math.pi / 180; var finangle = 0; function sector(cx, cy, r, startangle, endangle, params) { var x1 = cx + r * math.cos(-startangle * rad), x2 = cx + r * math.cos(-endangle * rad), y1 = cy + r * math.sin(-startangle * rad), y2 = cy + r * math.sin(-endangle * rad); return ["m", cx, cy, "l", x1, y1, "a", r, r, 0, +(endangle - startangle > 180), 0, x2, y2]; } var path = sector(100,100,50,0,180); var arc = paper.path(path); function draw() { path = sector(100,100,50,0,finangle);
Read more