Using Fancybox to view larger image from thumbnail

I created a note on how to do this.

http://www.boonex.com/n/using-fancybox-for-photo-thumbnails-to-view-larger

I did not do enough testing with this.  When you are at the browse photos page, the first page of the pagination works fine; clicking on page 2, 3, etc and the lightbox does not load.  Clicking back to page 1 is the same; the browse page has to be reloaded.  I am also seeing the jquery loader not working on some of the other photo pages indicating a conflict; clicking on a pagination causes the whole page to be reloaded.  This is a feature that makes viewing photos easier on Boonex without jumping all over the place and loading the photo page view and having to click back to the browse page etc.  I probably need to load the fancybox control differently.  If any of the javascript, jquery, people here want to help with this, please do.

The problem was that fancybox would unbind on the dynamically loaded content on the photo browse page.  I have found a solution that I am testing:

<script type="text/javascript" language="javascript">
$(document).on('click', '.single_image', function() {
  // remove the class to ensure this will only run once
  $(this).removeClass('single_image');
  // now attach fancybox and click to open it
  $(this).fancybox().click();
  // prevent default action
  return false;
});
</script>

Working quite nicely; so much better to browse photos on the site now.  I have updated my note to reflect the change.

On the fancybox code in my note, I had id="single_image" when it was suppose to be class="single_image"  When I changed the fancybox control I forgot to update that part.  I have updated my note.