Question

I am using this photo gallery from Codrops to display the images. Instead of manually inserting the image links into the html, I’m using a PHP script to display the images from a directory. I am trying to call the php script using jQuery – something like this:

HTML:

  <div id="thumbsWrapper">
                <div id="content">
                   <?php /* include_once('display.php'); */  ?>
                    <div class="placeholder"></div>
                </div>
            </div>

jQuery:

$('#content').load('display.php');

However, that breaks the gallery and although it displays the images, nothing happens when I hover or click on the image. Firebug throws the error:

no element found.

Where am I going wrong?

Answer 1

I believe load will replace the contents of #content, which includes <div class="placeholder"></div>. If that div is needed for the gallery then it won’t work.

Something like this should fix it:

$.get('display.php', function(data) {
  $('.placeholder').before(data);
});

In addition, make sure this call to load happens before you initialize the gallery. If you initialize the gallery first and then add these images, depending on how the gallery is coded, it may not work.

Finally, what was wrong with the approach of loading it through the php (I see you commented it out). Seems like a good way to go to me.