Monday, March 8, 2010

Display Original Image Size in new or popup window when clicking on the thumbnail Image using javascript




Please visit my new Web Site WWW.Codedisplay.com



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 want 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. The output likes below:



To do that here i am using a javascript method which is given below:
function DisplayFullImage(ctrlimg) 
    { 
        txtCode = "<HTML><HEAD>" 
        +  "</HEAD><BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0><CENTER>"   
        + "<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'); 
        mywindow.document.open(); 
        mywindow.document.write(txtCode); 
        mywindow.document.close();
    }

From your aspx page you can use the above javascript method in the following way:
<asp:Image ID="Image1" BorderColor="lightgray" BorderWidth="3px" width="200px" height ="200px"  runat="server" ImageUrl = "Images/blue_flower.jpg" onclick="DisplayFullImage(this);"/>

The complete source code to do the example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Thumbnail_image.aspx.cs" Inherits="Thumbnail_image" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Thumbnail to original image size</title>
<script type="text/javascript">
    function DisplayFullImage(ctrlimg) 
    { 
        txtCode = "<HTML><HEAD>" 
        +  "</HEAD><BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0><CENTER>"   
        + "<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'); 
        mywindow.document.open(); 
        mywindow.document.write(txtCode); 
        mywindow.document.close();
    }
</script>    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Image ID="Image1" BorderColor="lightgray" BorderWidth="3px" width="200px" height ="200px"  runat="server" ImageUrl = "Images/blue_flower.jpg" onclick="DisplayFullImage(this);"/>    
    </div>
    </form>
</body>
</html>

Hope now you can enlarge zoom original image from a thumbnail image. Run the above page by modifying image url. The page will display a thumbnail image of size 200*200. Now click on the thumbnail image will popup a window to display the full original size image.

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

1 comments:

Anonymous said...

Hi,

Thanks for this wonderful solution;

But how do I modify the code if the image is from a database table; say for example an sql server database table.
Thank u.

Emmao

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash