Many people struggle with installing and setting up third-party gallery applications and although there are a couple popular image galleries that most web-hosts offer as an easy-to-install application, they can still be frustrating and pose many security issues for the inexperienced.
With the growing popularity of using Flickr to manage photos, more and more people are looking for an easy way to display these photos on their website.
After some playing around, I’ve settled with the phpFlickr and Lightbox combination to nicely display photo galleries on a website. PhpFlickr is a class written by Dan Coulter to act as a wrapper to Flickr’s API, and lightbox is a very simple and elegant way to display photos on a page. This tutorial will teach you how to quickly setup a photo gallery with phpflickr and lightbox on your own website.
So what do you need?
1. A flickr account (a free one with 100mb monthly upload is fine for most). You will also need to know your user ID (usually in the format xxxxxxxx@Nxx)
2. Latest version of phpflickr: can be downloaded here
3. Lightbox 2 java script: downloaded here
4. Obviously, your photos.
What to do:
1. Upload the photos you want to display to your Flickr account. Organize the photos into Sets to best manage the separation of “galleries.”
2. Install phpFlickr and Lightbox by easily extracting them to the directory of your choice (ie. /photos/ on your website). Both phpFlickr and Lightbox are ready to go out-of-the-box so you won’t need to play around with them too much if you don’t want to.
3. Include the necessary content in your php file.
For lightbox, the following will go in the header section of your php file:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
and
<link rel="stylesheet" href="css/lightbox.css"
type="text/css" media="screen" />
For phpFlickr, add the following code in the header section of your php file:
<?php
require_once("phpFlickr/phpFlickr.php");
$f = new phpFlickr("b16911dd0ec59f16ed66e80711edbdaf");
$user = "xxxxxxxx@Nxx";
$ph_sets = $f->photosets_getList($user);
?>
Where the user value can be found in your flickr account.
Now we are ready to use phpFlickr to import and Lightbox to display our pictures from our Flickr sets. Here’s a simple bit of code I use that imports and displays the photos:
<div id="gallery">
<?php foreach ($ph_sets['photoset'] as $ph_set): ?>
<div class="photosets">
<p><h2><?php print $ph_set['title']; ?></h2></p>
<?php $photoset_id = $ph_set['id'];
$photos = $f->photosets_getPhotos($photoset_id);
foreach ($photos['photoset']['photo'] as $photo): ?>
<div class="photos">
<a rel="lightbox"
href="<?= $f->buildPhotoURL($photo, 'medium') ?>"
title="<?= $photo['title'] ?>">
<img src="<?= $f->buildPhotoURL($photo, 'square') ?>"
alt="<?= $photo['title'] ?>" title="<?= $photo['title'] ?>" />
</a>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
The CSS I use for this is:
#gallery {
position: relative;
float: left;
width: 600px;
padding: 0px 15px 10px 15px;
}
.photos {
position: relative;
float: left;
display: block;
padding-bottom: 10px;
}
.photosets {
clear: both;
padding-top: 1px;
}
.photosets h2 {
color: #000;
}
The full documentation on both lightbox and phpFlickr is available in their downloaded packages. They are both quite powerful. The example given here is just a simple way to grab all the Sets in your Flickr account and display them in a gallery format.
I recently added this to the site designbyroeland.com. You can check out the example of how it will look here. Simple. Elegant.
EDIT:
If you’re looking to only display one set, this can be done with the following:
<?php $photos = $f->photosets_getPhotos('xxxxxxxxxxxxxxxxx'); ?>
<?php foreach ($photos['photo'] as $photo): ?>
<div class="photos">
<a rel="lightbox" href="<?= $f->
buildPhotoURL($photo, 'medium') ?>"
title="<?= $photo['title'] ?>">
<img src="<?= $f->buildPhotoURL($photo, 'square') ?>"
alt="<?= $photo['title'] ?>" title="<?= $photo['title'] ?>" />
</a>
</div>
<?php endforeach; ?>
Where the xxxx’s are replaced with the set ID that you can find in your flickr URL for that set. Feel free to republish this guide if you wish, but please try to link back if possible. Thanks!
July 18th, 2009 at 6:28 pm
I’m trying to add this, but I keep getting an error on the foreach (I think it’s line “foreach ($photos['photo'] as $photo):” I suspect this is because I can’t find ‘photo’ defined anywhere?
The error I get is:
Warning: Invalid argument supplied for foreach() in /home/xxx/public_html/gallery.php on line 91
Thanks!
July 20th, 2009 at 10:02 am
Thanks!
What would be the code to import one specific set?
- Johan
August 6th, 2009 at 8:41 am
@Clare
Sorry for taking so long to reply, I’ve been offline for a while – trying to enjoy the summer
The foreach() defines $photo on the fly there. You would be receiving this error if $photos['photo'] is not an array, as foreach() requires an array. Are you able to paste your code?
—
@johan
I edited my post to include the code for importing one specific set. It can be found at the end of the post.
August 15th, 2009 at 6:25 pm
Hey Adam,
Check your syntax on line 4 of your edit. Seems a rel=”nofollow”> made it in there somehow.
August 15th, 2009 at 6:32 pm
Thanks, JeffreyATW.
I had switched plugins to Code Markup by Bennett McElwee to display code in posts. It’s nice but was still getting used to it.
Not sure how it got in there, but thanks for the heads up – it should be fixed now.
August 18th, 2009 at 6:11 pm
If you’re getting the same error as Clare -
“Warning: Invalid argument supplied for foreach() in …”
try using instead of
foreach ($photos['photo'] as $photo):
this code:
foreach ($photos['photoset']['photo'] as $photo):
that did it for me.
August 18th, 2009 at 9:21 pm
Thanks for the heads up Andrew!
August 20th, 2009 at 4:30 pm
Hi, this is a great tutorial but it seems that I have problem getting it work.
This is the error that I got:
Warning: Invalid argument supplied for foreach()
which is this line: foreach ($ph_sets['photoset'] as $ph_set):
Thanks for the help.
August 24th, 2009 at 12:45 pm
Hi Adam,
First of all, Thanks for the great method of integrating Flickr. Everything works out for me, except for the lightbox. Any thoughts after looking at my source code? Thanks!
Patrick
August 24th, 2009 at 12:55 pm
@Eric : see Clare’s and Andrew’s comments above, this issue was addressed.
@Patrick: all your included files look alright. I will check in more detail later, but it does look alright at first glance. Are you using some sort of CMS? Perhaps it’s an issue with it handling the javascript.
August 24th, 2009 at 1:51 pm
Thanks for the prompt response. I’m not using a CMS. The site is static for now.
August 25th, 2009 at 4:06 pm
Anyone else having problems with the lightbox not working? Everything else works fine.
September 10th, 2009 at 8:42 am
Hi
I’ve got all of this to work, after using Andrew’s advice above – but would love to know how to add the description as the alt tag rather than just repeating the title.
I have tried replacing ['title'] with ['description'] but just get errors.
foreach ($photos['photoset']['photo'] as $photo):?>
<a rel=”lightbox”
href=”buildPhotoURL($photo, ‘medium’) ?>”
title=”">
<img src=”buildPhotoURL($photo, ’square’) ?>”
alt=”" title=”" />
Cheers
September 10th, 2009 at 8:44 am
Sorry – the code didnt get digested properly:
foreach ($photos['photoset']['photo'] as $photo):?><a rel="lightbox"
href="buildPhotoURL($photo, 'medium') ?>"
title="">
<img src="buildPhotoURL($photo, 'square') ?>"
alt="" title="" />
September 10th, 2009 at 8:45 am
Oh bother
code still not getting through the input. Not done this before.
October 20th, 2009 at 9:39 pm
I can’t get this to work. This is the error I’m getting:
Fatal error: Call to a member function photosets_getPhotos() on a non-object in…
Any ideas?
October 30th, 2009 at 10:57 am
@J Can you provide the page you are trying to implement this on?
November 13th, 2009 at 9:42 pm
I also had a problem with my LightBox not working right, then I realized the files I extracted where not be called correctly
ORIGNIAL—-
EDIT– (in my case)
Also I had to use andrews fix
foreach ($photos['photoset']['photo'] as $photo):
Otherwise everything works great! Thank you adam, if you need t-shirts printed I’ll be sure to hook you up!
November 13th, 2009 at 9:52 pm
Thanks Antonio.
I will add Andrew’s fix into the actual post to avoid confusion.
Believe it or not I’m actually in the market for some T-shirt printing. I’ll ping you an email on your site.
Cheers.
January 18th, 2010 at 4:06 am
Hey,
Great post. I’m having a bit of trouble with it though…
All the images show on the page as instead of the image.
I’m wondering, do you need to have a Flickr API key for this to work?
Just read about something like this on the phpFlickr documentation.
Cheers,
Andy
January 22nd, 2010 at 3:33 pm
Thanks for the great tutorial.
I got everything working perfect, but I would really like to activate the “Next” and “Previous” buttons to click through the images. Is there some code that I can add to make this work?
March 6th, 2010 at 6:17 pm
If you want the next and previous to work per album/set add
rel=”lightbox[]”
If you want the next and previous to work for the whole photo stream add
rel=”lightbox[flickr]“
March 6th, 2010 at 6:19 pm
My code was removed for the set. It should say “print $ph_set['id'];” between an open and close php tag