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:

Call jQuery in the head of your template. As of this writing I’m using 1.3;
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;
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;
Create a new snippet called “flickr-slideshow”. The contents of that snippet is bellow;
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>';
 
?>

<?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

Marty Spellerberg