fancyBox on WordPress Resize onWindow Resize

Question

I am using a fancyBox plugin for WordPress and I have an issue. When I resize the window the pop-up doesn't resize, but If I navigate through the images with the window resized it properly resizes the pop-up. I am trying to make an extra Callback like this:

window.onresize = function(event) {
   $.fancybox.resize();
}

But it displays an error: $ is not defined.

Answer 1

Try using jQuery instead of $

window.onresize = function(event) {
   jQuery.fancybox.resize();
}

Answer 2

You should use $(window).resize() and not window.onresize, as using native event handlers can interfere or be interfered with by jQuery. So use the jQuery methods if you have jQuery.

I don't know what version of FancyBox you have^$, but if you're on the latest (2.1.0), you can pass autoDimensions: true to the constructor and it will do it for you:

autoDimensions: true
For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results

$(document).ready(function() {
    $("a").fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        width: 400,
        height: 300,
        autoDimensions: true
    });
});

Demo, Source

You can also use one or more of the following:

 Method                 Description
----------------------------------------------------------------------------
 $.fancybox.resize  // Auto-resizes FancyBox height to match content height
 $.fancybox.center  // Centers FancyBox in viewport

---

_{^$ According to this answer from 2010, $.fancybox.resize() was for v1.3 and below. However, it is actually referenced in the latest (September 19, 2012) docs, down at the very bottom under Public Methods.}

Answer 3

Maybe try this...

JQuery(document).ready(function() {

  window.onresize = function(event) {
    JQuery('.fancybox').resize();
  }

)};

The .fancy is a class correct?