jQuery中的全宽库

时间:2013-01-21 17:07:56

标签: javascript jquery css

我的页面中有一个jQuery图库,我希望将它全宽到所有分辨率和屏幕。

The page

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时,它仍然出现 在其他屏幕上有所不同。

1 个答案:

答案 0 :(得分:2)

<强>更新

两个问题。

  1. 我从未定义viewportwidthviewportheight。要做那件事。

  2. 您不需要功能。只需定义两个变量,并将没有该函数的代码放在页面的<head>部分中。然后,当然,删除<body onload="resize()">,然后只放<body>

  3. 完成。最终代码如下所示:

    <!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%。

    测试一下,如果您有问题,请告诉我。