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

我的prettyPhoto标记（缩略图）看起来像这样。如何在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="DSC.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属性中获取它。如果是这样，有什么办法让它与我的标记一起工作？

来源

2014-01-17 Jonathan Wood