web-dev-qa-db-ja.com

Fancybox全幅

私はコーディングに不慣れで、すべてのファンシーボックスを私の ホームページ 全幅で応答性の高いもの( eg )にのみ入れようとしていますが、これらのオプションのどれも仕事をしていません( fitToView、autoSizeまたはaspectRatio)。

jQuery

jQuery(document).ready(function() {
jQuery( "#site-logo" ).click(function( e ) {
    alert( "As you can see, the link no longer took you to jquery.com" );
    jQuery.scrollTo( 0 , 1000, { easing:'easeInOutExpo' });
$(".fancybox").fancybox({
    helpers : {
        media: true 
        },
        width: 1600,
        height: 870,
        aspectRatio: true,
        scrolling: no,
        });
    });
});
7
joemimmo

AutoSize falseを追加し、aspectRatioを削除して、幅を「100%」に変更してみてください。

jQuery(document).ready(function() {
    jQuery( "#site-logo" ).click(function( e ) {
    alert( "As you can see, the link no longer took you to jquery.com" );
    jQuery.scrollTo( 0 , 1000, { easing:'easeInOutExpo' });
    $(".fancybox").fancybox({
        helpers : {
            media: true 
        },
        width: "100%",
        height: 870,
        autoSize: false,
        scrolling: false
        });
    });
});
6
Dimas Pante

今後の検索を検討している他の人にとっては、画像の高さがオーバーフローしている場合でも、画像(ポップアップ)を全幅にする必要があるという同じ問題が発生したため、スクロール可能にしたかったのです。とにかく、これが将来誰かに役立つことを願っています。

<script type="text/javascript">
jQuery(document).ready(function($) {
    $(".fancybox").fancybox({
        autoSize : true,
        scrolling : 'auto',
        fitToView : false,
        width : 'auto',
        maxWidth : '100%',
    });
});
</script>
1
Derek