Vinz' Blog (ProudMonkey)

"Code, Beer and Music ~ my way of being a programmer"
posts - 134, comments - 550, trackbacks - 0

My Links

News

Tag Cloud

Archives

Post Categories

Image Galleries

I'm a...

I'm at...

Display Original Image Size in new window when clicking on the Image

The following snippet below will display the original Image size in new window when clicking on the image thumbnail using JavaScript..

JAVASCRIPT FUNCTION

<script type="text/javascript" language="javascript">
    function DisplayNewImageInWidnow()
    {
       var img = document.getElementById('<%= Image1.ClientID %>').src;

        html = "<HTML><HEAD><TITLE>Photo</TITLE>"
        +  "</HEAD><BODY LEFTMARGIN=0 "  
        + "MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0><CENTER>"  
        + "<IMG src='"
        + img
        + "' BORDER=0 NAME=image "  
        + "onload='window.resizeTo(document.image.width,document.image.height)'>" 
        + "</CENTER>"  
        + "</BODY></HTML>";
        popup= window.open  ('','image',  'toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=1');
        popup.document.open();
        popup.document.write(html);
        popup.document.focus();
        popup.document.close();
}

</script>

ASPX Image Control MARKUP

<asp:Image ID="Image1" width="100px" height ="100px"  runat="server" ImageUrl = "Images/PublicPrivateChart.gif" onclick="DisplayNewImageInWidnow();"/>

Happy Coding!

Technorati Tags: ,,

Print | posted on Thursday, September 11, 2008 10:38 AM | Filed Under [ ASP.NET JavaScript Tips&Tricks ]

Feedback

Gravatar

# re: Display Original Image Size in new window when clicking on the Image

Hello! i have a problem using this script that is this script is only to enlarge one image, if we have multiple images on asp.net page with surely different ID's then what can we do to enlarge each after mouse click. Please Help!

Thanks in advance!
7/19/2009 2:48 AM | Zeeshan Hassan
Gravatar

# re: Display Original Image Size in new window when clicking on the Image page with surely different ID's

function DisplayNewImageInWidnow(imagectl)
{
Field = imagectl;
html = "<HTML><HEAD>"
+ "</HEAD><BODY LEFTMARGIN=0 "
+ "MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0><CENTER>"
+ "<IMG src='"
+ Field.src
+ "' BORDER=0 NAME=image "
+ "onload='window.resizeTo(document.image.width,document.image.height)'>"
+ "</CENTER>"
+ "</BODY></HTML>";
popup= window.open ('','image', 'toolbar=0,location=0,directories=0,menuBar=0,scrollbars=2,resizable=1');
popup.document.open();
popup.document.write(html);
popup.document.focus();
popup.document.close();
}

ASPX Image Control MARKUP

<asp:Image ID="Image1" width="100px" height ="100px" runat="server" ImageUrl = "Images/PublicPrivateChart.gif" onclick="DisplayNewImageInWidnow(this);"/>
9/3/2009 7:38 PM | bhavna patel
Gravatar

# re: Display Original Image Size in new window when clicking on the Image

It is a nice article but i am facing diffarant problem.I am using GeneratedImage control to display the image so its not having any source URL property.Images are displaying dynamically.So can you please tell me using GeneratedImageControl of ASP.net how i can show full size image.
9/9/2009 9:13 PM | Priyanka
Gravatar

# re: Display Original Image Size in new window when clicking on the Image

Just pass the Path of the image that you set up for your dynamic image control to the JavaScript function.
9/9/2009 9:29 PM | Vinz
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

Powered by: