自我LV1

這個狀況是Asp.NET 用Gridview顯示圖片時

因圖片欄位太小

導致看不清圖

所以做了可以放大、縮小的功能

 

這個做法是低階版

主要是用js、css來控制Gridview的圖片欄位

加大或縮小width 、height

當點選到Gridview的圖片

該圖片欄位就放大

再按一次就縮小

 

程式:

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

 function ImageClick(img) {
        //alert(img);
        var clientId = '#' + img.id

        var widthString = $(clientId).css("width");
        var heightString = $(clientId).css("height");
        var widthUnit = widthString.replace("px", "");
        var heightUnit = heightString.replace("px", "");
        var width = parseInt(widthUnit, 10);
        var height = parseInt(heightUnit, 10);



        if ($(clientId).hasClass("BigImage")) {
            width = (width / 10);
            height = (height / 10);
            $(clientId).css("width", width + "px");
            $(clientId).css("height", height + "px");
            $(clientId).removeClass("BigImage");
        }
        else {
            width = (width * 10);
            height = (height * 10);
            $(clientId).css("width", width + "px");
            $(clientId).css("height", height + "px");
            $(clientId).addClass("BigImage");
        }

    }

 

 

自我LV~