Force prettyPhoto to refresh when content changes dynamically
  • Hello,

    I have this script working great on my website, but I would like to know how to get it to refresh when content changes dynamically. I'm using the Flickrpress wordpress plugin which loads recent flickr images in the sidebar and allows you to hit "next" to load the next set of images without having to reload the entire page. Problem is, prettyPhoto works on the FIRST set of images, but if I hit "next" and load another set, prettyPhoto doesn't work on those images (they just open in a new window).

    I contacted the Flickrpress author and here is what he had to say:

    "You'll need to find out how to force prettyPhoto to refresh, when content changes dynamically. You'll see in my flickr.js:42-47 the code which updates lightbox 2 and thickbox ( "myLightbox.updateImageList();" and "tb_init('a.thickbox');") - You'll want to add whatever is necessary to cause prettyPhoto to update, too."

    Ok, so I looked in his flickr.js file and here is what I see (his plugin is designed to natively work with thickbox and lightbox 2):
    --------------------------------------------
    if ( typeof(myLightbox) != 'undefined' && typeof(myLightbox.updateImageList) == 'function' ) {
    myLightbox.updateImageList();
    }
    if ( typeof(tb_init) == 'function' ) {
    tb_init('a.thickbox');
    }
    ----------------------------------------------

    So, I'd like to know what I need to insert there, after those two statements, to make prettyPhoto, too, update when content changes dynamically on the page.

    I would really appreciate your help in resolving this. Thank you!
  • I think I have the same question as this commenter:

    http://forums.no-margin-for-errors.com/discussion/515/re-call-reload-prettyphoto/p1

    I see he's still waiting for an answer, too. Could you help us out please?
  • Here's how:

    jQuery.ajaxStop(function(){
    // Code to be run.
    });

    Basically, every time an ajax call is done, the code in the function will be executed, just call you prettyPhoto initializing function in there.

    Thanks!
  • Sorry, I'm having a problem interpreting your response. Are you saying that the code I should use to "reload" prettyPhoto is this:

    jQuery.ajaxStop(function(){
    prettyPhoto.initialize()
    });

    In my first comment, you see the two other statements (Lightbox 2 and thickbox) which force a reload. i.e. "myLightbox.updateImageList();" forces Lightbox 2 to update/reload. Is there a similar command for prettyPhoto? Is that what "prettyPhoto.initialize" does? I couldn't get it to work using that command.
  • function reloadPrettyPhoto() {
    $(".pp_pic_holder").remove();
    $(".pp_overlay").remove();
    $(".ppt").remove();
    // edit it with your initialization
    $(".pretty-photo-gallery a[rel^='prettyPhoto']").prettyPhoto({
    theme: 'facebook',
    allowresize : false
    });
    //
    }
  • santik I have a problem when i execute your code in setTimeout 3000 after 30 minutes browser was crash or hang (opera, ie, safari) any ideas ?? maybe you dont remove something else ??
  • I am having problems too with Pretty Photo refreshing and I don't understand this fix. My problem is I am using filter by image and when I filter by image in FireFox the wrong images appear. Can someone explain how to fix this more clearly? Thanks!
  • I am trying to use this solution as part of integrating wp-prettyPhoto with Nextgen gallery.

    I have tried placing

    $("a[rel^='wp-prettyPhoto']").prettyPhoto({});

    in many different places in the ajax calls, for example

    // load gallery content

    jQuery.get(ngg_ajax.callback, {p: postId, galleryid: galleryId, nggpage: pageNumber, type: "gallery"}, function (data, textStatus) {



    // delete old content

    gallery.children().remove();


    // add new content

    gallery.replaceWith(data);


    // add ajax-navigation, again

    jQuery("document").ready(function(){

    // remove old listeners to avoid double-clicks

    jQuery("a.page-numbers").unbind("click");

    jQuery("a.prev").unbind("click");

    jQuery("a.next").unbind("click");

    $("a[rel^='wp-prettyPhoto']").prettyPhoto({});

    // add shutter-listeners again

    shutterReloaded.init('sh');


    });

    });

    Any thoughts would be helpful, thank you!
  • Hello, any update on this? I have created also a question on Javascriptquestions a we site where an user can post question with a budget. :) If someone wants gain 20$...just help with my question ;)

    http://javascriptquestions.com/question/show/id/13
  • Hi there,

    jQuery.ajaxStop(function(){
    // Code to be run.
    });

    Is really all you need. It attach a function to be executed whenever all AJAX requests have ended. It's will run what is inside the function.

    In your case, you want to reload prettyPhoto, so you need to put:
    jQuery.ajaxStop(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
    });
  • I am having the same problem with jQuery.quicksand.js

    http://razorjack.net/quicksand/

    I have created a function to call prettyPhoto:

    $(function pretty() {
    $("a[rel^='prettyPhoto']").prettyPhoto(); // initiate prettyphoto
    });


    I place it in the spot that the quicksand documentation says to place the callback function.


    $portfolio.quicksand($filteredData, function() {
    pretty(); //callback
    hover(); //callback
    }); }); });


    prettyPhoto works fine on page load, but once the items are sorted with quicksand prettyPhoto does not work on the newly cloned items.

    I've seen this question all over the web when searching for a solution, but no solution found...
  • Ok now I see what the problem is.

    I was under the impression that the content was refreshed in ajax. Now that I know the issue is related to quisksand I should be able to help :)

    Give me some time to test 2-3 things
  • @jaycbrf4:
    Change

    $(function pretty() {
    $("a[rel^='prettyPhoto']").prettyPhoto(); // initiate prettyphoto
    });


    To become:

    function pretty() {
    $("a[rel^='prettyPhoto']").prettyPhoto(); // initiate prettyphoto
    };


    The code doesn't need to be wrapped in a jQuery selector.
  • That did not work for me...
  • I added an alert to the callback.

    It's simply never called: http://jsfiddle.net/5CWUp/8/
  • PrettyPhoto is still not working after sort, And my Hover function is no longer working. Not sure what you did...
  • I tried adding an alert to the sorting callback.

    This alert is never displayed meaning the callback is never called. It could be in the way you initialize quicksand.

    I didn't have time to try to fix quicksand.
  • I got the hover to work after sort and the alert came up. Click on web or graphic to apply the sort.. PrettyPhoto callback not working though...
  • This is as far as I have gotten. I have had no luck getting these two scripts to work together.

    Of the many places this question is asked on-line, not one of them have been answered.

    Please help
  • I tried replacing PrettyPhoto with LightboxEvolution and callback works fine. For some reason PrettyPhoto will not respond to callback.
  • I gave up on Quicksand and decided to use Isotope http://isotope.metafizzy.co/

    Did not need a callback for prettyphoto. Everything works fine.

  • Seriously, this issue is still not addressed. Forget Quicksand and go with Isotope, just like Jay said - because apparently, the Quicksand guy doesn't give a shit, and scaron apparently doesn't have the time.
  • I just ran into this issue as well with PP and Quicksand. Clearly the Quicksand devs have a bias against designers, their docs page says:

    "I'm a designer and I don't know how to start... Copy-paste is cool but sorry dude, not this time. Good luck..."

    Well, I think that says it all -- I just switched to Isotope and it just works (and after filtering) with PrettyPhoto thank you very much. :)

  • I am having the preetyphoto for dynamic images display, which all are from ajax.
    But problem is it displayed incorrect images...I d't know what's happening ther..

    ur look, http://iyristech.com/balista/products.php?collection_type_id=4&collection_type=Classic&category=Dhoties

    Please help me to fix this..Thanks in advance

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