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：

<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>

上面的代码有两个问题：首先，我必须每次点击超链接两次，以便出现Fancybox。第二个问题是，这不适用于HREF的rel属性，因此不会将内容显示为Fancybox库。为克服图库问题，我将jQuery(this).fancybox({替换为jQuery('.fancybox-iframe').fancybox({。这使得画廊功能有用。但是，Fancybox现在仅为单击的第一个链接获取iframeWidth变量的值。

有关如何将内容宽度变量传递给Fancybox以及维护图库功能的任何想法？顺便说一句，我正在使用Fancybox 2.0.5

Answer 1

如果您使用的是fancybox v2.x，则不需要使用jQuery .on()方法，因为fancybox已经使用“ live ”所以

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

应该这样做。

更新：

我修改了上面的代码，实际上事情比预期的要简单得多。

以下代码允许您通过width AND 动态传递ID参数，并拥有iframe库（只需点击一下）。只需添加afterLoad回调：

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。

选项2

或者，您也可以使用width属性动态传递data-width参数（如果您使用的是HTML5 DOCTYPE）而不是ID（并使用{{ 1}}重要的是什么）。我认为这将是一个更优雅的解决方案。

你的HTML应该看起来像

ID

和javascript几乎相同

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

我已经设置了一个DEMO，您可以使用see here

这两个选项

最后一点：Fancybox使用的jQuery(".fancybox-iframe").fancybox({ //options afterLoad: function(){ var iframeWidth = jQuery(".fancybox-iframe").eq(this.index).data("width"); this.width = iframeWidth } });// fancybox为15px，因此总padding为width，除非您将iframeWidth + 30选项设置为padding。< / p>

Answer 2

这是我用于colorbox（另一个灯箱）的内容，可能会让你了解你需要做什么：

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

在保持图库功能的同时，在.on（）中单击功能调用Fancybox

2 个答案: