ModX Snippet for a simple jQuery Flickr fade-in/out slideshow

Hello! I posted previously about a simple jQuery slideshow I created for accessing sets on Flickr. To use it at work, where we’re running ModX CMS, I turned it into an easily-reusable “snippet.” You can see it in action here.

Here’s what you do:

  1. Call jQuery in the head of your template. As of this writing I’m using 1.3;
  2. Upload the Flickr API library to your server and call it something like “flickr_api.inc.php”. It is a very slightly modified version of Rasmus Lerdorf’s PHP5 Flickr_API;
  3. Upload the jQuery slideshow to your server and call it something like “flickrslideshow.js”. An explination of the jQuery can be found in a previous post;
  4. Create a new snippet called “flickr-slideshow”. The contents of that snippet is bellow;
  5. And finally, call the snippet like so: [[flickr-slideshow? &photoset=`XXXXXXXXXXXXXXXXX`]], replacing, of course, the XXXs with the ID of the Flickr set.

The contents of the “flickr-slideshow” snippet:

<?php
 
// Get the photoset from the snippet call
$photoset = isset($photoset) ? $photoset : '';
 
// Your path to to the Flickr API library 
include_once("pathto/flickr_api.inc.php");
 
// Your API key	
$secrets = array('api_key'=>'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX','api_secret'=>'XXXXXXXXXXXXXXXX');
 
// Create an instance of the Flickr class, using your credentials
$flickr = new Flickr($secrets);
 
// Load the set we're looking for into an array
$photos = $flickr->photosetsGetPhotos($photoset);
 
// Start a counter
$counter = 1;
 
// Get the total number of photos in the set
$photocount = count($photos['photos']);
 
// A wrapper div, used by the jQuery
echo '<div class="flickrslideshow">';
 
// Now to loop through the photos in the set...
foreach($photos['photos'] as $photo) {
 
// Get the path to the image
$url = $flickr->getPhotoURL($photo,'');
 
// Get the image info
$info = $flickr->photosGetInfo($photo['id']);
 
// Another div for the jQuery
echo '<div>';
 
// Output the image tag, with the title as the alt
echo '<span class="image"><img src="'.$url.'" alt="'.$info['title'].'" /></span>';
 
echo '<p class="caption">';
 
// If the photo has a title, output that...
if ($info['title'] != ""){ echo '<strong>'.$info['title'].'.</strong> '; }
 
// and ditto for the descrition.
if ($info['description'] != ""){ echo ' '.$info['description'].' '; }
 
echo '</p>';
 
// Output the count
echo '<p class="controls">Image '.$counter.' of '.$photocount.' | ';
 
// Set up some numbers to use for the prev/next controls
$counterprev = $counter - 1;
$counternext = $counter + 1;
 
// Output the "previous" control
if ($counterprev > 0) { echo '<a href="#'.$counterprev.'" class="prev">Prev</a>'; }
 
// Output a separator, if needed
if ($counterprev > 0 && $counternext <= $photocount) { echo ' / '; }
 
// Output the "next" control
if ($counternext <= $photocount) { echo ' <a href="#'.$counternext.'" class="next">Next</a>'; }
 
echo '</p></div>';
 
// Iterate the counter
$counter++;
 
}
 
// Include the jQuery slideshow code (change to match the path on your server, of course)
echo '<script type="text/javascript" src="/pathto/flickrslideshow.js"></script>';
 
echo '</div>';
 
?>

This could be improved in a myriad of ways. For instance, the presentation layer could be abstracted out into ModX chunks and the jQuery could be made to insert the markup which is essentially redundant in the no-script view.

If you notice any errors please post in the comments. As always, I hope that seeing this helps you in your own coding!

Update, May 23 2012: I’m no longer working on a ModX site, so can no longer do much to support this code. It should be considered “as is.”

Posted May 2010

  • Nicholas

    Hello,

    Thanks for this. I’m having some trouble getting the slideshow to work, despite the links all working and the images getting loaded. Perhaps you’d like to document your latest working version? It seems like you’ve incorporated a lot more functionality on your example site.

    Thanks again. Great stuff.

  • Luki

    Hello,nthank You for sharing this code! Works like charm. nDo You know how this can be modified to use flickr groups pools ?nLucas

    • Anonymous

      Hi Luki,nnJust glancing quickly, I’m not seeing any group methods in Rasmus Lerdorf’s API. Hmm, surprising! I suppose one could add to the API if one had the inclination.nnBut you know what direction I would probably go? Flickr Groups have Atom feeds, yeah? I would look at pulling those in using simplepie/pieX (http://wiki.modxcms.com/index.php/PieX ) and then formatting the output to match what I need for the jQuery.

  • Alyainec

    Hi,
    thanks for sharing your knowledge, .
    This morning i tried to implement this Flickr on my modx revo server and followed your instrucions,
    But i am still getting this error Fatal error: Class ‘Flickr’ not found in /home/../../../core/cache/elements/modsnippet/17.include.cache.php on line 17.

    Is there anyway to fix this problem?
    Please help me.

    Thanks,
    Larry

  • Its working all fine on localhost but as soon as I put this ob live server this particular page shows blank page

    Please help its urgent

  • Q3 Academy Trust

    Fatal error: Class ‘Flickr’ not found in /home/sites/mywebsite.org.uk/public_html/core/cache/includes/elements/modsnippet/20.include.cache.php on line 17
    created snippet – correct paths to both php and js file

    placed snippet in web page,
    [[flickr-slideshow? &photoset=`72157629844439790`]]

    returns above error, any thoughts

    Api key and secret all inputted correctly

    • martyspellerberg

      Apologies, but I am no longer working with ModX and have no facility to test or debug. Best of luck.

This website is hosted by Media Temple. Thanks, guys!