Question

我是Jquery的新手，我正在努力想要创建一个Photo set网格，当你点击图片时，使用我在网上找到的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>

插件的链接：

http://stylehatch.github.io/photoset-grid/

任何帮助都会很乐意接受。谢谢！

编辑：这是jsfiddle http://jsfiddle.net/DamianG/6UjsB/

的链接

Answer 1

假设this is the end result you're looking for，您需要确保：

您的jQuery库包含在您的文档中
之后，您的photoset-grid JS包含在您的文档中 jQuery

然后，包含以下内容，包含在jQuery的document.ready检查中，建议为@pl4g4，之后包括：

<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>

我猜猜photoset-grid没有加载？这是因为首先加载元素的内容，然后加载正文中的内容。通过

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

或简写

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

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

关于jQuery(document).ready();

对Jquery来说很新。试图创建一个Photoset网格

1 个答案: