Javascript Jquery非常新。正在尝试创建Photoset网格_Javascript_Jquery_Html_Css

Javascript Jquery非常新。正在尝试创建Photoset网格

javascript jquery html css

Javascript Jquery非常新。正在尝试创建Photoset网格,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我是Jquery新手，我正在尝试创建一个照片集网格，当你使用我在网上找到的Jquery插件点击图片时，它会变得更大。我的代码看起来像这样 <script> $('.photoset-grid-lightbox').photosetGrid({ highresLinks: true, rel: 'withhearts-gallery', gutter: '2px',

我是Jquery新手，我正在尝试创建一个照片集网格，当你使用我在网上找到的Jquery插件点击图片时，它会变得更大。我的代码看起来像这样

    <script>

        $('.photoset-grid-lightbox').photosetGrid({
            highresLinks: true,
            rel: 'withhearts-gallery',
            gutter: '2px',

            onComplete: function() {
                $('.photoset-grid-lightbox').attr('style', '');
                $('.photoset-grid-lightbox a').colorbox({
                    photo: true,
                    scalePhotos: true,
                    maxHeight:'90%',
                    maxWidth:'90%'
                });
            }
        });

    </script>
</head>
<body>
    <div class="photoset-grid-lightbox" data-layout="131" style="visibility: hidden;">
        <img src="images/InspirationalQuote.jpg" />
        <img src="images/jakachu-tiger.jpg"  />
        <img src="images/Japanese_Painting_by_trinifellah.jpg" />
    </div>


$（'.photoset grid lightbox'）.photoset grid({
highresLinks：没错，
雷尔：“withhearts画廊”，
排水沟：“2px”，
onComplete:function（）{
$（'.photoset grid lightbox'）.attr（'样式'，''）；
$（'.photoset网格光盒a'）。颜色盒({
照片：没错，
是的，
最大高度：'90%'，
最大宽度：'90%'
});
}
});

插件的链接：

任何帮助都会被欣然接受。谢谢大家!

编辑：这里有一个指向JSFIDLE的链接假定您需要确保：

jQuery库包含在文档的

您的photoset grid JS包含在文档的 jQuery

然后，包括以下内容，包装在jQuery的document.ready check中，如建议的，包括在后面：

<script type="text/javascript">
    $(function() {
        $('.photoset-grid-lightbox').photosetGrid({
            highresLinks: true,
            rel: 'withhearts-gallery',
            gutter: '2px',

            onComplete: function () {
                $('.photoset-grid-lightbox').attr('style', '');
                $('.photoset-grid-lightbox a').colorbox({
                    photo: true,
                    scalePhotos: true,
                    maxHeight: '90%',
                    maxWidth: '90%'
                });
            }
        });
    });
</script>

还是速记

$(function(){ /* your code here */ });

您可以确保浏览器读取javascript，但延迟运行$.photosetGrid（）代码块，直到呈现页面的HTML之后。否则，jQuery无法查看文档对象模型，因此$（'.photoset grid lightbox'）。length将返回0-页面上没有此类元素

有关

的更多信息，能否告诉我们您是否在控制台中看到任何错误？您还可以尝试通过使用$（function（）{your code here}）包装JS代码来模拟您的工作@roobeedeedada我的Dreamweaver应用程序中似乎没有任何错误。不过，这里是jsfiddle。

$(function(){ /* your code here */ });