Fancybox - 私は私のページで、次のFancybox宣言を持っているオプション

Question

を追加するにはJavaScriptを変更します。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".fancybox").fancybox().hover(function() { 
      $(this).click(); 
     }); 
     $("#fancybox-outer").fancybox().mouseleave(function() { 
       $("#fancybox-overlay").click(); 
     }); 
    }); 
</script> 

を、私は、モーダルボックスで使用する画像のサイズを小さくする必要があると私は設定して、それを行うことができると信じてFancyboxで利用可能な "autoDimensions"、 "width"、 "height"オプションは、hoverイベントに関数を指定するFancyboxのオプションがないため、hover関数との統合方法はわかりません。 （私はこれが意味をなさないことを願っています）

誰もが、どのように私は幅と高さを制御する上記のJavaScriptを変更することができます知っている？

ありがとうございます！

Answer 1

申し訳ありませんが、

imagesはfancyboxに "autoDimensions"、 "width"、および "height" APIのオプションを使用しないでください。これらのオプションは、ajax,iframeまたはinlineコンテンツのみです。 （autoScaleがfalseに設定されている場合）fancyboxで

画像は、ビューポートに適合するように再サイズ、のいずれか表示（autoScaleがtrueに設定されている場合）、または元のサイズにされています。元のサイズがビューポートの高さよりも大きい場合は、親ページを下にスクロールして画像全体を表示する必要があります。

上記以外のfancyboxでイメージのサイズを変更できる唯一の方法は、jQuery css() APIを使用していることです（これは奇妙な動作です）。上記のオプションはfancyboxのv1.3.x.のためのものである

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".fancybox").fancybox({ 
    'onComplete': function(){ 
    $("#fancybox-outer, #fancybox-content").css({'width':300,'height':150}); 
    } 
    }).hover(function() { 
    $(this).click(); 
    }); 
    $("#fancybox-outer").fancybox().mouseleave(function() { 
    $("#fancybox-overlay").click(); 
    }); 
}); 
</script> 

注：あなたは次のようにfancyboxのコールバックオプションonCompleteを使用して、それを呼び出すことができます

自己責任で使用してください。

Answer 2

いつでも毎回トリガするようにdocument.readyにコードを追加できます。イベントを確認してサイズを変更してください。

または要素が最初に隠されているので、あなたはショーのイベントにイベントONSTARTため

Answer 3

チェックを使用してイベントトリガーを得ることができます。 onstartは、コンテンツをロードしようとする直前に呼び出され、そこでサイズ変更操作を追加できます。