Display Original Image Size in Popup Window clicking on Thumbnail Image using Javascript C# VB.Net

In many cases like photo album application or e-commerce website product display page or e-commerce shopping cart we need to display thumbnail image first and then when user click on this image we need to show the full or original image in a popup window. In this article I will explain how one can display a full or enlarge or zoom image from thumbnail image using Javascript in Asp.Net C# VB.Net application. The output likes below:

The Javascript method to Popup the Full Image is given below:

<script type="text/javascript">
function DisplayFullImage(ctrlimg) 
        txtCode = "<HTML><HEAD>" 
        + "<IMG src='" + ctrlimg.src + "' BORDER=0 NAME=FullImage " 
        + "onload='window.resizeTo(document.FullImage.width,document.FullImage.height)'>"  
        + "</CENTER>"   
        + "</BODY></HTML>"; 
        mywindow= window.open  ('','image',  'toolbar=0,location=0,menuBar=0,scrollbars=0,resizable=0,width=1,height=1'); 

In the Aspx Page Add the below Image control & Call Javascript Function Like below:

    <asp:Image ID="Image1" BorderColor="lightgray" BorderWidth="3px" width="200px" height ="200px"  runat="server" ImageUrl = "Images/blue-flowers-full_size.jpg" onclick="DisplayFullImage(this);"/>

Now run the project. Hope you will get your desired output.

Script tested for:
1. Internet Explorer
2. Mozilla Firefox
3. Opera
4. Google Chrome

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, Javascript, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *