By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,449 Members | 956 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,449 IT Pros & Developers. It's quick & easy.

Popup issue with script?

P: 10
Issue NOT use

This script makes the popup sit behind the main webpage once clicked off it and if another image is chosen to enlarge the image will not be seen as it is still sits behind the main web page.

What I am asking

Is it possible to add some script to this code to make the popup always sit on top when the script is activated?

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. function jkpopimage(image) {
  4. function detectexist(obj){
  5. return (typeof obj !="undefined")
  6. }
  7. var i = new Image();
  8. i.src = image;
  9. var x = i.width;
  10. var y = i.height;
  11. // window.status for degugging:
  12. window.status = image + " = " + x + " x " + y + " pixels";
  13. var z = "scrollbars=no,width=" + (x+20) + ",height=" + (y+20);
  14. window.open(image,"image",z);
  15. }
  16. </script>
Excuse me if it sounds like a dull question it's just I am not a developer and would really appreciate any help.

Thank you
Jan 20 '09 #1
Share this Question
Share on Google+
17 Replies


P: 10
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

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. // JK Pop up image viewer script- By JavaScriptKit.com
  4. // Visit JavaScript Kit (http://javascriptkit.com)
  5. // for free JavaScript tutorials and scripts
  6. // This notice must stay intact for use
  7.  
  8. var popbackground="white" //specify backcolor or background image for pop window
  9. var windowtitle="Artist Image"  //pop window title
  10.  
  11.  
  12. function detectexist(obj){
  13. return (typeof obj !="undefined")
  14. }
  15.  
  16. function jkpopimage(imgpath, popwidth, popheight, textdescription){
  17.  
  18. function getpos(){
  19. leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
  20. toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
  21. if (window.opera){
  22. leftpos-=screenLeft
  23. toppos-=screenTop
  24. }
  25. }
  26.  
  27. getpos()
  28. var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
  29. var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
  30. if (typeof jkpopwin=="undefined" || jkpopwin.closed)
  31. jkpopwin=window.open("","",winattributes)
  32. else{
  33. //getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
  34. //jkpopwin.moveTo(leftpos, toppos)
  35. jkpopwin.resizeTo(popwidth, popheight+30)
  36. }
  37. jkpopwin.document.open()
  38. jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
  39. jkpopwin.document.close()
  40. jkpopwin.focus()
  41. }
  42.  
  43. </script>
Jan 20 '09 #2

acoder
Expert Mod 15k+
P: 16,027
If you keep a reference to the pop-up window when opening:
Expand|Select|Wrap|Line Numbers
  1. var win = window.open(...);
you can use it to give focus:
Expand|Select|Wrap|Line Numbers
  1. win.focus();
To resize, you can use the resizeTo() method.
Jan 20 '09 #3

P: 10
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?]
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. // JK Pop up image viewer script- By JavaScriptKit.com
  4. // Visit JavaScript Kit (JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop)
  5. // for free JavaScript tutorials and scripts
  6. // This notice must stay intact for use
  7.  
  8. var popbackground="white" //specify backcolor or background image for pop window
  9. var windowtitle="Artist Image"  //pop window title
  10.  
  11. function detectexist(obj){
  12. return (typeof obj !="undefined")
  13. }
  14.  
  15. function jkpopimage(imgpath, popwidth, popheight, textdescription){
  16.  
  17. function getpos(){
  18. leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
  19. toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
  20. if (window.opera){
  21. leftpos-=screenLeft
  22. toppos-=screenTop
  23. }
  24. }
  25.  
  26. getpos()
  27. var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
  28. var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
  29. if (typeof jkpopwin=="undefined" || jkpopwin.closed)
  30. jkpopwin=window.open("","",winattributes)
  31. else{
  32. //getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
  33. //jkpopwin.moveTo(leftpos, toppos)
  34. jkpopwin.resizeTo(popwidth, popheight+30)
  35. }
  36. jkpopwin.document.open()
  37. jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
  38. jkpopwin.document.close()
  39. jkpopwin.focus()
  40. }
  41.  
  42. </script>
I do hope someone can help?
Jan 22 '09 #4

acoder
Expert Mod 15k+
P: 16,027
Pass the image width and height for the second and third parameters to the function.
Jan 22 '09 #5

P: 10
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?
Jan 22 '09 #6

acoder
Expert Mod 15k+
P: 16,027
Can you show me where you call jkpopimage()?
Jan 22 '09 #7

P: 10
you mean this?

Expand|Select|Wrap|Line Numbers
  1. <a href="#" onClick="jkpopimage('images/artists/AliceRolfe/alice4.jpg', 374, 555, ''); return false">
  2.                       <img src="images/artists/AliceRolfe/alice4a.jpg" alt="Image" width="144" height="181" border="0" />
Jan 22 '09 #8

acoder
Expert Mod 15k+
P: 16,027
Yes, replace 374 and 555 with 144 and 181 (though it'd be better if you did it programmatically, of course).
Jan 22 '09 #9

P: 10
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
Jan 22 '09 #10

acoder
Expert Mod 15k+
P: 16,027
Do you use server-side code to generate the HTML code to display the images?
Jan 22 '09 #11

P: 10
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.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. // JK Pop up image viewer script- By JavaScriptKit.com
  4. // Visit JavaScript Kit (http://javascriptkit.com)
  5. // for free JavaScript tutorials and scripts
  6. // This notice must stay intact for use
  7.  
  8. var popbackground="white" //specify backcolor or background image for pop window
  9. var windowtitle="Artist Image"  //pop window title
  10.  
  11. function detectexist(obj){
  12. return (typeof obj !="undefined")
  13. }
  14.  
  15. function jkpopimage(imgpath, popwidth, popheight, textdescription){
  16.  
  17. function getpos(){
  18. leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
  19. toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
  20. if (window.opera){
  21. leftpos-=screenLeft
  22. toppos-=screenTop
  23. }
  24. }
  25.  
  26. getpos()
  27. var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
  28. var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
  29. if (typeof jkpopwin=="undefined" || jkpopwin.closed)
  30. jkpopwin=window.open("","",winattributes)
  31. else{
  32. //getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
  33. //jkpopwin.moveTo(leftpos, toppos)
  34. jkpopwin.resizeTo(popwidth, popheight+30)
  35. }
  36. jkpopwin.document.open()
  37. jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
  38. jkpopwin.document.close()
  39. jkpopwin.focus()
  40. }
  41.  
  42. </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
Jan 22 '09 #12

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 23 '09 #13

P: 10
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.getElementById("compman").height="250"
document.getElementById("compman").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?
Expand|Select|Wrap|Line Numbers
  1. # function detectexist(obj){
  2. # return (typeof obj !="undefined")
  3. # }
  4. # var i = new Image();
  5. # i.src = image;
  6. # var x = i.width;
  7. # var y = i.height;
how could I add that to the script I already have?

Like where would I put it in this script?

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. // JK Pop up image viewer script- By JavaScriptKit.com
  4. // Visit JavaScript Kit (http://javascriptkit.com)
  5. // for free JavaScript tutorials and scripts
  6. // This notice must stay intact for use
  7.  
  8. var popbackground="white" //specify backcolor or background image for pop window
  9. var windowtitle="Artist Image"  //pop window title
  10.  
  11. function detectexist(obj){
  12. return (typeof obj !="undefined")
  13. }
  14.  
  15. function jkpopimage(imgpath, popwidth, popheight, textdescription){
  16.  
  17. function getpos(){
  18. leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
  19. toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
  20. if (window.opera){
  21. leftpos-=screenLeft
  22. toppos-=screenTop
  23. }
  24. }
  25.  
  26. getpos()
  27. var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
  28. var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
  29. if (typeof jkpopwin=="undefined" || jkpopwin.closed)
  30. jkpopwin=window.open("","",winattributes)
  31. else{
  32. //getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
  33. //jkpopwin.moveTo(leftpos, toppos)
  34. jkpopwin.resizeTo(popwidth, popheight+30)
  35. }
  36. jkpopwin.document.open()
  37. jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
  38. jkpopwin.document.close()
  39. jkpopwin.focus()
  40. }
  41.  
  42. </script>
Jan 23 '09 #14

acoder
Expert Mod 15k+
P: 16,027
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):
Expand|Select|Wrap|Line Numbers
  1. var i = new Image();
  2. i.src = imagepath;
  3. i.onload=function() {
  4.  popwidth = i.width;
  5.  popheight = i.height;
  6. }
Jan 23 '09 #15

P: 10
You have been a great help and I do not want to be a pain in the ass.

Is there any chance you could show me how the code should look in complete form as I have got a bit confused as I am looking at the original code, the example you gave me and the other code I looked grabbed. my code is not looking pretty to say the least.

If I saw it as it was meant to look I am sure I could make sense (or at least hope) of where I was getting confused.

I know it must seem obvious to you but to me its starting to look like hyragliphics.
Thank you in advance.
Jan 23 '09 #16

P: 10
I have done it! thankyou then only to be told about a thing called milkbox

Thanks
Jan 23 '09 #17

acoder
Expert Mod 15k+
P: 16,027
Oh, if you wanted something like that, then there are plenty. The first one (or at least the one that made these *boxes famous) was Lightbox. There are plenty of clones written using libraries and without.

Anyway, glad to see that you got it sorted.
Jan 26 '09 #18

Post your reply

Sign in to post your reply or Sign up for a free account.