ajaxで生成した要素に対するfancyboxのオプション設定

Question

###前提・実現したいこと
ajaxで動的に生成した要素に対して、fancyboxを割り当てています。
本来できないらしいのですが、live関数を使うとできるとのことで、
一度liveで設定してから、それ自体にfancyboxを起動させています。
参考： https://2inc.org/blog/2012/03/02/1270/

jQuery('.fancybox').live('click', function() {
    jQuery.fancybox(this);
    return false;
});

しかし、これだとfancyboxのオプションが設定できないため、
設定できるようにしたいのです。

jQuery('.fancybox').live('click', function() {
    jQuery(this).fancybox( { // <- 変更
        "width": 450, // <- サイズを指定
        "height": 200
    });
    return false;
});

とすると、1回目のクリックでは何も起きず、2回目からfancyboxが起動してしまいます。サイズ指定もききません。

同じく https://2inc.org/blog/2012/03/02/1270/ を参考に、

jQuery('.fancybox').live('hover', function() { // 'click' -> 'hover'
    jQuery(this).fancybox( {
        "width": 450,
        "height": 200,
    });
    return false;
});

に変更しましたが、fancyboxは一回で起動しますが、サイズ指定がききません。
ajaxで生成した要素に対してのオプション設定は不可能なのでしょうか。

###バージョンなど
jQuery 1.4.2 (理由があり、1.8以下を使用しています。)
fancybox 1.3.1

わかる方いらっしゃいましたら、よろしくお願いいたします。

Answer 1

以下の形でもオプションを指定できます。

jQuery.fancybox(this);

↓

jQuery.fancybox(
    this, 
    {
        'autoDimensions'	: false,
        'width'         	: 350,
        'height'        	: 'auto',
        'transitionIn'		: 'none',
        'transitionOut'		: 'none'
    }
);

Fancybox - Tips & Tricks

ajax周りであれば、上記の5番も参考になるかと思います。

また、高さ、幅が有効なのはiframe、swfのみのようですが、
どちらになりますか？

Comments

[aruri]

なるほど、thisをカンマで区切る書き方があったのですね...！
こちらのオプションの値をまるっとコピーしてみたところ、動作しました。
ちなみにifameやswfではなく、ページ内のdiv要素をポップアップしています。
（自分で書いたところ動かなかったので、ダブルコーテーションがダメだったのでしょうか）

大変たすかりました、ありがとうございます！
jQueryとjavascript、ちゃんと勉強しようと思います。