Popup issue with script?

**dijnr** · Jan 20 '09, 01:02 PM

This is some code I grabbed which does what I want except it does not have the code that sizes the image to to popup

Code:

<script type="text/javascript">

// JK Pop up image viewer script- By JavaScriptKit.com
// Visit JavaScript Kit (http://javascriptkit.com)
// for free JavaScript tutorials and scripts
// This notice must stay intact for use

var popbackground="white" //specify backcolor or background image for pop window
var windowtitle="Artist Image"  //pop window title


function detectexist(obj){
return (typeof obj !="undefined")
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){

function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}

getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}

</script>

**acoder** · Jan 20 '09, 05:43 PM

If you keep a reference to the pop-up window when opening:

Code:

var win = window.open(...);

you can use it to give focus:

Code:

win.focus();

To resize, you can use the resizeTo() method.

**dijnr** · Jan 22 '09, 10:57 AM

Thanks for the response. I must say that I am not too familiar with hand coding.

If I was to take the following code.
what and where would I place code to make the window automatically resize to the image?]

Code:

<script type="text/javascript">

// JK Pop up image viewer script- By JavaScriptKit.com
// Visit JavaScript Kit ([url=http://javascriptkit.com]JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop[/url])
// for free JavaScript tutorials and scripts
// This notice must stay intact for use

var popbackground="white" //specify backcolor or background image for pop window
var windowtitle="Artist Image"  //pop window title

function detectexist(obj){
return (typeof obj !="undefined")
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){

function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}

getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}

</script>

I do hope someone can help?

**acoder** · Jan 22 '09, 11:18 AM

Pass the image width and height for the second and third parameters to the function.

**dijnr** · Jan 22 '09, 11:24 AM

Thanks for your response.

I must admit I am a total newbie.

So how do I do that?

I know it seems like I just want the code but I am willing to learn.

could you please give me an example of what to do?

I do hope I am not asking too much?

**acoder** · Jan 22 '09, 12:24 PM

Can you show me where you call jkpopimage()?

**dijnr** · Jan 22 '09, 02:10 PM

you mean this?

Code:

<a href="#" onClick="jkpopimage('images/artists/AliceRolfe/alice4.jpg', 374, 555, ''); return false">
                      <img src="images/artists/AliceRolfe/alice4a.jpg" alt="Image" width="144" height="181" border="0" />

**acoder** · Jan 22 '09, 05:54 PM

Yes, replace 374 and 555 with 144 and 181 (though it'd be better if you did it programmaticall y, of course).

**dijnr** · Jan 22 '09, 06:07 PM

Yes it would as otherwise I have over 300 images to resize.

How do I do it programatically ?

Excuse me if this sounds wrong but...can I set peramater in the code above to resize to the image size as all the images vary in width and hight?

i have looked at other code and tried cutting and pating bits with no avail.

do i set a var.....(for hight and width)?

the giving it a function...(the size to image perameters)?

If so how do I do that and where in the existing code would it sit?

I hope I am making sence if it is at all possible?

Thank you

**acoder** · Jan 22 '09, 06:20 PM

Do you use server-side code to generate the HTML code to display the images?

**dijnr** · Jan 22 '09, 09:52 PM

I don't think so? If you php or the like then, no.
I designed the site in html using dreamweaver and got the javascript code from a tutorial site and pated it in the html page.

the images are called up by the script I assume.

the images are just saved in their own directory with the use of the script it calls the images into the popup. This is what I imagine the code does. I have a very basic understanding of how the code works but I am not competent enough with the langude yet to edit in the way I would like to. I found two scripts and the one I have used is the later as the popup on the first code have major issues with the popup that would make it none user friendly.

They both seem to work in a similar way they call the .jpg images from the directory.

Code:

<script type="text/javascript">

// JK Pop up image viewer script- By JavaScriptKit.com
// Visit JavaScript Kit (http://javascriptkit.com)
// for free JavaScript tutorials and scripts
// This notice must stay intact for use

var popbackground="white" //specify backcolor or background image for pop window
var windowtitle="Artist Image"  //pop window title

function detectexist(obj){
return (typeof obj !="undefined")
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){

function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}

getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}

</script>

this is the javascript I pasted ino my page:

and as far as I can work out this is where the function 'jkpopimage' is called within the page to bring up the image.

it's just the scripting in the first example looses me in it's technicalities.

if there was some way to modify that code in such a way that it would size the . popwidth, popheight,' to size to the image or the second best option would be to centralise the image in the popup ( 'jkpopimage') and make the popup default to 100% width and hight. I uderstand the principle of what logically it should state I just do not no where to start with developing code to do this. and I imagine it takes many years to get a firm grip on hard code.

hope this answers the question?

Is what I want to do possible? well I imagine it is possible I am just not quiet talented enough yet to make it possible. That is what I am here to get some help form kind people like yourself who are willing to take time in helping a newbie like me.

Thanks

**acoder** · Jan 23 '09, 10:51 AM

The reason I asked about server-side code is that it would make this a lot easier because you could use the same values that you use to set the width and height of the image to set the popup width/height. It also makes sense especially if you have 300 or so images.

You can do it in JavaScript, of course and there are a number of ways.

One way is to get a reference to an image either by loading the image (using an Image() object - see your first snippet of code) or by getting an image loaded into the DOM (see example). For the second method, you'll need to set an ID and/or name.

**dijnr** · Jan 23 '09, 11:30 AM

I tried out the example but it does not quite do what I want?

Firstly it did not open the image in a popup rather just load it into the same page?(I might be doing something wrong?)

Secondly the images are not all the same width and hieght and by looking at the code it makes reference to setting solid paramiters for width and hieght

function changeSize()
{
document.getEle mentById("compm an").height="25 0"
document.getEle mentById("compm an").width="300 "
}

where I would need it to size to the peramiters set by the height and width of the image itself?

this code seems to sujest something to do with what i want?

Code:

# function detectexist(obj){
# return (typeof obj !="undefined")
# }
# var i = new Image();
# i.src = image;
# var x = i.width;
# var y = i.height;

how could I add that to the script I already have?

Like where would I put it in this script?

Code:

<script type="text/javascript">

// JK Pop up image viewer script- By JavaScriptKit.com
// Visit JavaScript Kit (http://javascriptkit.com)
// for free JavaScript tutorials and scripts
// This notice must stay intact for use

var popbackground="white" //specify backcolor or background image for pop window
var windowtitle="Artist Image"  //pop window title

function detectexist(obj){
return (typeof obj !="undefined")
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){

function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}

getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}

</script>

**acoder** · Jan 23 '09, 11:42 AM

The example was just to show how to get the width and height. To actually use it, you need to add replace the popwidth/popheight with these values.

What I suggest you do is load the passed source into an Image object (before line 27):

Code:

var i = new Image();
i.src = imagepath;
i.onload=function() {
 popwidth = i.width;
 popheight = i.height;
}

Popup issue with script?

Popup issue with script?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment