title: Pretty Photo Set linking Issues
body: <p>Yesterday a nice stack overflow user helped me to trigger the Jquery Prettyphoto Lightbox from a DIV element rather than an A element.</p>
  
  <p>You can find that solution <a href="https://stackoverflow.com/questions/1760891/prettyphoto-jquery-lightbox-link-problems">here</a></p>
  
  <p>This works... Almost.</p>
  
  <p>Pretty Photo looks for all the links that reference it and then compiles them into a slideshow of iframes. Normally when you click on a link it will open up the iframe lightbox corresponding to the link i clicked on.</p>
  
  <p>However with this new DIV solution it is opening up to the first iframe link it finds on the page, rather than the link I click on.</p>
  
  <p>This must obviously be happening because I have altered the javascript call code from</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      $(document).ready(function(){
          $("a[rel^='prettyPhoto[iframes]']").prettyPhoto();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      $(document).ready(function(){
          $("div[class^='prettyphoto[iframes]']").prettyPhoto();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I have been going through the other JS files but I am not a javascript programmer.</p>
  
  <p>I am going to post the entire JS file. Maybe someone can see what javascript I need to change to make this DIV element work like an A element.</p>
  
  <pre><code>(function($) {
  $.prettyPhoto = {version: '2.5.4'};
  
  $.fn.prettyPhoto = function(settings) {
      settings = jQuery.extend({
          animationSpeed: 'normal', /* fast/slow/normal */
          padding: 40, /* padding for each side of the picture */
          opacity: 0.80, /* Value between 0 and 1 */
          showTitle: true, /* true/false */
          allowresize: true, /* true/false */
          counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
          theme: 'light_rounded', /* light_rounded / dark_rounded / light_square / dark_square */
          hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
          modal: false, /* If set to true, only the close button will close the window */
          changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
          callback: function(){} /* Called when prettyPhoto is closed */
      }, settings);
  
      // Fallback to a supported theme for IE6
      if($.browser.msie &amp;&amp; $.browser.version == 6){
          settings.theme = "light_square";
      }
  
      if($('.pp_overlay').size() == 0) {
          _buildOverlay(); // If the overlay is not there, inject it!
      }else{
          // Set my global selectors
          $pp_pic_holder = $('.pp_pic_holder');
          $ppt = $('.ppt');
      }
  
      // Global variables accessible only by prettyPhoto
      var doresize = true, percentBased = false, correctSizes,
  
      // Cached selectors
      $pp_pic_holder, $ppt,
  
      // prettyPhoto container specific
      pp_contentHeight, pp_contentWidth, pp_containerHeight, pp_containerWidth, pp_type = 'image',
  
      //Gallery specific
      setPosition = 0,
  
      // Global elements
      $scrollPos = _getScroll();
  
      // Window/Keyboard events
      $(window).scroll(function(){ $scrollPos = _getScroll(); _centerOverlay(); _resizeOverlay(); });
      $(window).resize(function(){ _centerOverlay(); _resizeOverlay(); });
      $(document).keydown(function(e){
          if($pp_pic_holder.is(':visible'))
          switch(e.keyCode){
              case 37:
                  $.prettyPhoto.changePage('previous');
                  break;
              case 39:
                  $.prettyPhoto.changePage('next');
                  break;
              case 27:
                  if(!settings.modal)
                  $.prettyPhoto.close();
                  break;
          };
      });
  
      // Bind the code to each links
      $(this).each(function(){
          $(this).bind('click',function(){
  
              link = this; // Fix scoping
  
              // Find out if the picture is part of a set
              theRel = $(this).attr('rel');
              galleryRegExp = /\[(?:.*)\]/;
              theGallery = galleryRegExp.exec(theRel);
  
              // Build the gallery array
              var images = new Array(), titles = new Array(), descriptions = new Array();
              if(theGallery){
                  $('a[rel*='+theGallery+']').each(function(i){
                      if($(this)[0] === $(link)[0]) setPosition = i; // Get the position in the set
                      images.push($(this).attr('href'));
                      titles.push($(this).find('img').attr('alt'));
                      descriptions.push($(this).attr('title'));
                  });
              }else{
                  images = $(this).attr('href');
                  titles = ($(this).find('img').attr('alt')) ?  $(this).find('img').attr('alt') : '';
                  descriptions = ($(this).attr('title')) ?  $(this).attr('title') : '';
              }
  
              $.prettyPhoto.open(images,titles,descriptions);
              return false;
          });
      });
  
  
      /**
      * Opens the prettyPhoto modal box.
      * @param image {String,Array} Full path to the image to be open, can also be an array containing full images paths.
      * @param title {String,Array} The title to be displayed with the picture, can also be an array containing all the titles.
      * @param description {String,Array} The description to be displayed with the picture, can also be an array containing all the descriptions.
      */
      $.prettyPhoto.open = function(gallery_images,gallery_titles,gallery_descriptions) {
          // To fix the bug with IE select boxes
          if($.browser.msie &amp;&amp; $.browser.version == 6){
              $('select').css('visibility','hidden');
          };
  
          // Hide the flash
          if(settings.hideflash) $('object,embed').css('visibility','hidden');
  
          // Convert everything to an array in the case it's a single item
          images = $.makeArray(gallery_images);
          titles = $.makeArray(gallery_titles);
          descriptions = $.makeArray(gallery_descriptions);
  
          if($('.pp_overlay').size() == 0) {
              _buildOverlay(); // If the overlay is not there, inject it!
          }else{
              // Set my global selectors
              $pp_pic_holder = $('.pp_pic_holder');
              $ppt = $('.ppt');
          }
  
          $pp_pic_holder.attr('class','pp_pic_holder ' + settings.theme); // Set the proper theme
  
          isSet = ($(images).size() &gt; 0) ?  true : false; // Find out if it's a set
  
          _getFileType(images[setPosition]); // Set the proper file type
  
          _centerOverlay(); // Center it
  
          // Hide the next/previous links if on first or last images.
          _checkPosition($(images).size());
  
          $('.pp_loaderIcon').show(); // Do I need to explain?
  
          // Fade the content in
          $('div.pp_overlay').show().fadeTo(settings.animationSpeed,settings.opacity, function(){
              $pp_pic_holder.fadeIn(settings.animationSpeed,function(){
                  // Display the current position
                  $pp_pic_holder.find('p.currentTextHolder').text((setPosition+1) + settings.counter_separator_label + $(images).size());
  
                  // Set the description
                  if(descriptions[setPosition]){
                      $pp_pic_holder.find('.pp_description').show().html(unescape(descriptions[setPosition]));
                  }else{
                      $pp_pic_holder.find('.pp_description').hide().text('');
                  };
  
                  // Set the title
                  if(titles[setPosition] &amp;&amp; settings.showTitle){
                      hasTitle = true;
                      $ppt.html(unescape(titles[setPosition]));
                  }else{
                      hasTitle = false;
                  };
  
                  // Inject the proper content
                  if(pp_type == 'image'){
                      // Set the new image
                      imgPreloader = new Image();
  
                      // Preload the neighbour images
                      nextImage = new Image();
                      if(isSet &amp;&amp; setPosition &gt; $(images).size()) nextImage.src = images[setPosition + 1];
                      prevImage = new Image();
                      if(isSet &amp;&amp; images[setPosition - 1]) prevImage.src = images[setPosition - 1];
  
                      pp_typeMarkup = '&lt;img id="fullResImage" src="" /&gt;';             
                      $pp_pic_holder.find('#pp_full_res')[0].innerHTML = pp_typeMarkup;
  
                      $pp_pic_holder.find('.pp_content').css('overflow','hidden');
                      $pp_pic_holder.find('#fullResImage').attr('src',images[setPosition]);
  
                      imgPreloader.onload = function(){
                          // Fit item to viewport
                          correctSizes = _fitToViewport(imgPreloader.width,imgPreloader.height);
  
                          _showContent();
                      };
  
                      imgPreloader.src = images[setPosition];
                  }else{
                      // Get the dimensions
                      movie_width = ( parseFloat(grab_param('width',images[setPosition])) ) ? grab_param('width',images[setPosition]) : "425";
                      movie_height = ( parseFloat(grab_param('height',images[setPosition])) ) ? grab_param('height',images[setPosition]) : "344";
  
                      // If the size is % based, calculate according to window dimensions
                      if(movie_width.indexOf('%') != -1 || movie_height.indexOf('%') != -1){
                          movie_height = ($(window).height() * parseFloat(movie_height) / 100) - 100;
                          movie_width = ($(window).width() * parseFloat(movie_width) / 100) - 100;
                          percentBased = true;
                      }
  
                      movie_height = parseFloat(movie_height);
                      movie_width = parseFloat(movie_width);
  
                      if(pp_type == 'quicktime') movie_height+=15; // Add space for the control bar
  
                      // Fit item to viewport
                      correctSizes = _fitToViewport(movie_width,movie_height);
  
                      if(pp_type == 'youtube'){
                          pp_typeMarkup = '&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+correctSizes['width']+'" height="'+correctSizes['height']+'"&gt;&lt;param name="allowfullscreen" value="true" /&gt;&lt;param name="allowscriptaccess" value="always" /&gt;&lt;param name="movie" value="http://www.youtube.com/v/'+grab_param('v',images[setPosition])+'" /&gt;&lt;embed src="http://www.youtube.com/v/'+grab_param('v',images[setPosition])+'" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="'+correctSizes['width']+'" height="'+correctSizes['height']+'"&gt;&lt;/embed&gt;&lt;/object&gt;';
                      }else if(pp_type == 'quicktime'){
                          pp_typeMarkup = '&lt;object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="'+correctSizes['height']+'" width="'+correctSizes['width']+'"&gt;&lt;param name="src" value="'+images[setPosition]+'"&gt;&lt;param name="autoplay" value="true"&gt;&lt;param name="type" value="video/quicktime"&gt;&lt;embed src="'+images[setPosition]+'" height="'+correctSizes['height']+'" width="'+correctSizes['width']+'" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"&gt;&lt;/embed&gt;&lt;/object&gt;';
                      }else if(pp_type == 'flash'){
                          flash_vars = images[setPosition];
                          flash_vars = flash_vars.substring(images[setPosition].indexOf('flashvars') + 10,images[setPosition].length);
  
                          filename = images[setPosition];
                          filename = filename.substring(0,filename.indexOf('?'));
  
                          pp_typeMarkup = '&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+correctSizes['width']+'" height="'+correctSizes['height']+'"&gt;&lt;param name="allowfullscreen" value="true" /&gt;&lt;param name="allowscriptaccess" value="always" /&gt;&lt;param name="movie" value="'+filename+'?'+flash_vars+'" /&gt;&lt;embed src="'+filename+'?'+flash_vars+'" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="'+correctSizes['width']+'" height="'+correctSizes['height']+'"&gt;&lt;/embed&gt;&lt;/object&gt;';
                      }else if(pp_type == 'iframe'){
                          movie_url = images[setPosition];
                          movie_url = movie_url.substr(0,movie_url.indexOf('iframe')-1);
  
                          pp_typeMarkup = '&lt;iframe src ="'+movie_url+'" width="'+(correctSizes['width']-10)+'" height="'+(correctSizes['height']-10)+'" frameborder="no"&gt;&lt;/iframe&gt;';
                      }
  
                      // Show content
                      _showContent();
                  }
              });
          });
      };
  
      /**
      * Change page in the prettyPhoto modal box
      * @param direction {String} Direction of the paging, previous or next.
      */
      $.prettyPhoto.changePage = function(direction){
          if(direction == 'previous') {
              setPosition--;
              if (setPosition &lt; 0){
                  setPosition = 0;
                  return;
              }
          }else{
              if($('.pp_arrow_next').is('.disabled')) return;
              setPosition++;
          };
  
          // Allow the resizing of the images
          if(!doresize) doresize = true;
  
          _hideContent();
          $('a.pp_expand,a.pp_contract').fadeOut(settings.animationSpeed,function(){
              $(this).removeClass('pp_contract').addClass('pp_expand');
              $.prettyPhoto.open(images,titles,descriptions);
          });
      };
  
      /**
      * Closes the prettyPhoto modal box.
      */
      $.prettyPhoto.close = function(){
          $pp_pic_holder.find('object,embed').css('visibility','hidden');
  
          $('div.pp_pic_holder,div.ppt').fadeOut(settings.animationSpeed);
  
          $('div.pp_overlay').fadeOut(settings.animationSpeed, function(){
              $('div.pp_overlay,div.pp_pic_holder,div.ppt').remove();
  
              // To fix the bug with IE select boxes
              if($.browser.msie &amp;&amp; $.browser.version == 6){
                  $('select').css('visibility','visible');
              };
  
              // Show the flash
              if(settings.hideflash) $('object,embed').css('visibility','visible');
  
              setPosition = 0;
  
              settings.callback();
          });
  
          doresize = true;
      };
  
      /**
      * Set the proper sizes on the containers and animate the content in.
      */
      _showContent = function(){
          $('.pp_loaderIcon').hide();
  
          if($.browser.opera) {
              windowHeight = window.innerHeight;
              windowWidth = window.innerWidth;
          }else{
              windowHeight = $(window).height();
              windowWidth = $(window).width();
          };
  
          // Calculate the opened top position of the pic holder
          projectedTop = $scrollPos['scrollTop'] + ((windowHeight/2) - (correctSizes['containerHeight']/2));
          if(projectedTop &lt; 0) projectedTop = 0 + $pp_pic_holder.find('.ppt').height();
  
          // Resize the content holder
          $pp_pic_holder.find('.pp_content').animate({'height':correctSizes['contentHeight']},settings.animationSpeed);
  
          // Resize picture the holder
          $pp_pic_holder.animate({
              'top': projectedTop,
              'left': ((windowWidth/2) - (correctSizes['containerWidth']/2)),
              'width': correctSizes['containerWidth']
          },settings.animationSpeed,function(){
              $pp_pic_holder.width(correctSizes['containerWidth']);
              $pp_pic_holder.find('.pp_hoverContainer,#fullResImage').height(correctSizes['height']).width(correctSizes['width']);
  
              // Fade the new image
              $pp_pic_holder.find('#pp_full_res').fadeIn(settings.animationSpeed);
  
              // Show the nav
              if(isSet &amp;&amp; pp_type=="image") { $pp_pic_holder.find('.pp_hoverContainer').fadeIn(settings.animationSpeed); }else{ $pp_pic_holder.find('.pp_hoverContainer').hide(); }
              $pp_pic_holder.find('.pp_details').fadeIn(settings.animationSpeed);
  
              // Show the title
              if(settings.showTitle &amp;&amp; hasTitle){
                  $ppt.css({
                      'top' : $pp_pic_holder.offset().top - 20,
                      'left' : $pp_pic_holder.offset().left + (settings.padding/2),
                      'display' : 'none'
                  });
  
                  $ppt.fadeIn(settings.animationSpeed);
              };
  
              // Fade the resizing link if the image is resized
              if(correctSizes['resized']) $('a.pp_expand,a.pp_contract').fadeIn(settings.animationSpeed);
  
              // Once everything is done, inject the content if it's now a photo
              if(pp_type != 'image') $pp_pic_holder.find('#pp_full_res')[0].innerHTML = pp_typeMarkup;
  
              // Callback!
              settings.changepicturecallback();
          });
      };
  
      /**
      * Hide the content...DUH!
      */
      function _hideContent(){
          // Fade out the current picture
          $pp_pic_holder.find('#pp_full_res object,#pp_full_res embed').css('visibility','hidden');
          $pp_pic_holder.find('.pp_hoverContainer,.pp_details').fadeOut(settings.animationSpeed);
          $pp_pic_holder.find('#pp_full_res').fadeOut(settings.animationSpeed,function(){
              $('.pp_loaderIcon').show();
          });
  
          // Hide the title
          $ppt.fadeOut(settings.animationSpeed);
      }
  
      /**
      * Check the item position in the gallery array, hide or show the navigation links
      * @param setCount {integer} The total number of items in the set
      */
      function _checkPosition(setCount){
          // If at the end, hide the next link
          if(setPosition == setCount-1) {
              $pp_pic_holder.find('a.pp_next').css('visibility','hidden');
              $pp_pic_holder.find('a.pp_arrow_next').addClass('disabled').unbind('click');
          }else{ 
              $pp_pic_holder.find('a.pp_next').css('visibility','visible');
              $pp_pic_holder.find('a.pp_arrow_next.disabled').removeClass('disabled').bind('click',function(){
                  $.prettyPhoto.changePage('next');
                  return false;
              });
          };
  
          // If at the beginning, hide the previous link
          if(setPosition == 0) {
              $pp_pic_holder.find('a.pp_previous').css('visibility','hidden');
              $pp_pic_holder.find('a.pp_arrow_previous').addClass('disabled').unbind('click');
          }else{
              $pp_pic_holder.find('a.pp_previous').css('visibility','visible');
              $pp_pic_holder.find('a.pp_arrow_previous.disabled').removeClass('disabled').bind('click',function(){
                  $.prettyPhoto.changePage('previous');
                  return false;
              });
          };
  
          // Hide the bottom nav if it's not a set.
          if(setCount &gt; 1) {
              $('.pp_nav').show();
          }else{
              $('.pp_nav').hide();
          }
      };
  
      /**
      * Resize the item dimensions if it's bigger than the viewport
      * @param width {integer} Width of the item to be opened
      * @param height {integer} Height of the item to be opened
      * @return An array containin the "fitted" dimensions
      */
      function _fitToViewport(width,height){
          hasBeenResized = false;
  
          _getDimensions(width,height);
  
          // Define them in case there's no resize needed
          imageWidth = width;
          imageHeight = height;
  
          windowHeight = $(window).height();
          windowWidth = $(window).width();
  
          if( ((pp_containerWidth &gt; windowWidth) || (pp_containerHeight &gt; windowHeight)) &amp;&amp; doresize &amp;&amp; settings.allowresize &amp;&amp; !percentBased) {
              hasBeenResized = true;
              notFitting = true;
  
              while (notFitting){
                  if((pp_containerWidth &gt; windowWidth)){
                      imageWidth = (windowWidth - 200);
                      imageHeight = (height/width) * imageWidth;
                  }else if((pp_containerHeight &gt; windowHeight)){
                      imageHeight = (windowHeight - 200);
                      imageWidth = (width/height) * imageHeight;
                  }else{
                      notFitting = false;
                  };
  
                  pp_containerHeight = imageHeight;
                  pp_containerWidth = imageWidth;
              };
  
              _getDimensions(imageWidth,imageHeight);
          };
  
          return {
              width:imageWidth,
              height:imageHeight,
              containerHeight:pp_containerHeight,
              containerWidth:pp_containerWidth,
              contentHeight:pp_contentHeight,
              contentWidth:pp_contentWidth,
              resized:hasBeenResized
          };
      };
  
      /**
      * Get the containers dimensions according to the item size
      * @param width {integer} Width of the item to be opened
      * @param height {integer} Height of the item to be opened
      */
      function _getDimensions(width,height){
          $pp_pic_holder.find('.pp_details').width(width).find('.pp_description').width(width - parseFloat($pp_pic_holder.find('a.pp_close').css('width'))); /* To have the correct height */
  
          // Get the container size, to resize the holder to the right dimensions
          pp_contentHeight = height + $pp_pic_holder.find('.pp_details').height() + parseFloat($pp_pic_holder.find('.pp_details').css('marginTop')) + parseFloat($pp_pic_holder.find('.pp_details').css('marginBottom'));
          pp_contentWidth = width;
          pp_containerHeight = pp_contentHeight + $pp_pic_holder.find('.ppt').height() + $pp_pic_holder.find('.pp_top').height() + $pp_pic_holder.find('.pp_bottom').height();
          pp_containerWidth = width + settings.padding;
      }
  
      function _getFileType(itemSrc){
          if (itemSrc.match(/youtube\.com\/watch/i)) {
              pp_type = 'youtube';
          }else if(itemSrc.indexOf('.mov') != -1){ 
              pp_type = 'quicktime';
          }else if(itemSrc.indexOf('.swf') != -1){
              pp_type = 'flash';
          }else if(itemSrc.indexOf('iframe') != -1){
              pp_type = 'iframe'
          }else{
              pp_type = 'image';
          };
      };
  
      function _centerOverlay(){
          if($.browser.opera) {
              windowHeight = window.innerHeight;
              windowWidth = window.innerWidth;
          }else{
              windowHeight = $(window).height();
              windowWidth = $(window).width();
          };
  
          if(doresize) {
              $pHeight = $pp_pic_holder.height();
              $pWidth = $pp_pic_holder.width();
              $tHeight = $ppt.height();
  
              projectedTop = (windowHeight/2) + $scrollPos['scrollTop'] - ($pHeight/2);
              if(projectedTop &lt; 0) projectedTop = 0 + $tHeight;
  
              $pp_pic_holder.css({
                  'top': projectedTop,
                  'left': (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2)
              });
  
              $ppt.css({
                  'top' : projectedTop - $tHeight,
                  'left' : (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2) + (settings.padding/2)
              });
          };
      };
  
      function _getScroll(){
          if (self.pageYOffset) {
              scrollTop = self.pageYOffset;
              scrollLeft = self.pageXOffset;
          } else if (document.documentElement &amp;&amp; document.documentElement.scrollTop) { // Explorer 6 Strict
              scrollTop = document.documentElement.scrollTop;
              scrollLeft = document.documentElement.scrollLeft;
          } else if (document.body) {// all other Explorers
              scrollTop = document.body.scrollTop;
              scrollLeft = document.body.scrollLeft;  
          }
  
          return {scrollTop:scrollTop,scrollLeft:scrollLeft};
      };
  
      function _resizeOverlay() {
          $('div.pp_overlay').css({
              'height':$(document).height(),
              'width':$(window).width()
          });
      };
  
      function _buildOverlay(){
          toInject = "";
  
          // Build the background overlay div
          toInject += "&lt;div class='pp_overlay'&gt;&lt;/div&gt;";
  
          // Basic HTML for the picture holder
          toInject += '&lt;div class="pp_pic_holder"&gt;&lt;div class="pp_top"&gt;&lt;div class="pp_left"&gt;&lt;/div&gt;&lt;div class="pp_middle"&gt;&lt;/div&gt;&lt;div class="pp_right"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="pp_content"&gt;&lt;a href="#" class="pp_expand" title="Expand the image"&gt;Expand&lt;/a&gt;&lt;div class="pp_loaderIcon"&gt;&lt;/div&gt;&lt;div class="pp_hoverContainer"&gt;&lt;a class="pp_next" href="#"&gt;next&lt;/a&gt;&lt;a class="pp_previous" href="#"&gt;previous&lt;/a&gt;&lt;/div&gt;&lt;div id="pp_full_res"&gt;&lt;/div&gt;&lt;div class="pp_details clearfix"&gt;&lt;a class="pp_close" href="#"&gt;Close&lt;/a&gt;&lt;p class="pp_description"&gt;&lt;/p&gt;&lt;div class="pp_nav"&gt;&lt;a href="#" class="pp_arrow_previous"&gt;Previous&lt;/a&gt;&lt;p class="currentTextHolder"&gt;0'+settings.counter_separator_label+'0&lt;/p&gt;&lt;a href="#" class="pp_arrow_next"&gt;Next&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="pp_bottom"&gt;&lt;div class="pp_left"&gt;&lt;/div&gt;&lt;div class="pp_middle"&gt;&lt;/div&gt;&lt;div class="pp_right"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
          // Basic html for the title holder
          toInject += '&lt;div class="ppt"&gt;&lt;/div&gt;';
  
          $('body').append(toInject);
  
          // So it fades nicely
          $('div.pp_overlay').css('opacity',0);
  
          // Set my global selectors
          $pp_pic_holder = $('.pp_pic_holder');
          $ppt = $('.ppt');
  
          $('div.pp_overlay').css('height',$(document).height()).hide().bind('click',function(){
              if(!settings.modal)
              $.prettyPhoto.close();
          });
  
          $('a.pp_close').bind('click',function(){ $.prettyPhoto.close(); return false; });
  
          $('a.pp_expand').bind('click',function(){
              $this = $(this); // Fix scoping
  
              // Expand the image
              if($this.hasClass('pp_expand')){
                  $this.removeClass('pp_expand').addClass('pp_contract');
                  doresize = false;
              }else{
                  $this.removeClass('pp_contract').addClass('pp_expand');
                  doresize = true;
              };
  
              _hideContent();
  
              $pp_pic_holder.find('.pp_hoverContainer, .pp_details').fadeOut(settings.animationSpeed);
              $pp_pic_holder.find('#pp_full_res').fadeOut(settings.animationSpeed,function(){
                  $.prettyPhoto.open(images,titles,descriptions);
              });
  
              return false;
          });
  
          $pp_pic_holder.find('.pp_previous, .pp_arrow_previous').bind('click',function(){
              $.prettyPhoto.changePage('previous');
              return false;
          });
  
          $pp_pic_holder.find('.pp_next, .pp_arrow_next').bind('click',function(){
              $.prettyPhoto.changePage('next');
              return false;
          });
  
          $pp_pic_holder.find('.pp_hoverContainer').css({
              'margin-left': settings.padding/2
          });
      };
  };
  
  function grab_param(name,url){
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&amp;]"+name+"=([^&amp;#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    if( results == null )
      return "";
    else
      return results[1];
  }
  </code></pre>
  
  <p>})(jQuery);</p>
  
  <p><a href="http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/#download" rel="nofollow noreferrer">Here</a> is the link to the lighbox.</p>
  
  <p>All help is appreciated.</p>
  
  <p>Thanks,</p>
  
  <p>Tim</p>