javascript - 调用具有 iframe 和图像的 fancybox 库

Question

我要做的是通过单击不相关的 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 和图像有任何想法？

Answer 1

您需要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

编辑：您也可以更改此行

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

进入这个

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