的fancybox - 修改JavaScript來添加選項

，我有以下的fancybox聲明在我的網頁：的fancybox - 修改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」選項，我只是不知道如何將它與懸停函數集成在一起，因爲Fancybox中沒有選項來指定懸停事件的函數。（我希望這是有道理的。）

無論如何，有沒有人知道我可以修改上述JavaScript來控制寬度和高度？

謝謝！

來源

2012-01-24 Yazmin

對不起，但images在fancybox不使用「autoDimensions」，「width」和「height」API選項。這些選項僅適用於ajax，iframe或inline內容。在的fancybox

的圖像顯示或者，重新調整大小以適合視口（當autoScale設置爲true），或在它們的原始尺寸（當autoScale設置爲false）。如果原始尺寸大於視口的高度，則必須向下滾動父頁面以查看整個圖像。

除了上述以外，在fancybox中重新調整圖像大小的唯一方法是使用jQuery css() API（我不會建議它會產生奇怪的行爲）。

<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 v1.3.x.：您可以使用的fancybox的回調選項onComplete喜歡叫它

使用它需要您自擔風險。

來源

2012-01-24 19:10:51 JFK

您可以隨時將代碼添加到document.ready以便每次觸發。所以只需檢查事件並調整大小。

或由於元素在第一隱藏的，可以使用show事件

來源

2012-01-24 17:16:35 udnisap

檢查事件的OnStart得到事件觸發。在嘗試加載內容之前將調用onstart，並且可以在其中添加調整大小的操作。

來源

2012-01-24 17:22:18 Ninja

的fancybox - 修改JavaScript來添加選項

回答

相關問題