We help IT Professionals succeed at work.

opening an popup with image inside and it should autoresize

419 Views
Last Modified: 2013-12-24
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

Comment
Watch Question

CERTIFIED EXPERT

Commented:
Following link has an example, which can be used as a reference
http://www.howtocreate.co.uk/perfectPopups.html
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
CERTIFIED EXPERT

Author

Commented:
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.
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();
}
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.