CodeToad Forums » Javascript » How can I use javascript to load a image in different size when I click onto it in my thumbnail?
|
|
|
|
|
How can I use javascript to load a image in different size when I click onto it in my thumbnail?
|
|
|
|
I have a simple ASP script that creates a popup window automatically sized to exactly hold the image--unless the image is larger than the screen, in which case, it sizes to the full screensize. It works good enough! You call this popup using javascript that fires when the user clicks a thumbnail. Here are the 2 parts.
First, the ASP page. Copy between the lines and paste into a new document. Save as imgPop.asp.
---------------------------------------
<%
title=Request("title")
img=Request("img")
%>
<HTML>
<HEAD>
<TITLE><%=title%></TITLE>
</HEAD>
<style>
body {
margin:0;
background-color:#000000;
}
</style>
<script language=JavaScript1.2>
function winResize() {
scrHeight = screen.availHeight - 40;
scrWidth = screen.availWidth - 40 ;
imgWidth = document.getElementById(`img01`).width;
imgHeight = document.getElementById(`img01`).height;
if (imgWidth > scrWidth) { imgWidth = scrWidth }
if (imgHeight > scrHeight) { imgHeight = scrHeight }
winWidth=imgWidth+31;
winHeight=imgHeight+42;
resizeTo(winWidth,winHeight);
window.focus();
}
</script>
<BODY onload=winResize()>
<table cellspacing=0 cellpadding=0 border=0 height="100%" width="100%">
<tr>
<td align=center valign=middle>
<img id=img01 src="<%=img%>" border=0>
</td>
</tr>
</table>
</BODY>
</HTML>
---------------------------------------
Second, the javascript function to call the asp page popup.
---------------------------------------
function ImgPop(img) {
url = `imgPop.asp?img=` + img + `&title=` + img;
WinPop(`Photo`,url,640,480,`yes`);
}
---------------------------------------
Place the above function in your page or in a javascript include. Then when you want to show an image from a thumb do something like this:
<img src="/forum/myPhotoThumb.jpg" onclick="imgPop(`myPhoto.jpg`)">
Let me know if you have any problems with the code.
|
|
|
|
|
|
I guess nobody reads or uses my answers, because the code I posted was missing something. I showed this line:
WinPop(`Photo`,url,640,480,`yes`);
But I didn`t provide the code for the WinPop() function. I`ll provide that code, but the simplest thing would be to replace the above line with these lines:
var winLeft = (screen.width-winWidth)/2;
var winTop = (screen.height-winHeight)/2;
winPhoto = window.open(url,"Photo","menubar=0,toolbar=0,resizable=yes,scrollbars=yes,width=640,height=480,top="+winTop+",left="+winLeft);
The code above is taken from my WinPop() function. winLeft and winTop serve to center the popup window in the user`s screen. Here is the WinPop() function that I use to pop most windows. It accepts arguments to control the look of the window. It`s not pretty, but is working code that I`ve used for a long time now.
function WinPop(winName, winSrc, winWidth, winHeight, scroll, menubar, toolbar) {
if (!scroll) { scroll = "no" }
var winLeft = (screen.width-winWidth)/2;
var winTop = (screen.height-winHeight)/2;
wname=window.open(winSrc, winName, "menubar="+menubar+",toolbar="+toolbar+
",resizable=yes,scrollbars="+scroll+",width="+winWidth+
",height="+winHeight+",top="+winTop+",left="+winLeft);
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Archive Import (Etienne) 
Troy Wolf
Elain
