Okay, I did post about this recently, but the problems still there.

 

Basically, if I set the code to loop through more pictures that actually exist, the filter navigation part breaks and doesn't show, although the photos show fine.

 

I think it's to do with the way I'm looping. This is my code. Any ideas? I didn't write this all by scratch, only some of it. I adapted it from a Tutorialzine tutorial.

 

$(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/users/50836806/media/recent/?access_token=50836806.0224374.e0eb19a57deb40fe89e915763b5f9604",
success: function(data) {

for (var i = 0; i < 11; i++) {
$("#stage").append("<li data-tags='" + data.data[i].filter +"' class='instagram-placeholder'><a href='#" + data.data[i].id +"'><img class='instagram-image " + data.data[i].filter +"' src='" + data.data[i].images.standard_resolution.url +"' /></a><div class='overlay' id='" + data.data[i].id +"'><img class='instagram-image' src='" + data.data[i].images.standard_resolution.url +"' /><a href='#page' class='close'>close</a><div class='controls'><h2>" + data.data[i].caption.text +"</h2></div></div></li>");   				


}

	$(document).ready(function(){

		var items = $('#stage li'),
			itemsByTags = {};

		// Looping though all the li items:

		items.each(function(i){
			var elem = $(this),
				tags = elem.data('tags').split(',');

			// Adding a data-id attribute. Required by the Quicksand plugin:
			elem.attr('data-id',i);

			$.each(tags,function(key,value){

				// Removing extra whitespace:
				value = $.trim(value);

				if(!(value in itemsByTags)){
					// Create an empty array to hold this item:
					itemsByTags[value] = [];
				}

				// Each item is added to one array per tag:
				itemsByTags[value].push(elem);
			});

		});

		// Creating the "Everything" option in the menu:
		createList('All Filters',items);

		// Looping though the arrays in itemsByTags:
		$.each(itemsByTags,function(k,v){
			createList(k,v);
		});

		$('#filter a').live('click',function(e){
			var link = $(this);

			link.addClass('active').siblings().removeClass('active');

			// Using the Quicksand plugin to animate the li items.
			// It uses data('list') defined by our createList function:

			$('#stage').quicksand(link.data('list').find('li'));
			e.preventDefault();
		});

		$('#filter a:first').click();

		function createList(text,items){

			// This is a helper function that takes the
			// text of a menu button and array of li items

			// Creating an empty unordered list:
			var ul = $('<ul>',{'class':'hidden'});

			$.each(items,function(){
				// Creating a copy of each li item
				// and adding it to the list:

				$(this).clone().appendTo(ul);
			});

			ul.appendTo('#container');

			// Creating a menu item. The unordered list is added
			// as a data parameter (available via .data('list'):

			var a = $('<a>',{
				html: text,
				href:'#',
				data: {list:ul}
			}).appendTo('#filter');
		}
	});				

}				
});
});

Edited May 11, 201214 yr by brightonmike

Maybe try:

success: function(data) {
  var count = data.data.length;
  if(count > 11) {
     count = 11
  }
   for (var i = 0; i < count; i++) {

Edited May 11, 201214 yr by Spitfire

It worked!

 

So that code is actually now counting the number of items returned, and the "if" statement is basically setting a minimum. Correct?

Yup, except the if statement sets a maximum of 11 (as that's what you had in there before).

Yeah, the code which you have given above is very good and it works properly so I have solved my error by applying this code in my project.

Oh sod off you ruddy spammers.