Fancybox: using a background image

Question

I'm having a bit of trouble with fancybox on the photo's section.

At the moment when you click on one of the images it loads the same size as on the page (the image is actually much larger) and also removes the div from the page.

I want to load the background image of the div at it's full size into the fancybox.

<div class="main-photo fancybox" rel="group" style="background-image:url('<?php echo $photo; ?>');">
   <a href="<?php echo the_sub_field('photo'); ?>">
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/picture-of-health-photo-frame.png" height="240" width="360" />
   </a>
</div>

The img within the link is actually the photo frame, which I don't want to be included within the fancybox.

Answer 1

Have you checked, with Firebug or any other inspector, that the image being loaded by Fancybox is actually the "big image" that you want?

Because I have, and you are loading the exact same image. :)

Answer 2

You need to set class="fancybox" to the anchor <a> tag, not to the <div> tag so :

<div class="main-photo" rel="group" style="background-image:url('<?php echo $photo; ?>');">
   <a class="fancybox" href="<?php echo the_sub_field('photo'); ?>">
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/picture-of-health-photo-frame.png" height="240" width="360" />
   </a>
</div>