Question

I have the following Fancybox declarations in my page:

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox().hover(function() {
            $(this).click();
        });
        $("#fancybox-outer").fancybox().mouseleave( function() {
               $("#fancybox-overlay").click();
         });
    });
</script>

I need to reduce the size of the image used by the modal box and I believe I can do that by setting the “autoDimensions”, “width”, and “height” options available with Fancybox, I just don’t know how to integrate that with the hover function, since there isn’t an option in Fancybox to specify a function for a hover event. (I hope this is making sense.)

Anyhow, does anyone know how I can modify the above javascript to control the width and height?

Thanks!

Answer 1

Sorry but images in fancybox don’t use “autoDimensions“, “width“, and “height” API options. Those options are for ajax, iframe or inline content only.

Images in fancybox are displayed either, re-sized to fit into the viewport (when autoScale is set to true) or in their original size (when autoScale is set to false). If the original size is bigger than the height of the viewport, then you have to scroll down the parent page to see the whole image.

The only way you can re-size images in fancybox other than above is using jQuery css() API (which, I wouldn’t advise … it produces an odd behavior). You can call it using fancybox’s callback option onComplete like:

<script type="text/javascript">
 $(document).ready(function() {
  $(".fancybox").fancybox({
   'onComplete': function(){
    $("#fancybox-outer, #fancybox-content").css({'width':300,'height':150});
   }
  }).hover(function() {
   $(this).click();
  });
  $("#fancybox-outer").fancybox().mouseleave( function() {
   $("#fancybox-overlay").click();
  });
 });
</script>

Note that options mentioned above are for fancybox v1.3.x.

Use it at your own risk.