asked on

opening an popup with image inside and it should autoresize

i have a link where i click and a popup window is opened. it read the dimensions of the image and loads it but it is not working

here is my code:

my main page: imagethumbnails.cfm:

i define a script function inside it as: imagepopup.js

and imagepopup.js has the following code:

// JavaScript Document
// Set the horizontal and vertical position for the popup 
PositionX = 100;
PositionY = 100; 
// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape) 
defaultWidth  = 500;
defaultHeight = 500; 
// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows 
var AutoClose = true; 
// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(300,300);');
writeln('width=300-(document.body.clientWidth-document.images[0].width);');
writeln('height=300-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');       
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=FFFFFF scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=FFFFFF scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();		
}} 

now in my imagethumbnail.cfm i have the following like as: 
<a href="javascript:void(0);" onclick="popImage('d.cfm?image=#val(id)#&v1=#v1#','image')">Show Image</a> 
now when i click i see broken image: 
and when i see the source code: 
i see the last line with path inside it  
and in the d.cfm i have the following: 
<cfinvoke component="cfc.gallery" method="getImage" image="#url.Image#" returnvariable="GetImg"/>
<img src="images/#GetImg.category#/#GetImg.imagefile#" alt="#description#" /> 
what i am doing wrong here, or if another method can do the do the same please let me know 
regards

Open in new window

Gurvinder Pal Singh

Following link has an example, which can be used as a reference
http://www.howtocreate.co.uk/perfectPopups.html

azadisaryev

that's some really old javascript....

haven't you seen any of these?:

http://jquery.com/demo/thickbox/
http://colorpowered.com/colorbox/
http://www.shadowbox-js.com/index.html
http://fancybox.net/
http://leandrovieira.com/projects/jquery/lightbox/

Azadi

Coast Line

ASKER

Thanks for alll these links..

But i am implementing that click on a link should open a image in popup box

Thanks for these great links.

tarek-mostafa

You can have this on a separate html page and have the image in this html. Onclick you should call this page as a popup:

-add the following to where you would like to have the link
<a href="javascript:popupFunction('http://google.com','Google','width=400,height=300')"> Click me! (You can replace this text)</a>

-add the following function to javascript:
function popupFunction(param1,param2,param3)
{neww=window.open(param1,param2,param3);
neww.window.focus();
}

ASKER CERTIFIED SOLUTION

azadisaryev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial