ギャラリー機能を維持しながら.on（）内のFancyboxを呼び出す

Question

Fancybox iframe内で動的な幅のコンテンツを読み込む必要があります。コンテンツに合わせてiframeのサイズを変更するには、Fancybox呼び出しにコンテンツの幅を渡す必要があります。私は、次を使用してこれを行っています

jQuery('#container').on('click', '.fancybox-iframe', function(e){ 
    e.preventDefault(); 

    var iframeWidth = parseInt(jQuery(this).attr('id')); 

    jQuery(this).fancybox({ 
     width   : iframeWidth, 
     height   : '100%', 
     autoSize  : true, 
     fixed   : true, 
     type   : 'iframe', 
     loop   : false, 
     padding   : 0, 
     closeBtn  : false, 
     afterLoad  : function() { 
          jQuery('body').css('overflow', 'hidden'); 
     }, 
     afterClose  : function() { 
          jQuery('body').css('overflow', 'auto'); 
     }, 
     helpers   : {title: {type: 'outside'}, overlay: {opacity: 0.8, css: {'background-color': '#FFFFFF'}}, thumbs: {width: 50, height: 50}, buttons: {}} 
    }); 
}); 

上記のHTML：まず、私は二回のハイパーリンクをクリックする必要があり、Fancyboxのために毎回：

<a id="<?php echo $content_width; ?>" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a> 
<a id="<?php echo $content_width; ?>" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a> 
<a id="<?php echo $content_width; ?>" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a> 

を上記のコードは二つの問題があります現れる。 2番目の問題は、HREFのrel属性では機能しないため、コンテンツをFancyboxギャラリーとして表示しないことです。ギャラリーの問題を解決するために、jQuery(this).fancybox({をjQuery('.fancybox-iframe').fancybox({に置き換えました。これにより、ギャラリーが機能するようになりました。しかし、Fancyboxはクリックされた最初のリンクの変数をiframeWidthに変更するだけです。

コンテンツの幅をFancyboxに渡す方法や、ギャラリー機能を維持する方法についてのアイデアはありますか？ところで、私はこれが（別のライトボックス）私はカラーボックスに使用するもので、あなたが何をする必要があるかに表情を与えることがありFancybox 2.0.5

Answer 1

あなたはfancyboxを使用している場合fancyboxはすでに「ライブ」そう

$(".fancybox-iframe").bind('click', function(){ 
    var iframeWidth = parseInt(jQuery(this).attr('id')); 
    }).fancybox({ 
    //options 
    width : iframeWidth, 
    }); 

はトリックを行う必要があります使用しているため、バージョン2.xは、あなたはjQueryの.on()メソッドを使用する必要はありません。

UPDATE：

私は上記の私のコードを改訂していると、実際に物事が予想よりはるかに簡単することができます。

次のコードは、IDとが（ちょうどシングルクリックで）のiframeのギャラリーを持っていて、動的にwidthパラメータを渡すことができます。

jQuery(".fancybox-iframe").fancybox({ 
//other API options here 
afterLoad: function(){ 
    var iframeWidth = parseInt(jQuery(".fancybox-iframe").eq(this.index).attr('id')); 
    this.width = iframeWidth 
} 
});// fancybox 

あなたはオプションwidthを設定する必要はありません注意：ちょうどこのafterLoadコールバックに追加します。

OPTION 2

またあなたも（あなたがHTML5 DOCTYPEを使用している場合）の代わりにIDのdata-width属性を使用して動的にwidthパラメータを渡す（そしてそれがどのような事項のためIDを使用する）ことができます。私はそれがよりエレガントな解決策になると思います。

あなたのHTMLはその後

<a data-width="<?php echo $content_width; ?>" id="myID" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a> 

のようになりますとJavaScriptはかなり私は、あなたがsee here

続くことができる2つのオプションがDEMOを設定している

jQuery(".fancybox-iframe").fancybox({ 
//options 
afterLoad: function(){ 
    var iframeWidth = jQuery(".fancybox-iframe").eq(this.index).data("width"); 
    this.width = iframeWidth 
} 
});// fancybox 

同じです注：Fancyboxは paddingを15pxとしますので、を設定しない限り、 widthは iframeWidth + 30になります。オプションは 0になります。

Answer 2

で働いています：

... 
onComplete: function() { 
    var container = $('.cboxIframe').contents().find(".innerElementWithWidthAndHeight"); 
    $.fn.colorbox.myResize(container.width() + 20, container.height() + 20); 
}