fancybox - 在iframe中调整图像的尺寸

我正在使用fancybox版本2.1.5 我想要做的是在fancybox iframe中显示大约宽度900和高度500的大图像。当然，不适合那个iframe。我很难捕捉正确的类或导航到图像的方式来调整它的大小。我试着用beforeShow功能，做到这一点：fancybox - 在iframe中调整图像的尺寸

    $(".fancybox").fancybox({ 
        type: 'iframe', 
        href: source, 
        title: title, 
        width: 900, 
        height: 500, 
        closeBtn: false, 
        nextSpeed: 0, //important 
        prevSpeed: 0, //important 
        beforeShow: function() { 
         alert('its working!'); 
         $(".fancybox-iframe img").css("width","900px"); 
         $(".fancybox-iframe img").css("height","auto"); 
         $(".fancybox-iframe img").addClass("imageResize"); 
        } 
       });

然而，无论是$(".fancybox-iframe img")也不$(".fancybox-inner img")是触发IMG正确的方式。如何使用beforeShow函数在fancybox iframe中正确调整图像大小。谢谢！

来源

2017-06-06 coder

我想通了

    beforeShow: function() { 
         var newWidth = 900; // set new image display width 
         $('.fancybox-iframe').contents().find('img').css({ 
          width : newWidth, 
          height : "auto" 
         }); // apply new size to img 
        }

来源

2017-06-06 20:21:12 coder

我使用的fancybox 3没有被加载我在用的fancybox iframe的问题了，所以这有助于：

此代码轮询的iframe img标签每100毫秒最多2秒，查看图像是否已加载。如果它有，那么它将图像的属性设置为最大高度。

如果找不到iframe，则应立即清除间隔。

var fancyboxOptions = { 
    onComplete: function(instance, slide) { 
     var timeCompleted = new Date(); 
     function afterLoading() { 
      clearInterval(pollLoaded); 
      $('iframe',slide.$content[0]).contents().find('img').attr('height','100%'); 
     } 
     var pollLoaded = setInterval(function(){ 
      var iframe = document.getElementById($('iframe',slide.$content[0]).attr('id')); 
      var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; 
      if (iframeDoc) { 
       if ((iframeDoc.readyState === 'complete') 
        && ($('iframe',slide.$content[0]).contents().find('img').length > 0)) { 
        afterLoading(); 
       } 
       // try for 2 seconds then stop. 
       if (new Date() - timeCompleted > 2000) { 
        clearInterval(pollLoaded); 
       } 
      } 
      else { 
       clearInterval(pollLoaded); 
      } 
     },100); 
    } 

};

来源

2017-10-22 12:46:05 pgee70

fancybox - 在iframe中调整图像的尺寸

回答

相关问题