0

我有从 php 代码生成的动态图库，仅由一张图片表示。当您选择该图片时，它应该会打开一个包含多张照片的颜色框。

问题是，我的彩盒似乎无法识别我的 rel。

<script>
        $(document).ready(function(){
            //Examples of how to assign the ColorBox event to elements

            $("a.gallery").click(function(){
                var galleryRelative = $(this).attr("rel");
                alert(galleryRelative);

                $(this).colorbox({rel:galleryRelative});

            });
        });
    </script>

还有我的 HTML

foreach($kittens as $key => $kitten){                 

    echo '<div class="block1 smallblock">';

    echo '<a class="gallery" rel="gallery0" title="blablabla" href="../img/block-03.jpg"> 
             <img src="../img/block-03.jpg" width="299" height="233" alt="kitten" />
          </a>';

    echo '<p><a href="../img/block-03.jpg" rel="gallery0" title="blabla"></a></p>';
    echo '<p><a href="../img/block-02.jpg" rel="gallery0" title="blabla"></a></p>';

    echo '</div>';
}

我将毫无问题地生成gallery0（我在我的脚本中成功读取了我的a.gallery中的rel属性，但colorbox不会匹配它。

4

2 回答 2

1

默认情况下，Colorbox 将使用您的 rel 属性。只需使用：

$("a.gallery").colorbox();

通过设置您自己的点击事件，您每次点击一个项目时都会将颜色框重新分配给您的元素，这将是低效的。

于 2012-06-26T16:15:25.510 回答
0

您可以更好地尝试使用 Pretty Photo 插件，通过单击单个图像在灯箱中显示多张照片。当我单击 PikaChoose 中的图像时，我使用了 Pikachoose 库，我使用 Pretty Photo Plugin演示在灯箱内显示图像列表。希望这对你有用

于 2012-06-26T07:57:56.760 回答