fancybox - iframe内の画像のサイズ変更

Question

私はfancyboxバージョン2.1.5を使用しています 私がやっているのは、幅900、高さ500のfancybox iframeに大きな画像を表示することです。そのiframeに収まりません。 私は、適切なクラスをキャプチャするのに苦労しています。または画像にナビゲートしてサイズを変更する方法です。私が試したことはbeforeShow機能を使用してこれを実行されています

    $(".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機能を使用して、ファンシーフレームiframe内の画像を適切にサイズ変更するにはどうすればよいですか？ ありがとう！

Answer 1

私は私がロードされていないfancyboxはiframeで問題を抱えていたので、これは助けfancybox 3を使用して私のために

    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 
        } 

Answer 2

それを考え出し：

このコードをポーリングimgタグのためのiframeをイメージがロードされているかどうかを確認するために100msecごとに最大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); 
    } 

};