具有多个图库的PHP动态Colorbox

Question

我有一个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与之不匹配。

Answer 1

Colorbox将默认使用您的rel属性。只需使用：

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

通过设置您自己的单击事件，您将在每次单击项目时将colorbox重新分配给元素，这将是低效的。

Answer 2

您可以尝试使用Pretty Photo插件，通过单击单个图像来显示灯箱中的多张照片。当我点击来自Pikachoose的图片时，我使用了PikaChoose图库，我使用Pretty Photo插件demo for Pretty显示了灯箱内的图片列表。希望这能对你有所帮助。