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」パラメーターを変更しない。Web サイトでの表示方法:

最初の投稿:

<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%; ">

2 番目の投稿:

<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' を 'data-id' で変更するにはどうすればよいですか?

つまり、異なる投稿の写真のセットには異なる識別子があり、コレクションではありませんでした。

ありがとうございました！

+++欲望+++

<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 に答える