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