Question

I am using this zoom image script to load thumbs into larger images:
http://www.eyecon.ro/zoomimage/#implement

The trouble is i’m loading the gallery after the page is loaded using jquery load (code below):

//Remove tab info and add gallery
 $(".more").click(function () {
  var $gallery = $(this).closest('.tab').find('.gallery'),
  cat = $(this).attr('href').split('cat=')[1];

  if ($gallery.is(':empty')) {
   $gallery.load('/public/themes/lbd/js/imagegallery.php', {'cat': cat}, function(){
    $(this).fadeIn();
   });
  }

  $gallery.siblings().fadeOut(function(){
   $gallery.fadeIn();
  });  
  return false;
 });

The trouble is this script creates the gallery on the fly so the code below won’t work

<script type="text/javascript">
    $(document).ready(function() {
        $('a.customGal').zoomimage();
    });
</script>

How can i work in the code above to run once the gallery is loaded the so function completes?

I have tried to add the $(‘a.customGal’).zoomimage(); within .load but it doesn’t work still.

Answer 1

If I understand your problem correctly, you’re trying to create a gallery out of a.customGals, but your code isn’t working because these anchors don’t exist at page load. They’re loaded from the .click.

If that is right, I believe this should work:

$gallery.load('/public/themes/lbd/js/imagegallery.php', {'cat': cat}, function(){
    $(this).fadeIn(function(){
        $('a.customGal').zoomimage(); 
    });
});

That will call your plugin after the HTML has been appended to your page and has finished animating.