在最近的项目中,遇到一个问题,要实现这样的效果:
点pic_small.Aspx页面的缩略图后弹出pic_all.aspx页面,pic_all.aspx页面的大小要根据图片大小自动调整,而且要有图片的说明信息,还可以点上一幅和下一幅等进行翻页。
实现过程如下:
pic_small.Aspx页面缩略图处的代码为:
<IMG id="imgPic" style="CURSOR: hand" border=0 height="95" οnclick="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"ID")%>)" src=@#<%#"Images/Product/" + DataBinder.Eval(Container.DataItem,"PicUrl")%>@# width="118" runat="server">
ShowWindow保存在OpenWindows.js文件中,内容如下:
function ShowWindow(id)
{
window.open(@#pic_all.aspx?ID=@# + id,@#_blank@#,@#Scrollbars=no@#);
}
以下代码即可实现点缩略图后弹出页面pic_all.aspx显示图片信息,下面要实现的是pic_all.aspx页面根据图片的大小自动调整。
把以下代码放在pic_all.aspx页面的<Head></Head>之间:
<script>
function window.onload()
{
var obj=document.getElementById("PicUrl");
window.resizeTo(obj.offsetWidth + 127,obj.offsetHeight + 75);
}
</script>