如何在 prettyPhoto 图像查看器中设置缩略图答案

【问题标题】：How to Set Thumbnails in prettyPhoto Image Viewer如何在 prettyPhoto 图像查看器中设置缩略图
【发布时间】：2014-01-17 22:46:02
【问题描述】：

我的 prettyPhoto 标记（用于缩略图）看起来像这样。

<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=771e72aa-2b0a-ea59-75ff-cc769801ce53) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="DSC01226.JPG" href="../GetFile.aspx?file=771e72aa-2b0a-ea59-75ff-cc769801ce53">
        <span>&nbsp;</span>
    </a>
</div>
<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=e82511f0-f21b-02fd-71af-7937ad2b2f17) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="DSC01231.JPG" href="../GetFile.aspx?file=e82511f0-f21b-02fd-71af-7937ad2b2f17">
        <span>&nbsp;</span>
    </a>
</div>
<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=5ada5be3-774f-bda6-b4ff-b88083ba651f) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="IMAG0159.jpg" href="../GetFile.aspx?file=5ada5be3-774f-bda6-b4ff-b88083ba651f">
        <span>&nbsp;</span>
    </a>
</div>
<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=14331233-9c39-4b39-8cdc-2e44de4f3457) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="IMAG0160.jpg" href="../GetFile.aspx?file=14331233-9c39-4b39-8cdc-2e44de4f3457">
        <span>&nbsp;</span>
    </a>
</div>
<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=04f4dc6c-20da-0786-c584-a7fb359ad38f) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="sadfasdfs" href="../GetFile.aspx?file=04f4dc6c-20da-0786-c584-a7fb359ad38f">
        <span>&nbsp;</span>
    </a>
</div>
<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=63a15fc6-a920-2add-d9f0-06e213eba0bc) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="lkjlkjlkjlkj" href="../GetFile.aspx?file=63a15fc6-a920-2add-d9f0-06e213eba0bc">
        <span>&nbsp;</span>
    </a>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("a[rel^='prettyPhoto']").prettyPhoto({
            theme: 'light_square',
            autoplay_slideshow: true,
            slideshow: 5000
        });
    });
</script>

还有我的 CSS：

div.PrettyPhotoContainer {
    display: inline-block;
    width: 128px;
    height: 96px;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;

    border: 1px solid silver;
    padding: 0;
    margin: 4px;
}
a.PrettyPhotoContainer
{
    display: block;
    width: 100%;
    height: 100%;
}

我最终将缩略图图像指定为背景图像，因为这是我可以按照我需要的方式将图像居中在 <div> 标记中的唯一直接方式。

一切都很好，只是当我单击图像时，会弹出较大的照片查看器，但未设置弹出框底部的缩略图。（在我的例子中，它们都是带有向右箭头的黑框，但检查这些图像我发现 src 属性根本没有设置。）

有谁知道 prettyPhoto 从哪里获取弹出窗口底部显示的缩略图的图像？似乎它可能以某种方式从原始缩略图的 src 属性中获取它。如果是这样，有没有办法让它与我的标记一起使用？

【问题讨论】：

标签： javascript css prettyphoto

【解决方案1】：

事实证明，overly 图库中的缩略图取自完整尺寸的图像，并且出于某种原因，它要求图像 URL 具有有效的图像文件扩展名。

如您所见，我的没有。如果我使用 ../GetFile.aspx?file=771e72aa-2b0a-ea59-75ff-cc769801ce53&.jpg 之类的名称，缩略图会按预期显示。

【讨论】：