I'm currently working on a little product display page that loads prettyPhoto-enabled galleries through ajax. The problem is, prettyPhoto doesn't work on the images added after the page loads initially. I understand that I need to re-initialize prettyPhoto after the new content loads, but how? I've tried adding prettyPhoto.init(); to the code that is returned to the page - that doesn't work.

Page I'm working on is here: .php?id=10

I'm currently working on a little product display page that loads prettyPhoto-enabled galleries through ajax. The problem is, prettyPhoto doesn't work on the images added after the page loads initially. I understand that I need to re-initialize prettyPhoto after the new content loads, but how? I've tried adding prettyPhoto.init(); to the code that is returned to the page - that doesn't work.

Page I'm working on is here: http://turningpointpro./page.php?id=10

• javascript
• ajax
• dynamic

3 Answers 3

I ended up finding two solutions. The first and best was to put this whole bit:

$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
});

into the ajax callback, not the prettyPhoto.init(); function I was calling before.

I also had some luck with using the API instead of re-loading prettyPhoto again.

Hope this helps someone.

If you are using ASP.NET with Ajax, the scriptmanager will allow you to use a function called pageLoad() that is called every time the page posts back (async or otherwise).

your code:

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

$(function() {
$('#navigation a.button').click(function(e) {
  $.get( $(this).attr('href'), function(data) {
      $('#portfolio').quicksand( $(data).find('li'), { adjustHeight: 'dynamic' }, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); } );

  });  
  e.preventDefault();  
});
});