Question

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

问题是，我的colorbox似乎无法识别我的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与它不匹配。

Answer 1

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

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

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

Answer 2

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

带有多个图库的PHP动态Colorbox

2 个答案: