Search code examples
jqueryprettyphoto

isotope infinite scroll losing prettyphoto jquery on page 2

I am using isotope infinite scroll with a gallery I have prettyPhoto working fine on page 1 but once page 2 is loaded prettyPhoto does not work. Does anyone know how I can call the jquery on page 2. If I view page 2 as a stand alone page prettyPhoto works fine. Regards

Solution

  • PrettyPhoto requires some initialisation code that is executed when the document is loaded and does its magic on the appropriate elements in the DOM. When isotope infinite scroll pulls more content into the DOM from subsequent pages, you will not be getting the document ready event so PrettyPhoto will not be being told to do its stuff on the new content.

    You need to wrap the PrettyPhoto initialisation code in a function and call that function both on document.ready and when new content is pulled in. Isotope lets you specify a function that is executed when new items are pulled in so you can put the call to the PrettyPhoto code in there.