Integrating Pretty Photo With Awkward Showcase

Overview

The following provides an example of integrating prettyPhoto into in an Awkward Showcase slideshow.

The Problem

I was tasked with creating a slideshow using the Awkward Showcase plugin for jQuery. I wanted a visitor to be able to click on the slideshow images to open a larger version displayed with prettyPhoto.

The problem I ran into was Pretty Photo would only attach to the first slideshow panel. Any subsequent panels a user paged to would open linked images in a new window instead of modal Pretty Photo window. Furthermore, if a visitor paged to a panel and then paged back to the first panel, the first panel would lose its Pretty Photo functionality.

The reason for this seems to be that the Awkward Showcase rewrites the DOM and thereby unbinds any previously attached events.

The Fix

The fix for this is somewhat limited. We can use the Awkward Showcase's custom_function setting to place a callback to a function which will bind the Showcase to any Pretty Photo links within the panel. This works well if you don't need Pretty Photo to display galleries with multiple images.

In the example below, the inititalization of Pretty Photo and the Showcase have been moved into functions. The function initPrettyPhoto() is our callback function which will fire whenever a Showcase panel has been paged back or forth.

The initShowcase function initializes the Awkward Showcase slideshow. Placing it in a function makes it easier to integrate with AJAX callbacks. Note that we've set the custom_function callback to 'initPrettyPhoto' and also called the initPrettyPhoto() function once to insure any Pretty Photo events are attached to the first panel.

In this example we also called initPrettyPhoto() immediately after defining it to initialize the showcase when the page loads.

$(document).ready(function() {

  /*
   * Initialize prettyPhoto images.
   */
  initPrettyPhoto = function() {
    $("a[rel^='prettyPhoto']").prettyPhoto();   
  }

  /*  
   * The showcase is initialized using a function
   * so we can initialize galleries when they've
   * been brought in with AJAX.
   */
  initShowcase = function() {    
    $("#showcase").awShowcase({
      content_width : 1000,
      content_height : 350,
      fit_to_parent : false,
      auto : false,
      interval : 3000,
      continuous : false,
      loading : true,
      tooltip_width : 200,
      tooltip_icon_width : 32,
      tooltip_icon_height : 32,
      tooltip_offsetx : 18,
      tooltip_offsety : 0,
      arrows : true,
      buttons : false,
      btn_numbers : false,
      keybord_keys : true,
      mousetrace : false, /* Trace x and y coordinates for the mouse */
      pauseonover : true,
      stoponclick : false,
      transition : 'hslide', /* hslide/vslide/fade */
      transition_delay : 0,
      transition_speed : 500,
      show_caption : 'onload', /* onload/onhover/show */
      thumbnails : false,
      thumbnails_position : 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
      thumbnails_direction : 'vertical', /* vertical/horizontal */
      thumbnails_slidex : 1, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
      dynamic_height : false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
      speed_change : true, /* Set to true to prevent users from swithing more then one slide at once. */
      viewline : false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
      custom_function : initPrettyPhoto /* We have to init prettyPhoto whenever a slide changes */
    });
    initPrettyPhoto(); /* We initializes prettyPhoto here because awShowcase() shuffles up the DOM and bindings fall away. */
  }
  
  /* Initialize the showcase when the page loads. */
  initShowcase();
});