自我LV1

這個功能的目的一樣是在Gridview顯示圖片並實現點選圖片放大縮小

只是多了利用div的區塊來顯示加大或關閉

 

程式:

CS

 protected void Grid2_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        string PATH = "https://****";圖片的網址

        Image img = (Image)e.Row.FindControl("Image2");
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            DataRowView row = (DataRowView)e.Row.DataItem;
            Image img1 = (Image)e.Row.FindControl("Image2");

            if (!string.IsNullOrEmpty(row["FILE_NAME"].ToString()))
            {
                img.ImageUrl = PATH + row["FILE_NAME"].ToString();

                //獲取當前行的圖片路徑
                string ImgUrl = img.ImageUrl;
                //圖片欄位位置，由0開始
                //設定JS的事件-onclick/CellClick
                e.Row.Cells[4].Attributes.Add("onclick", e.Row.Cells[4].ClientID.ToString()
                    + ".checked=true;CellClick('" + ImgUrl + "')");

               
            }


        }
      


    }

HTML

<asp:TemplateField>
   <ItemTemplate>
      <asp:Image ID="Image2" runat="server"  HorizontalAlign="Center"  Length="100px" Width="100px"/>                                  
   </ItemTemplate >
</asp:TemplateField>


<div id="Show_img_Max" onclick="divClick()">
     <div>                
          <img src="" class="Show_imgStyle" />
     </div>
</div>

JS

function CellClick(ImgUrl) {
        //alert(ImgUrl);
        $(".Show_imgStyle").attr("src", ImgUrl);
        $("#Show_img_Max").css("display", "block");
       
    }

function divClick() {
        //alert("Show_img_Max");
        $("#Show_img_Max").css("display", "none");
    }

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: fixed;
    top: 1px;

    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    margin: auto;
}

#Show_img_Max > div {
    margin: 100px auto;
    width: 550px;
    height: 350px;
}

#Show_img_Max .Show_imgStyle {
    width: 550px;
    height: 350px;
}

.Show_Label {
    color: red;
}

 

 

自我LV~