使用API​​的自定义图库图像的PrettyPhoto

Question

我有一个包含大图像和一组较小拇指的页面。单击其中一个较小的拇指时，大图像将替换为用户单击的相应图像。

当您点击大图片时，会弹出一个漂亮的盒子灯箱。

我正在努力使它成为一个画廊，使用拇指上的图像作为画廊图像打开。

$("a[rel^='prettyPhoto']").click(function(event){
    event.preventDefault();
    api_images = [];
    $('#gallery-thumbs li').each(function(index, element){
        var largeImage = $(element).attr('data-large');// I'm storing the large version of each thumbnail in this HTML property
        api_images.push(largeImage);
    });
    $.prettyPhoto.open(api_images);// This is the line with the error
});

我收到错误“Uncaught TypeError：undefined不是函数”。

谢谢

Answer 1

嗯，这有点像黑客，但它确实有效。我创建了一个隐藏元素

<a rel="target" href="/cms_images/gallery/foose-legend-55-bel-air.jpg" style="display:none">
    <img src="/cms_images/random.jpg" alt=" />
</a>

然后当用户点击真实图像时，我使用隐藏元素

启动prettyPhoto

    $("a[rel^='prettyPhoto']").click(function(event){
        event.preventDefault();
        var indexBig = $(this).attr('data-index');
        api_images = [];
        // Initiate prettyPhoto by passing it a hidden target
        $("a[rel^='target']").prettyPhoto();
        $('#gallery-thumbs li').each(function(index, element){
            var largeImage = $(element).find('a').attr('data-large');
            api_images.push(largeImage);
        });
        $.prettyPhoto.open(api_images);
        $.prettyPhoto.changePage(indexBig - 1);
        // Undo prettyPhoto so it can be reused
        $("a[rel^='target']").unbind('click');
        return false;
    });