Javascript 如何在“图像查看器”中设置缩略图
我的标记(用于缩略图)看起来像这样Javascript 如何在“图像查看器”中设置缩略图,javascript,css,prettyphoto,Javascript,Css,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="DSC01
<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> </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> </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> </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> </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> </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> </span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_square',
autoplay_slideshow: true,
slideshow: 5000
});
});
</script>
我最终将缩略图指定为背景图像,因为这是唯一一种直接的方法,我可以按照需要的方式将图像居中于
标记中
一切正常,只是当我点击一个图像,弹出较大的照片查看器时,弹出框底部的缩略图没有设置。(在我的例子中,它们都是右边有箭头的黑框,但检查这些图像时,我发现src属性根本没有设置。)
有人知道从哪里可以得到弹出窗口底部显示的缩略图的图像吗?看起来它可能是从原始缩略图的src属性中获得的。如果是这样的话,有没有办法让它与我的标记一起工作?结果是,图库中的缩略图取自完整大小的图像,出于某种原因,它要求图像URL具有有效的图像文件扩展名 正如你所看到的,我的不是。如果我使用的名称类似于
。/GetFile.aspx?file=771e72aa-2b0a-ea59-75ff-cc769801ce53和.jpg
,则缩略图将按预期显示
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%;
}