Question

我要做的是通过点击一个不相关的div调用fancybox gallery，它有iframe和几个图像。一切都适用于图像组，但当我尝试添加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');

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

1 个答案: