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?

JFK · Accepted Answer · 2015-03-04T01:53:27.617

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

score 0 · Answer 2 · edited Mar 04 '15 at 19:46

0

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);

edited Mar 04 '15 at 19:46

Harry

59
7

answered Mar 03 '15 at 20:32

Thompson

1,954
10
33
58

I tried this code as well, but when I don't write line **paramsFancy.href='/index.php';** then the fancybox opens (see screenshot http://i.imgur.com/BkypWa9.png), and when I add that line, then nothing appears. – Harry Mar 03 '15 at 20:36

Fancybox iframe not working when called via javascript function

2 Answers2