Flickr Website Photo Gallery

This photo gallery works with any public Flickr photo set. Simply input your own photoset id, API key, and paste it anywhere that HTML is allowed. It's a great way to display photos on your website or blog.

var photoset = '72157631240409070'; <--- This is your photoset id.
var apikey = 'ce74fe26542211bf95f709b48eedd3'; <--- This is your API key.
var per_page = '5'; <--- This is how many photos you'd like to display (500 max)

Features:
•Photos popup in a lightbox-ish way.
•Photo titles are captioned on the opened photo.

You can get your photoset id by navigating to the set you want to share and looking at your browser address bar. The number following /Sets/ is your Photoset ID.

To get an API key go to: http://www.flickr.com/services/apps/create/apply/? and get one.

The code will NOT work with the current example API key

Next, just double check to be sure your set photos are public (A guestpass won't work) and your all set!

Edit: If your REALLY don't want your album public, you can create a guestpass and hide an iframe to the pass page providing access for the photos to display. The trick is, it HAS to be done on a page that will be viewed prior to the page your gallery is displayed. So... If your photos are on your homepage you have to go public, but if your photos are on a page accessed after your homepage (and you never link directly), then stick this code on your homepage:

<iframe src="GUEST PASS LINK" style="float:left;width:0px;height:0px;visibility:hidden"></iframe>

Preview:

Loading...

<div align=center><script language="javascript"> function toggle2(showHideDiv, switchTextDiv) { var ele = document.getElementById(showHideDiv); var text = document.getElementById(switchTextDiv); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "restore"; } else { ele.style.display = "block"; text.innerHTML = "collapse"; } } </script><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script><br /> <script type="text/javascript"> // Don't execute any code until the DOM is ready! $(document).ready(function(){ <!-----------------------------------------------> var photoset = '72157631240409070'; var apikey = 'ce74fe26542211bf95f709b48eedd3'; var per_page = '5'; <!-----------------------------------------------> // Construct the url from the photoset and api key var url = 'http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=' + apikey + '&photoset_id=' + photoset + '&per_page=' + per_page + '&format=json&jsoncallback=?'; $.getJSON(url, displayImages); function displayImages(data) { // Start putting together the HTML string var htmlString = ""; // Now start cycling through our array of Flickr photo details $.each(data.photoset.photo, function(i,item){ // Here's where we piece together the HTML htmlString += '<a id=displaytext href=javascript:toggle2(\'' + item.id + '\')>'; htmlString += '<img style="width:140px;height:140px;padding:0px;margin:5px;border-style:solid;border-color:black;border-width:5px;" src=http://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_q_d.jpg></a>'; htmlString += '<a id=displaytext href=javascript:toggle2(\'' + item.id + '\')><span id="' + item.id + '" style="display:none;position:fixed;top:0px;left:0px;background-color:black;text-align:center;width:100%;height:100%;">'; htmlString += '<img height=100% Style="border-width:0px;padding:0%;margin:0px;" src=http://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg><div style="position:absolute;bottom:10px;width:100%;"><font color=white style="font-weight:600;font-variant:small-caps;">' + item.title + '</font></div></span></a>'; }); // Pop our HTML in the #images DIV $('#images').html(htmlString + ""); // Close down the JSON function call } // The end of our jQuery function }); </script by Digital Brittany><div id="images" align=center><h1>Loading...</h1></div><a target=_blank href=http://www.digitalbrittany.com/2012/08/flickr-website-photo-gallery.html><img style="border:none;" src="http://farm9.staticflickr.com/8489/8232574975_1e61db4836_o_d.png"></a></div>

Like it? Consider making a donation:

Isn't It Funny!

We don't have cable. I'm not against TV, I just don't want to pay that much. We've gotten by over the years with Hulu. Recently, we even bought a Hulu Plus subscription. The only problem with using one account for the whole family is that Hulu compiles a list of recommended shows for you based on what you watch. When your watching a show and get to the last one in a series it automatically moves on to a recommended show. So, with two adults and two kids using the same account I have to make sure that the kid's don't end up watching something inappropriate.

Last night Peyton came downstairs very excited. She had found a new show. She said "People on the playground keep falling into the water". I was completely baffled and went upstairs to check it out. I looked at the TV just in time to see someone fall into the water. She grinned ear to ear and said "Isn't it funny!". Now I understood. She was watching a show called Wipeout were people have to make it through an obstacle course(playground) without getting knocked into the water. She was so proud of herself for finding a new show!

Ray Had A Baby!

So I took Ray, our doberman, outside the other day to find another dog in our yard. He was adorable and although he was dwarfed by Ray, he didn't seam to notice any size difference. While I was trying to check his tags Peyton came to the door. She looked outside and what did her little 3 year old mind tell her?

"Ray had a baby!!!"

All Of Them

The other day we took the kids fishing. While driving around searching for the best fishing spot we passed three cemeteries. When we passed the first one I asked Brenton "How many people do you think are dead in there". He thought about it for a while and them gave me some ridiculous number. I then explained that it's a trick question and he should just say "All of them". I then got to test him out and he answered correctly on the next two.

Apparently, even though Peyton wasn't participating in our conversation in the car, she was paying very close attention...

Yesterday I asked her "How many kittens do you think Karma is going to have?" She thought about it for a second and then said "All of them!".

Embeddable Facebook Page Photo Gallery

I FINALLY got it! I don't even want to admit the time it has taken me to make this code.... But it is finally done! It is working for me in both IE and Google Chrome. Below you'll find the code to embed any public Facebook Page photo album into your webpage. Simply edit this section: