Image in a new window?

egims · Aug 30, 2001

After clicking on a thumbnail of an image I would like a larger version of the image to appear in a new window.

The method I am currently using works in part, but leaves a good sized white border on the top and left of the image in the new window, and cuts off part of the right and bottom of the image that is displaced. I need a method which will not do that.

Thanks.

jsLove · Aug 30, 2001

egims,

i would use this in first page (the one with the thumbnail):
---mybeautifulpic.htm is the url of the new window.
---mypicwin is just a name for the new window.

<SCRIPT language="JavaScript">
<!--
function img1win() {window.open("mybeautifulpic.htm","mypicwin","height=300,width=400,left=50,top=50&quot

;}
// -->
</SCRIPT>

in the body of this first window you might have a link to call the new window:

<a href="javascript:img1win()">
<img src="mybeautifulthumbnail.jpg" width="80" height="60" border="0">
</a>

Now the window that will pop up, most important is the Body tag

Topmargin, Leftmargin,marginwidth and marginheight get rid of the nasty browser border):

<html>
<head>
<title>My Beautiful PIC!title>
</head>

<BODY BGCOLOR="#000000" TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<center>
<img src="mybeautifulbigpic.jpg" width="400" height="300" border="0">

---you may want to close the window?
<a href="javascript:window.self.close()">close me!</a>
</center>
</body>
</html>

Hope it helps

~ jsLove

egims · Aug 30, 2001

jsLove,

Thanks but this is not quite what I am looking for. I do not want to call another html document at all - as in your above example "mybeautifulpic.htm" in which I can control the border via the body tag.

What I am looking for is the ability to have an individual click on a thumbnail and have the larger image display in a window that will contain it without a border - and without the need to use another entire html document.

But thanks much anyway.

jsLove · Aug 30, 2001

egims,

what it sounds like you are after ....

when you say "new window" it tends to mean an html document.

i think, however, you may be more interested in using DHTML or commononly refered to as "Layers" ....there is a DHTML Forum. Hope it helps

~ jsLove

inlandpac · Aug 31, 2001

egims,

How about this:
^{<script language="JavaScript">

function showimg(image) {

this_image = new Image();

this_image.src = image;

image_w = this_image.width;

image_h = this_image.height;

var win = window.open("", "win", "width=" + image_w +",height=" + image_h + "" // a window object

var sMarkup = "<HTML><HEAD><TITLE>New Document</TITLE></HEAD>";

sMarkup += "<BODY marginwidth=0 marginheight=0 topmargin=0 leftmargin=0>";

sMarkup += "<img src=" + image + ">";

sMarkup += "</BODY></HTML>";

with (win.document) {

open("text/html", "replace"

write(sMarkup);

close();

}

}

</script>}

and a test I ran:
^{<html>

<head>

<script language="JavaScript">

function showimg(image) {

this_image = new Image();

this_image.src = image;

image_w = this_image.width;

image_h = this_image.height;

var win = window.open("", "win", "width=" + image_w +",height=" + image_h + "" // a window object

var sMarkup = "<HTML><HEAD><TITLE>New Document</TITLE></HEAD>";

sMarkup += "<BODY marginwidth=0 marginheight=0 topmargin=0 leftmargin=0>";

sMarkup += "<img src=" + image + ">";

sMarkup += "</BODY></HTML>";

with (win.document) {

open("text/html", "replace"

write(sMarkup);

close();

}

}

</script>

</head>

<body>

<a href="javascript:showimg('/images/est_logo.gif');">show image est_logo.gif</a>

</body>

</html>}

Now remember, there is a minimum height for a window. If you want to go even smaller than the minimum, you will have to use DHTML (layers, etc. to create a pseudo popup with hide/show commands).

Chad. ICQ: 54380631

inlandpac · Aug 31, 2001

Here is a DHTML method you can use (I grabbed this from DynamicDrive):

1. Place this in the <head></head> of your page:
^{<script>

//Thumbnail image viewer-

//© Dynamic Drive (http://www.dynamicdrive.com)
//For full source code, usage terms, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

var ie=document.all

var ns=document.layers

var ns6=document.getElementById&&!document.all

function enlarge(which,e){

//Render image code for IE 4+ and NS6

if (ie||ns6){

crossobj=document.getElementById? document.getElementById("showimage&quot : document.all.showimage

if (crossobj.style.visibility=="hidden&quot{

crossobj.style.left=ns6? pageXOffset+e.clientX : document.body.scrollLeft+event.clientX

crossobj.style.top=ns6? pageYOffset+e.clientY : document.body.scrollTop+event.clientY

crossobj.innerHTML='<div align=right id=drag><b onClick=closepreview()>X</b></div><img src="'+which+'">'

crossobj.style.visibility="visible"

}

else

crossobj.style.visibility="hidden"

return false

}

//Render image code for NS 4

else if (document.layers){

if (document.showimage.visibility=="hide&quot{

document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>')

document.showimage.document.close()

document.showimage.left=e.x

document.showimage.top=e.y

document.showimage.visibility="show"

}

else

document.showimage.visibility="hide"

return false

}

//if NOT IE 4+ or NS 4, simply display image in full browser window

else

return true

}

function closepreview(){

crossobj.style.visibility="hidden"

}

</script>

<script language="JavaScript1.2">

//By Dynamicdrive.com

//drag drop function for NS 4////

/////////////////////////////////

var nsx,nsy,nstemp

function drag_dropns(name){

temp=eval(name)

temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)

temp.onmousedown=gons

temp.onmousemove=dragns

temp.onmouseup=stopns

}

function gons(e){

temp.captureEvents(Event.MOUSEMOVE)

nsx=e.x

nsy=e.y

}

function dragns(e){

temp.moveBy(e.x-nsx,e.y-nsy)

return false

}

function stopns(){

temp.releaseEvents(Event.MOUSEMOVE)

}

//drag drop function for IE 4+ and NS6////

/////////////////////////////////

function drag_drop(e){

if (ie&&dragapproved){

crossobj.style.left=tempx+event.clientX-offsetx

crossobj.style.top=tempy+event.clientY-offsety

}

else if (ns6&&dragapproved){

crossobj.style.left=tempx+e.clientX-offsetx

crossobj.style.top=tempy+e.clientY-offsety

}

return false

}

function initializedrag(e){

if (ie&&event.srcElement.id=="drag"||ns6&&e.target.id=="drag&quot{

offsetx=ie? event.clientX : e.clientX

offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)

tempy=parseInt(crossobj.style.top)

dragapproved=true

document.onmousemove=drag_drop

}

}

document.onmousedown=initializedrag

document.onmouseup=new Function("dragapproved=false&quot

</script>}

2. Place this directly under your <body> tag:
^{<div id="showimage" style="position:absolute;visibility:hidden;border:1px solid black"></div>}

3. Setup your thumbnail or text links that will popup the images:

either
^{<a href="photo1.jpg" onClick="return enlarge('photo1.jpg',event)"><img src="thumbnail.gif" border="0"></a>}
or
^{<a href="photo1.jpg" onClick="return enlarge('photo1.jpg',event)">This is a text link</a>}

Have fun!

Chad. ICQ: 54380631

egims · Aug 31, 2001

Thank you very much inlandpac & jsLove.

Your help is much appreciated.

Best,

Ed

egims · Oct 18, 2001

inlandpac,

I know its been awhile since this thread stopped being active, but if you don't mind I have a question about your solution.

Your solution seems to work GREAT in Explorer, but for some reason in Navigator 4.08 when the new window appears with the image in it, only the height seems to work. The width is sized about twice the actual image width.

The image inside the window appears fine, but there is a huge block of white space to the left of the image due to the expanded width in Navigator 4.08.

Trust Navigator to be a pain. Do you have any idea of why, or how to correct the problem?

Thanks,

Ed

inlandpac · Oct 18, 2001

egims,

Well, you are right...trust NS to be a pain.

To be honest, this should work for IE4+, NS6, and NS4.

Very strange.

I will look into this and will get back with you.

Chad. ICQ: 54380631

egims · Oct 23, 2001

Hi Chad,

I was just wondering if you may have had an opportunity to give that problem any further thought?

Best,

Ed

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Image in a new window?

egims

Technical User

jsLove

Programmer

egims

Technical User

jsLove

Programmer

inlandpac

Programmer

inlandpac

Programmer

egims

Technical User

egims

Technical User

inlandpac

Programmer

egims

Technical User

Similar threads

Part and Inventory Search

Sponsor