Solved

jQuery Flickr Loader

Posted on 2013-11-24
17
519 Views
Last Modified: 2013-11-24
I've created an image gallery that pulls in images from Flickr. Initially, I have 5 images loaded and have added a button underneath labelled "Load More". I basically need to adjust my code so that when I click the button it gives me the next 5 images (right now, it just loads the same 5 images). I tried creating a counter variable that adds on 5 each time the button is clicked but couldn't get it to work. Any help would be greatly appreciated. You can check out my code here: http://bit.ly/1aReYxl

Thanks in advance!
0
Comment
Question by:Adam
  • 9
  • 6
  • 2
17 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39673318
You have to do the paging yourself.  The feed will return all matches to your search so store the entire response in an array and when you want to load more just show the next 5.
0
 
LVL 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE earned 250 total points
ID: 39673332
Here's what i mean: http://jsbin.com/uYUmIwi/1/edit.  Scroll down to the end and click the "load more" button.
I added a function to loadmore and modified your loadFlikr function to assign the feed contents to an array.  The loadmore function then just uses this array to load the next items.

var index = 1;
var num = 5;
var photos = [];
function loadFlickr()  {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON(flickerAPI, {
    tags: "fart",
    tagmode: "any",
    format: "json"
  })
  .done(function (data) {
    photos = data.items;
    
    $.each(data.items, function (i, item) {
      
      var flickrGallery = '<div class="item clearfix">';
      flickrGallery += '<a class="image-link" href="' + item.media.m.replace('_m', '_b') + '">';
      flickrGallery += '<img src="' + item.media.m.replace('_m', '_n') + '" alt="' + item.title + '" /></a><div class="item-meta">' + item.title + '</div></div>';
      $('#container').append(flickrGallery);
      if (i === num) {
        index = i;
        return false;
      }
    });
    
    
  });
}

loadFlickr();

$( ".load-more" ).click(function() {
  loadMore();
});

function loadMore() {
  $.each(photos, function (i, item) {
    if (i >= index) {
    var flickrGallery = '<div class="item clearfix">';
    flickrGallery += '<a class="image-link" href="' + item.media.m.replace('_m', '_b') + '">';
    flickrGallery += '<img src="' + item.media.m.replace('_m', '_n') + '" alt="' + item.title + '" /></a><div class="item-meta">' + item.title + '</div></div>';
    $('#container').append(flickrGallery);
    }
    if (i === (index+num)) {
      index = i;
      return false;
    }
  });
}

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 39673338
You get all the pictures
As the API did not mention how to get only a part of them, you need to work with your own counter :
http://www.flickr.com/services/feeds/docs/photos_public/

Test page : http://jsfiddle.net/8xyeM/2/
var pics = [];
var counter = 0;
var maxi = 5;

function loadFlickr()  {
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    $.getJSON(flickerAPI, {
        tags: "fart",
        tagmode: "any",
        format: "json"
    })
        .done(function (data) {
            pics = data.items;
            addPicture(counter);
        });
}

loadFlickr();

function addPicture(mycounter) {
    for(var i=0;i<maxi&&pics[i+counter];i++) {
        var item = pics[i+counter];
                var flickrGallery = '<div class="item clearfix">';
                flickrGallery += '<a class="image-link" href="' + item.media.m.replace('_m', '_b') + '">';
                flickrGallery += '<img src="' + item.media.m.replace('_m', '_n') + '" alt="' + item.title + '" /></a><div class="item-meta">' + item.title + '</div></div>';
                $('#container').append(flickrGallery);
                if (i === 5) {
                    return false;
                }
    }
    counter += maxi;
}

$( ".load-more" ).click(function() {
    if(counter<pics.length) addPicture(counter);
});

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39673345
Leakim971 - Great minds think alike ;)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39673358
:))
0
 
LVL 1

Author Closing Comment

by:Adam
ID: 39673609
Thanks fellas. Didn't know who to gave the points to so I split them down the middle. Hope that's cool! Cheers.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39673635
That was the fairest thing to do. I'm happy that we didn't cause confusion and both said the same thing!
0
 
LVL 1

Author Comment

by:Adam
ID: 39673648
This may be a little late but I notice that after hitting "Load more" a few times on @tagit's example, it keeps loading the same images. On @leakim971's example the button just stops working. I'm assuming this has to do with some sort of limit on how many photos you can call from the Flickr API? Or am I overlooking something? If this is a much bigger issue, I can always open up a new question.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39673665
That feed only gives you the last 20 uploads for that particular tag.  If you want more than this then you'll need to look at the api and use a server side script to do the rest

http://www.flickr.com/services/api/flickr.photos.search.html
0
 
LVL 1

Author Comment

by:Adam
ID: 39673672
Crap! Alright, thanks @tagit. I'll have to look into it further.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39673674
Yeah i know... you'll need to get an api key, but the server side just needs to relay the request so it would be fairly simple
0
 
LVL 1

Author Comment

by:Adam
ID: 39673721
Thanks @tagit. Looking at it a bit closer though, it looks as if the way that the Flickr call is constructed using the API key is a bit different than the method I've been using. Unfortunately, I can't seem to get it to work using the approach you guys suggested. I'm also not that advanced with JS so it could be I'm just approaching it all wrong... :(

If you think you'd be able to lend a hand, I can open up a new question to give you some extra points.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39673733
Actually you can call the REST api!! : http://jsbin.com/uYUmIwi/3/edit

var index = 0;
var num = 5;
var photos = [];
function loadFlickr()  {
  index++;
  var flickerAPI = "http://api.flickr.com/services/rest/?jsoncallback=?";
  $.getJSON(flickerAPI, {
    tags: "fart",
    tag_mode: "any",
    format: "json",
    method:"flickr.photos.search",
    api_key:"2bfe2a46e8884e2bcd7cb20be75b7db6",
    extras:"url_m",
    page: index,
    per_page: num
  })
  .done(function (data) {
    console.dir(data);
    photos = data.photos.photo;
    
    $.each(data.photos.photo, function (i, item) {
      
      var flickrGallery = '<div class="item clearfix">';
      flickrGallery += '<a class="image-link" href="' + item.url_m + '">';
      flickrGallery += '<img src="' + item.url_m + '" alt="' + item.title + '" /></a><div class="item-meta">' + item.title + '</div></div>';
      $('#container').append(flickrGallery);
    });
    
    
  });
}

loadFlickr();

$( ".load-more" ).click(function() {
  loadFlickr();
});

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39673734
My last post should do the trick for you - no need for extra points :)
0
 
LVL 1

Author Comment

by:Adam
ID: 39673742
Wow, that was extremely generous of you! This is fantastic. Definitely does the trick. Thank you so much @tagit. I owe you one... ;)
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39673747
No problem :) thats what we're here for.  I still suggest you apply for your own api key as the one in the demo may expire at any time and/or be restricted somewhat.
0
 
LVL 1

Author Comment

by:Adam
ID: 39673749
Already done! I'll replace the one you used with mine. Thanks again.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now