version 2.5.6 errors - $ppt not defined on multiple calls to .prettyPhoto
  • Just tried to upgrade from 2.5.5 to 2.5.6 and ran into an issue with 2.5.6.

    If you are calling $(element).prettyPhoto more than once on a page, the cached selectors will fail - you will get an error stating that '$ppt' is undefined.


    In order to fix this, I believe you need to ensure that $ppt, $pp_pic_holder and $pp_overlay are always defined and initialized. The fix introduced in 2.5.6 for ajax reloads missed the case where prettyPhoto is executed twice on the same page - in this case $('.pp_overlay') exists so _buildOverlay() is not called, but it leaves $pp_pic_holder, $ppt and $pp_overlay uninitialized/undefined.


    I've updated my local copy to cover this case. The following code exists in 2.5.6:

    if($('.pp_overlay').size()==0) _buildOverlay(); // If the overlay is not there, inject it!

    // Global variables accessible only by prettyPhoto
    var doresize = true, percentBased = false, correctSizes,

    // Cached selectors
    $pp_pic_holder, $ppt, $pp_overlay,

    // prettyPhoto container specific
    pp_contentHeight, pp_contentWidth, pp_containerHeight, pp_containerWidth,


    If updated to the following, it should take care of the undefined $ppt on multiple calls to .prettyPhoto on a single page:

    // Cached selectors
    var $pp_pic_holder, $ppt, $pp_overlay;

    if($('.pp_overlay').size()==0) {
    _buildOverlay(); // If the overlay is not there, inject it!
    } else {
    // ensure the cached selectors are initialized
    $pp_pic_holder = $('.pp_pic_holder');
    $ppt = $('.ppt');
    $pp_overlay = $('div.pp_overlay');
    }

    // Global variables accessible only by prettyPhoto
    var doresize = true, percentBased = false, correctSizes,

    // prettyPhoto container specific
    pp_contentHeight, pp_contentWidth, pp_containerHeight, pp_containerWidth,




    BTW - great work on prettyPhoto, it's an awesome library!


    Matt.
  • Also related to calling prettyPhoto twice on the same page, the 'setPosition' variable is reset causing all galleries dealt with by the first prettyPhoto call to open the first photo/video by default.

    I corrected this (temporarily) by passing setPosition into all $.prettyPhoto.open calls, starting with "$(this).bind('click', function() {". I'm sure there is a better way to deal with this, but I haven't spent the time to figure it out.



    Matt.
  • First to say, great fix for multiple prettyPhoto on the same page :) Thanks!

    About reseting "setPosition", I tryed just to comment out "setPosition = 0," from

    //Gallery specific
    setPosition = 0,

    and it worked :)
    Now the question is, why use setPosition = 0 in the first place? I didn't see any problems after I comment out this line. If you have any idea, let me know.

    Nikola
  • Wonderful fix!! Appreciated immensely.

    However, now I'm having a secondary problem: when I click the "expand" button on the lightbox-ed image, it flashes white and just shows me the scaled version. This doesn't happen on the initial (non AJAXed and not needing the above fix) image's lightbox.

    Firebug gives me the following info when I try to expand:

    assignment to undeclared variable $this:
    $('a.pp_expand').bind('click',function(){
    $this = $(this); // Fix scoping

    (it actually only highlights that second line about scoping, but I thought I'd include more for reference)

    Can someone help me figure out how to fix this? I am trying to figure out how to initialize that bit myself but I'm afraid this is a little above me.
  • Regarding my previous post: nevermind! The new beta (prettyPhoto 3.0b) solves my issue.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter