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中調整圖像的尺寸

回答

相關問題