一、创建一个gridview控件,并添加列。
其中ImageField就是显示图片的列,属性DataImagteUrlField绑定为图片的路径,也就是数据库存储图片路径的字段名。
二、创建一个用来显示大图片的div 以及Img控件。以及css样式、js。
Html
<div id="Show_img_Max" onclick="divClick()">
<div>
<img src="" class="Show_imgStyle" />
</div>
</div>
css样式
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
#form1 > .divMain {
margin: 0 auto;
padding-top: 150px;
width: 800px;
height: 500px;
text-align: center;
}
#Show_img_Max {
position: absolute;
top: 1px;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
#Show_img_Max > div {
margin: 100px auto;
width: 550px;
height: 350px;
}
#Show_img_Max .Show_imgStyle {
width: 550px;
height: 350px;
}
js
function CellClick(ImgUrl) {
$(".Show_imgStyle").attr("src", ImgUrl);
$("#Show_img_Max").css("display", "block");
}
function divClick() {
$("#Show_img_Max").css("display", "none");
}
三、添加一个gridview行数据绑定后激发事件(RowDataBound),在该事件写代码。
protected void grdview_test_RowDataBound(object sender, GridViewRowEventArgs e)
{
//判断是否为数据行
if (e.Row.RowType == DataControlRowType.DataRow)
{
//设置图片的宽、高度
(e.Row.Cells[3].Controls[0] as Image).Width = 70;
(e.Row.Cells[3].Controls[0] as Image).Height = 50;
//获取当前行的图片路径
string ImgUrl = (e.Row.Cells[3].Controls[0] as Image).ImageUrl;
//给带图片的单元格添加点击事件
e.Row.Cells[3].Attributes.Add("onclick", e.Row.Cells[3].ClientID.ToString()
+".checked=true;CellClick('" + ImgUrl+ "')");
}
}
四、数据方面就自己添加了。效果图如下:
显示:
点击图片后:
然后点击其他地方或者图片就恢复原状。