StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODuplicate photos in instagram pagination
primarykey
Id
13524592
data
AcceptedAnswerId
0
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-11-23T07:16:18.150
FavoriteCount
0
LastActivityDate
2015-12-25T21:37:04.147
LastEditDate
2015-12-25T21:37:04.147
LastEditorUserId
2177402
OwnerUserId
1645504
ParentId
0
PostTypeId
1
Score
0
ViewCount
1090
LastEditorDisplayName
text
Body
<p>I'm trying to pull photos from specific tag. Found an awesome tutorial and I've managed to pull photos from Instagram with pagination.</p> <p>The problem I'm facing now is duplicate photos being displayed if it reaches to the end of the photos.</p> <p><strong>HTML Source</strong></p> <pre><code><!DOCTYPE html> <html> <head> <script src='http://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript' charset='utf-8'></script> <script src='javascripts/application.js' type='text/javascript' charset='utf-8'></script> <link rel='stylesheet' href='stylesheets/application.css' type='text/css' media='screen'> <title>Photo Stream </title> <meta name="description" content="Search for instagram images online."> <meta name="author" content="Omar Sahyoun"> </head> <body>  <h2 id="search">Photo Stream </h2> <div id='photos-wrap'> </div> <div class='paginate'> <a class='button' style='display:none;' data-max-tag-id='' href='#'>View More...</a> </div> </body> </html> </code></pre> <p><strong>Javascript File</strong></p> <pre><code>// Add trim function support for IE7/IE8 if(typeof String.prototype.trim !== 'function') { String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); } } // Instantiate an empty object. var Instagram = {}; // Small object for holding important configuration data. Instagram.Config = { clientID: 'xxxx', apiHost: 'https://api.instagram.com' }; // Quick and dirty templating solution. Instagram.Template = {}; Instagram.Template.Views = { "photo": "<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>" + "<span class='heart'><strong>{count}</strong></span><span class='comment'><strong>{count2}</strong></span>" + "<span class='avatar'><iframe src='//www.facebook.com/plugins/like.php?href={url}&amp;send=false&amp;layout=button_count&amp;width=40&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:80px; height:21px;' allowTransparency='true'></iframe></span>" + "</div>" }; Instagram.Template.generate = function(template, data){ var re, resource; template = Instagram.Template.Views[template]; for(var attribute in data){ re = new RegExp("{" + attribute + "}","g"); template = template.replace(re, data[attribute]); } return template; }; // ************************ // ** Main Application Code // ************************ (function(){ function init(){ bindEventHandlers(); } function toTemplate(photo){ photo = { count: photo.likes.count, count2: photo.comments.count, avatar: photo.user.profile_picture, photo: photo.images.low_resolution.url, url: photo.link }; return Instagram.Template.generate('photo', 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 a tag. Try searching for cats!"); } else { // Make sure tag is a string, trim any trailing/leading whitespace and take only the first // word, if there are multiple. tag = String(tag).trim().split(" ")[0]; } url = config.apiHost + "/v1/tags/" + tag + "/media/recent?callback=?&count=10&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.button', function(){ var tagID = $(this).attr('data-max-tag-id'); fetchPhotos(tagID); return false; }); // Bind an event handler to the `click` event on the form's button $('form#search button').click(function(){ // Extract the value of the search input text field. var tag = $('input.search-tag').val(); // Invoke `search`, passing `tag`. search(tag); // Stop event propagation. return false; }); } function showPhoto(p){ $(p).fadeIn(); } Instagram.App = { search: search, showPhoto: showPhoto, init: init }; })(); $(function(){ Instagram.App.init(); // Start with a search on cats; we all love cats. Instagram.App.search('hwplus'); }); </code></pre> <p>Please help me to find a way to disable the 'View More' button if photos have reached the end. And is there a way to add cache in JSON object and fetch variables from Javascript?</p> <p>Thanks and appreciate.</p>
Tags
<php><json><instagram>
Title
Duplicate photos in instagram pagination
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USIslam Q.
UserOwnerUserId
1. USlatt
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.