jQuery PrettyPhoto passing ID to iframe

Question

Hi all, I'm trying to use jQuery PrettyPhoto and for some reason it's not passing through the id variable.. if someone has come across this problem before and knows a solution, that'd be fantastic! Here's the code:

<a href="/store-item-details?id=5&iframe=true&width=800&height=530" 
   rel="prettyPhoto[iframes]"
   title="">
   <img src="/images/store/thumbs/'.$item->image.'"
        alt="'.$item->name.'"
        width="100"
        border="0" />
</a>

Here's the link (with pretty photo, click on one of the thumbnails)

http://www.photographicpassions.com/shop?view=products&category=1

and here's the direct link from the tag:

http://www.photographicpassions.com/store-item-details?id=1&iframe=true&width=800&height=530

Please help! :)

Answer 1

Your problem lies in prettyPhoto itself. The plugin assumes (in the iframe case) that there are no other important parameters in that url and removes all of them after parsing out the height and width.

Here is a snippet from the unminified version of jquery.prettyPhoto.js. Notice the third line, where it deletes everything after the questionmark in the movie_url.

    }else if(pp_type == 'iframe'){
      movie_url = $caller.attr('href');
      movie_url = movie_url.substr(0,movie_url.indexOf('?'));

      pp_typeMarkup = '<iframe src ="'+movie_url+'" width="'+(correctSizes['width']-10)+'" height="'+(correctSizes['height']-10)+'" frameborder="no"></iframe>';
    }

I'm not sure how intrepid you're feeling but if you comment out that third line it'll work for you. (you'll probably want to re-minify afterwards see: http://fmarcia.info/jsmin/test.html)

    }else if(pp_type == 'iframe'){
      movie_url = $caller.attr('href');
      // movie_url = movie_url.substr(0,movie_url.indexOf('?')); // commented out to allow other attributes to be passed along.

      pp_typeMarkup = '<iframe src ="'+movie_url+'" width="'+(correctSizes['width']-10)+'" height="'+(correctSizes['height']-10)+'" frameborder="no"></iframe>';
    }

Answer 2

Thank you so much, that worked perfectly!!! :D

Answer 3

I've released a new version of prettyPhoto that fixes the bug if you don't want to hack it.

Check out the project page: http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/