Fotorama Slide Show and phpSmug

Fotorama Web Site Home Page


As a part of my web site moving and redesign I wanted to include a slideshow at the top of the home page.

After researching and thinking about writing one of my own I found Fotorama which is a jQuery based slideshow framework that allows for many different types of slideshows with a ton of options. Take a look at the website and the examples, they are amazing.

So I broke the process down into a handful of steps and iterated up to the dynamic slideshow that it is now.

The first step was getting a version running on a test page with static content hard-coded into the page. There was a bit of tweaking here and there along with coming up with the idea to have a design that resembles a new window "Window" with Hide and Fullscreen buttons.

The next step was figuring out how to dynamically get the picture URLs and Captions directly from SmugMug so that anytime I update SmugMug the slidesow on my website would also be updated. For that I chose to use phpSmug which is a wrapper class for the SmugMug API written and maintained by Colin Seymour.

I ran into 2 issues with implementing phpSmug, the biggest of which was that it would randomly error out with a "CURL Error 7" which was causing my website to load very slowly and breaking the slideshow. I have addressed this issue by using the caching built into phpSmug combined with writing the parsed data necessary for the slideshow into a MySQL table. Anytime the SmugMug API is not available and the phpSmug cache has expired the data for the slideshow will be pulled from the database.

Here is the code:

@mysql_select_db($databaseor die"Unable to select database");
/* Last updated with phpSmug 3.0 */
require_once"/path/to/phpSmug.php" );
try {
  $code = "SmugMug API";
  // My API Key and App Name from SmugMug Admin Panel
  $f = new phpSmug"APIKey=api_key""AppName=app_name_and_version" );
  // Enable disk based caching with expires in 1 hour
  $f->enableCache("type=fs""cache_dir=/path/to/phpsmugcache""cache_expire=3600" );
  // Set timeout
  $f->req->setConfig(array'timeout' => 2));
  // Login Anonymously
  // Get images from Portfolio
  $images = $f->images_get"AlbumID=album_id""AlbumKey=album_key""Heavy=1" );
  $images = ( $f->APIVer == "1.2.2" ) ? $images['Images'] : $images;
  $i = 0;
  foreach ( $images as $image ) {
    if ($i != 0) {
      $query .=  ",\n";
      $output .=  ",\n";
    // Create SQL String
    $query .= "('','".$image['X2LargeURL']."','".$image['TinyURL']."','".htmlentities($image['Caption'],ENT_QUOTES)."')";
    $output .= "{img: \"".$image['X2LargeURL']."\", thumb: \"".$image['TinyURL']."\", caption: \"".htmlentities($image['Caption'])."\"}";
  // Empty Out Table
  mysql_query('TRUNCATE TABLE '.$tablenameor die(mysql_error());
  // Populate Table
  mysql_query("INSERT INTO cache (`id`, `x2largeurl`, `tinyurl`, `caption`) VALUES ".$query);
} catch ( Exception $e ) {
  $code = "{$e->getMessage()} (Error Code: {$e->getCode()})";
  //Read from Database
  $query="SELECT * FROM ".$tablename;
  while ($i < $num) {
    if ($i != 0) {
      $output .=  ",\n";
    // Create SQL String
    $output .= "{img: \"".$X2LargeURL."\", thumb: \"".$TinyURL."\", caption: \"".$Caption."\"}";
  try { console.log('code: <?php echo $code ?>'); } catch(err) { }
  // Load Fotorama.js script
    var portfolioBuildFlag = false;
    jQuery('#main').prepend('<article class="fotoramaWrapper"><div class="portfolioHeader gradient">Dave Nelson's Portfolio <div><span id="portfolioHide">[ Hide ]</span> <span id="portfolioFullScreen">[ Fullscreen ]</span></div></div><div id="myPortfolio"></div></article>');
    jQuery('#portfolioFullScreen').on('click',function() {
      if(jQuery("#myPortfolio").is(":hidden") || portfolioBuildFlag === false) {
    function portfolioBuild() {
        data: [
          echo $output."\n";
      portfolioBuildFlag = true;
    function portfolioCookie(state) {
      if (state === "hidden") {
        document.cookie = "portfolioHide=true";
      } else {
        document.cookie = "portfolioHide=false";
    function portfolioToggle() {
      if(jQuery("#myPortfolio").is(":hidden") || portfolioBuildFlag === false) {
      } else {
    function portfolioShow() {
      if (portfolioBuildFlag === false) {
      jQuery('#portfolioHide').text('[ Hide ]');
    function portfolioHide() {
      jQuery('#portfolioHide').text('[ Show ]');
    function portfolioInit() {
      var portfolioHide = document.cookie.replace(/(?:(?:^|.*;\s*)portfolioHide\s*\=\s*((?:[^;](?!;))*[^;]?).*)|.*/"$1");
      if (portfolioHide != "true") {
      } else {
        jQuery('#portfolioHide').text('[ Show ]');
  }); // Load Fotorama.js script

}); // document ready

Leave a Reply

Your email address will not be published. Required fields are marked *