Clever Geek Handbook

PrettyPhoto content and Ajax-loaded

I am currently working on a small product display page that loads a prettyPhoto gallery with ajax support. The problem is prettyPhoto doesn't work with images added after the page has loaded. I understand that I need to reinitialize prettyPhoto after loading new content, but how? I tried adding prettyPhoto.init (); to the code that returns to the page - it doesn't work.

The page I'm working here: http://turningpointpro.com/page.php?id=10

+2


source to share


3 answers


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

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

in the ajax callback, not in the function prettyPhoto.init();

I called earlier.



I also had some luck using the API instead of reloading prettyPhoto again.

Hope this helps someone.

+5


source


If you are using ASP.NET with Ajax, the scriptwriter will let you use a named function pageLoad()

that gets called every time the page is posted back (asynchronously or otherwise).

your code:



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


source 


$(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();  
});
});
+1


source






More articles:


All Articles