1

我使用photoset-grid : http://stylehatch.github.io/photoset-grid/到 tumblr 博客。代码：

<body>
<div class="wrapper">
{block:IndexPage}
    <ul id="posts">
        {block:Posts}
            <li>
                {block:Photoset}
                    <div class="photoset-grid" data-layout="{PhotosetLayout}" data-id="photoset{PostID}" style="visibility: hidden;">
                        {block:Photos}
                            <img src="{PhotoURL-500}"
                            {block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}
                            {block:Caption}alt="{Caption}"{/block:Caption} />
                        {/block:Photos}
                    </div>
                    {block:Caption}
                        {Caption}
                    {/block:Caption}
                {/block:Photoset}
            </li>
        {/block:Posts}
    </ul>
{/block:IndexPage}
</div>

<script type="text/javascript">
$('.photoset-grid').photosetGrid({
  highresLinks: true,
  rel: $('.photoset-grid').attr("data-id"),
  gutter: '10px',

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

问题：不为不同的图片集更改“photosetGrid”中的“rel”参数。它在网站上的外观：

第一篇文章：

<div class="photoset-grid" data-layout="122" data-id="photoset58370010471" style="" data-width="600">
<div class="photoset-row cols-1" style="margin-bottom: 10px; clear: left; display: block; overflow: hidden; height: 390px;">
<a href = "bla0.jpg" class = "photoset-cell highres-link cboxElement" rel = "photoset58370010471" style = "float: left; display: block; line-height: 0; box-sizing: border-box; width: 100%; ">

第二个帖子：

<div class="photoset-grid" data-layout="122" data-id="photoset58327675703" style="" data-width="600">
<div class="photoset-row cols-1" style="margin-bottom: 10px; clear: left; display: block; overflow: hidden; height: 468px;">
<a href = "bla1.jpg" class = "photoset-cell highres-link cboxElement" rel = "photoset58370010471" style = "float: left; display: block; line-height: 0; box-sizing: border-box; width: 100%;">

更改中的参数“data-id”和中的参数“rel”保持不变。

如何使参数 'rel' in 与 'data-id' in 不同？

也就是说，不同帖子中的图片集具有不同的标识符，并且不是一个集合。

谢谢！

+++决定+++

<script type="text/javascript">
        $.each($('.photoset-grid'), function() { 
            $(this).photosetGrid({
              highresLinks: true,
              rel: $(this).attr('data-id'),
              gutter: '10px',

              onComplete: function(){
                $('.photoset-grid').attr('style', '');
                $('.photoset-grid a').colorbox({
                    photo: true
                });
              }
            }); 
        });
    </script>
4

1 回答 1

2

问题出在您同时调用 photosetGrid() 函数到多个选定元素的事实。您需要利用 jQuery 的 each() 函数来迭代元素。

于 2013-08-19T21:12:20.917 回答