0

私がやろうとしているのは、関係のないdivをクリックして、iframeとカップルの画像を持つfancyboxギャラリーを呼び出すことです。画像グループではすべて正常に動作しますが、iframe を追加しようとすると、「要求されたコンテンツを読み込めません。後でもう一度やり直してください」と表示されます。

以下はhtmlとjavascriptです。

    <div id="gallery_1">Gallery</div>


     <script>
        $('#gallery_1').click(function (){
        $('#gallery_1').addClass('cur_gal');
        $.fancybox([
          'iframe.html',
          '2.jpg',
          '1.jpg'
        ], 
     {   'padding' : 0,
         'transitionIn' : 'fade',
         'transitionOut' : 'fade',
         'type' : 'image',
         'changeFade' : 1,
         'loop' :false,
         afterClose: function() {
        $('#gallery_1').removeClass('cur_gal');
      }
    });
    });
    </script>

'type' : 'image' を削除しようとしましたが、iframe が表示されません。また、タイプを iframe に変更しようとしましたが、画像がめちゃくちゃになります。サイズが正しくなく、スクロール バーが表示されます。誰かが iframe と画像を正しく表示する方法を知っているでしょうか?

4

1 に答える 1

0

コンテンツを個別に指定する必要がありますtypeが、グローバルに行っているため、この方法でスクリプトを変更してみてください

$(document).ready(function () {
    $('#gallery_1').click(function () {
        $('#gallery_1').addClass('cur_gal');
        $.fancybox([{
            href: "iframe.html",
            type: "iframe"
        }, {
            href: "image2.jpg",
            type: "image"
        }, {
            href: "image1.jpg",
            type: "image"
        }], {
            padding: 0,
            // 'transitionIn': 'fade', // for v1.3.4 not compatible
            // 'transitionOut': 'fade', // for v1.3.4 not compatible
            // 'type' : 'image', // sets type of content globally
            changeFade: 1,
            loop: false,
            afterClose: function () {
                $('#gallery_1').removeClass('cur_gal');
            }
        });
    });
}); // ready

JSFIDDLEを参照してください

EDIT：この行を変更することもできます

$('#gallery_1').click(function () {
    $('#gallery_1').addClass('cur_gal');

これに

$('#gallery_1').click(function () {
    $(this).addClass('cur_gal');
于 2013-05-19T17:25:20.240 に答える