팝업이있는 그리드의 이진 이미지 표시

Question

내 페이지에 asp.net 데이터 격자가 있습니다. 이 표에는 세 개의 열이 있습니다. 이드, 날짜 및 사진.

사진 열은 VARBINARY (MAX) 테이블의 실제 열입니다.

사용자가 사진 (텍스트 또는 아이콘)을 클릭하면 전체 크기의 사진으로 jquery 모달을 열고 싶습니다. 사용자가 원하는 경우 마우스 오른쪽 버튼으로 클릭하고 저장할 수 있습니다.

나는 전에 이것을 해본 적이 없다. 그물에서 검색하려고했지만, 나는 칼럼에 이미지를 표시하는 예제만을 찾았는데, 이는 내가 원하는 것이 아닙니다.

Answer 1

작은 이미지를 그리드에 표시하고 큰 이미지를 표시하려면 아래 코드 샘플을 참조하십시오.

<asp:GridView runat="server" ID="gvData" AutoGenerateColumns="False"> 
    <Columns> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <img src='<%# "data:image/gif;base64," + Eval("Data") %>' onclick="DisplayImage(this)" height="10" width="10" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

<%--Popup dialog to display large image--%> 
<div id="dialog" style="display: none"> 
    <img height="100" width="100" id="imgLargeImage" /> 
</div> 

참고 : 여기 내 이미지 유형은 그래서 당신의 이미지 유형에 따라이를 업데이트 gif입니다.

자바 스크립트 팝업에 이미지를 표시합니다 :

<script type="text/javascript"> 
    function DisplayImage(ctrl) { 

     document.getElementById('imgLargeImage').src = ctrl.src; 

     $("#dialog").dialog({ 
      title: "View Details", 
      buttons: { 
       Ok: function() { 
        $(this).dialog('close'); 
       } 
      }, 
      modal: true 
     }); 
    } 
</script>