OK folks I am just going to fire a question out into cyber space!
How can I display 3 random images with descriptions from a flickr account? I know there are galleries that can handle this but they seem to display one large image with small thumbnails at the bottom like this one for example Galleria
Now we grab a JSON object containing all the info about the photos requested:
$.getJSON(url, function (rsp) {....})
Inside the success function you build an image from the various bits and pieces that the JSON object contains, something like this (of course if you want to display more that 1 image you’ll have to put it in a loop):
Wrap the whole $.getJSON(…) block in a function and add something to the start of that to clear the images box
$("#images").html("");
for example. Then call the function on page load and on button click. Example from before updated to show this.
A much better way to do it would be to cache the original JSON object and just pick another three photos from there, that would mean you’re only making one request to Flickr.
I think the closest that Flickr gets to that kind of functionality is its little thumbnail view which is 75x75, you can get that by changing m.jpg to t.jpg.
You could emulate it with CSS overflow on the containers that the images are loaded in to
I added return false; after the moreBtn click loadImgs to stop the browser from jumping to the top if it is clicked after scrolling down the page and I removed javascript:void(0); on the href.
I changed “m.jpg” to “d.jpg” and am using overflow! Perfect solution thank you