Fancybox iframe not working when called via javascript function

Question

I tried calling iframe in a fancybox, but it is not working.

Here is what I wrote:

        var paramsFancy={
            'transitionOut': 'elastic',
            'transitionIn': 'elastic',
            'speedOut': 300,
            'speedIn': 500,
            'autoScale': true,
            'centerOnScroll': true,
            'autoDimensions': true,
            'href' : '/index.php'
        };
        $.fancybox.open(paramsFancy);

I read the people comments from Open fancybox from function but nothing works for me.

Can anyone please help?

Answer 1

If you are using fancybox v1.3.4 (my guess, because the API options in your code above) then you need to do this :

$.fancybox(paramsFancy);

... because $.fancybox.open() is not a valid method for v1.3.x and below. It was introduced for v2.x and above.

Additionally, if you want to open an iframe , then you need to add the type API option to your settings like :

var paramsFancy = {
    transitionOut: 'elastic',
    transitionIn: 'elastic',
    speedOut: 300,
    speedIn: 500,
    autoScale: true,
    centerOnScroll: true,
    autoDimensions: true,
    href : '/index.php',
    type: "iframe" // need this for external pages
};

$.fancybox(paramsFancy);

See JSFIDDLE using fancybox v1.3.4

---

On the other hand, if you are really using fancybox v2.x, then you need to update your API options like :

var paramsFancy = {
    closeEffect: 'elastic', // transitionOut
    openEffect: 'elastic', // transitionIn
    closeSpeed: 300, // speedOut
    openSpeed: 500, // speedIn
    fitToView: true, // autoScale
    autoCenter: true, // centerOnScroll
    autoSize: true, // autoDimensions
    href: '/index.php',
    type: "iframe" // you still need this
};

Notice I commented out the options for v1.3.4

Then you could either use

$.fancybox(paramsFancy);

or

$.fancybox.open(paramsFancy);

... since the first method is backwards compatible.

See JSFIDDLE using fancybox v2.1.5

Answer 2

This should work :

    var paramsFancy={
        'transitionOut': 'elastic',
        'transitionIn': 'elastic',
        'speedOut': 300,
        'speedIn': 500,
        'autoScale': true,
        'centerOnScroll': true,
        'autoDimensions': true,
        'href' : '#contentdiv',
        'type': 'iframe'
    };
    paramsFancy.href='/index.php';
    $.fancybox.open(paramsFancy);