Feedback Follow Me on Twitter!

Creating a Flickr Carousel in Expression Engine

Flickr is still one of my favorite online services in terms of features and interface. The Uploadr tool also makes it an especially easy image-hosting solution for clients who are out in the field, taking their own photos, and updating them frequently.

Lately a few Expression Engine clients have needed to display their photostream dynamically in a way that’s compact and eye-catching, so the carousel format came to mind. Since the site isn’t live yet, here’s a sample:

View the Demo

It’s built on a mix of CSS, jQuery and a special module for EE. So how does it all tie together?

  1. jCarousel. First download the script and insert the proper links in your <head>
  2. eeFlickr. Go install this module for Expression Engine and read up on the custom tags it allows
  3. Thickbox. Install this script or substitute your lightbox script of choice, just make sure to reference it in the <a> tag below

Finally, insert the following code in your EE template: 

{exp:eeflickr:photosets_getPhotos photoset_id="72157617516363606" per_page="50"}
<ul id="mycarousel" class="jcarousel-skin-tango">
{eeflickr:photosets_getPhotos_loop}
{exp:eeflickr:photos_getInfo photo_id="{id}"}
<li><a href="http://farm{farm}.static.flickr.com/{server}/{id}_{secret}.jpg" title="{title}" class="thickbox"><img src="http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_s.jpg" alt="{title}" /></a></li>
{/exp:eeflickr:photos_getInfo}
{/eeflickr:photosets_getPhotos_loop}
</ul>
{/exp:eeflickr:photosets_getPhotos}

So long as you specify your photoset_id parameter in that first line, you can pull the latest from the photoset of your choice. Then specify a per_page parameter to determine how many photos to display at a time.

Note: you’ll need an API key to make the EE module work. You may also experience a delay between setting everything up and seeing the images display for the first time.

8 Responses {+}

  1. Jun 5
    4:30 am
    Dane"web development"Channel

    The demo is very helpful thanks for the link.

    {Reply}
  2. Jun 5
    1:04 pm
    Alfred

    Found your Carousel description through search engine. Was exactly, what I was looking for, thank you.

    Regards,
    Alfred (Germany)

    {Reply}
  3. Jun 9
    5:09 am
    Çizgi Film İzle

    Thanks for your great article

    {Reply}
  4. Jun 30
    6:08 pm
    Doug

    Hi Darren,

    Is this feature on your Mimbo Pro?

    Thank you,
    Doug

    {Reply}
  5. Jul 24
    11:45 am
    Andreas

    So uhm… Demo is down?!

    {Reply}

Leave a Response