0

ページに jQuery ギャラリーがあり、すべての解像度と画面に対して全幅にしたいと考えています。

ページ

jQuery:

$('#grid1').dynamicGallery({
                    src : 'gallery.xml',
                    height : 400,
                    width : 1350,
                    cols : 5,
                    min_rows : 1,
                    max_rows : 2,
                    random_heights : false,
                    padding: 1,
                    interval : 2000,
                    speed : 1000,
                    easing : 'easeOutQuad',
                    scale_images : true,
                    center_images : true,
                    click_action : 'lightbox',
                    show_title_in_lightbox : true
                });
  • ご覧のとおり、幅を大きくしてみましたが、ページの右側に移動します.cssでdivを中央に配置すると、他の画面ではまだ異なって表示されます.
4

1 に答える 1

2

アップデート：

2 つの問題。

  1. と を定義viewportwidthしたことはありませんviewportheight。そうしなきゃ。

  2. 関数は必要ありません。2 つの変数を定義し、関数を含まないコードを<head>ページのセクションに配置するだけです。次に、もちろん、 を削除して<body onload="resize()">を配置し<body>ます。

終わり。最終的なコードは次のようになります。

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />

    <title>Dynamic Grid</title>

    <meta name="description" content="" />
    <meta name="keywords" value="" />

    <link rel="stylesheet" href="http://www.tranceil.co.il/comp/css/layout.css" type="text/css" />
    <link rel="stylesheet" href="http://www.tranceil.co.il/comp/css/dynamic.grid.css" type="text/css" />
    <style>
        .shell > div {
            margin: 0px;
        }
    </style>
</head>
<body>
    <div class="shell" style="width: 100%; margin: 0 auto;">
        <div id="grid1"></div>
    </div>

    <script src="http://www.tranceil.co.il/comp/js/jquery.min.js"></script>
    <script src="http://www.tranceil.co.il/comp/js/dynamic.grid.gallery.js"></script>



    <script>
        var viewportwidth;
    var viewportheight;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

        (function($, undefined) {
            $(document).ready(function() {

                $('#grid1').dynamicGallery({
                    src : 'http://www.tranceil.co.il/comp/gallery.xml',
                    height : viewportheight,
                    width : viewportwidth,
                    cols : 5,
                    min_rows : 1,
                    max_rows : 2,
                    random_heights : false,
                    padding: 1,
                    interval : 2000,
                    speed : 1000,
                    easing : 'easeOutQuad',
                    scale_images : true,
                    center_images : true,
                    click_action : 'lightbox',
                    show_title_in_lightbox : true
                });

                $('#grid2').dynamicGallery({
                    src : 'http://www.tranceil.co.il/comp/gallery.xml',
                    height : 400,
                    width : 1350,
                    cols : 5,
                    min_rows : 1,
                    max_rows : 4,
                    random_heights : false,


            padding: 1,
                interval : 2000,
                speed : 1000,
                easing : 'easeOutQuad',
                scale_images : true,
                center_images : true,
                click_action : 'lightbox',
                show_title_in_lightbox : true
            });


        });
    })(jQuery);
</script>

元の投稿:

あなたの状況に合わせてこのコードをテストしていませんが、うまくいくはずです。

function resize() {
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

}

この関数は、ブラウザの高さと幅を取得します。<body>タグを次のように置き換えます

<body onload="resize()">

次に、ギャラリーの場合:

$('#grid1').dynamicGallery({
                    src : 'gallery.xml',
                    height : viewportheight,
                    width : viewportwidth,
                    cols : 5,
                    min_rows : 1,
                    max_rows : 2,
                    random_heights : false,
                    padding: 1,
                    interval : 2000,
                    speed : 1000,
                    easing : 'easeOutQuad',
                    scale_images : true,
                    center_images : true,
                    click_action : 'lightbox',
                    show_title_in_lightbox : true
                });

これにより、ギャラリーの高さと幅がビューポートと同じになるように設定され、画面が 100% いっぱいになります。

それをテストして、問題がある場合はお知らせください。

于 2013-01-21T17:12:49.540 に答える