PrettyPhoto not work with livequery

Question

Can anyone explain how to use PrettyPhoto with livequery?

  $(document).ready(function()
  {
    $(".gallery a[rel^='prettyPhoto']").livequery(
    function()
    {
      $(this).prettyPhoto({theme:'facebook'});
    });
  });

The code is right but I think livequery does not support PrettyPhoto. Can someone confirm?

score 6 · Answer 1 · answered Feb 04 '11 at 08:10

6

Are you talking about jQuery? If so, I've gotten this to work:

$("a[rel=prettyPhoto]").live("click",function() {
    $.prettyPhoto.open($(this).attr("href"),"","");
    return false;
});

And if you want to put in some theming or something you can do:

$.fn.prettyPhoto({'theme': 'light_rounded'});
$("a[rel=prettyPhoto]").live("click",function() {
    $.prettyPhoto.open($(this).attr("href"),"","");
    return false;
});

answered Feb 04 '11 at 08:10

David

5,349
1
21
15

2

Nice, but remember to instantiate prettyPhoto first, $("a[rel^='prettyPhoto']").prettyPhoto(); – Eric Herlitz May 02 '11 at 07:42
Thanks david (and thanks for the additional data @EricHerlitz). Works great for me. – Sagive Aug 16 '13 at 18:32
Just remember that with modern jQuery .live() doesn't work anymore so you have to do something similar with .on() instead. – David Aug 17 '13 at 20:18

score 1 · Answer 2 · edited Dec 13 '11 at 05:43

$.fn.prettyPhoto({
    animation_speed: 'fast', /* fast/slow/normal */
    slideshow: 5000, /* false OR interval time in ms */
    theme: 'facebook' /* light_rounded / dark_rounded / light_square / dark_square / facebook /pp_default*/
});

$.prettyPhoto.open('xzs.html?iframe=true&width=100%&height=100%','Title','DESC');

User
<a style="color: #F99;text-decoration:inherit;" href="javascript:;" rel="prettyPhoto[iframes]" name="xzs.html?iframe=true&width=100%&height=100%" title="test">test</a>

$("a[rel^='prettyPhoto']").livequery(function(){
    var url = $(this).attr(name);
    $.prettyPhoto.open(url,'Title','DESC');
});

score 0 · Answer 3 · answered Oct 11 '11 at 16:07

WHat happens is that prrettyPhoto instantiates one gallery for each photo rather than building sets using a regexp on the rel attribute. What you need to do is re-run the initialization on all a[rel^='prettyPhoto'] whenever you get new ones in your DOM. This is due to the way prettyPhoto is set up with the global matchedObjects var.

PrettyPhoto not work with livequery

3 Answers3