Displaying larger images from thumbs, dynamically

[MikeMCSD]

Hello,

I'm looking for the best script to use to display a larger image in its own window when its thumb is clicked. I am going to read the filenames for the 2 images from a database when the page loads so I will have access to the filename for the larger image.
How can I get the image to load into the new window?
This is what I'm working with so far:

<SCRIPT LANGUAGE="JavaScript">
function openWindow() {
window.open("LargerImage.htm",null,
"height=300,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
</script>

<a href="#" onClick="openWindow(); return false">
<img src="thumb.bmp">
</a>

 

[shrubble]

Do you just need to pass the image name as a parameter to the function?

Example:

function openWindow(address) {
   var load = window.open (address,null,
   "height=300,width=400,status=yes,toolbar=no,menubar=no,\    location=no");
}

Where the link would look like:

<href="#" onClick="openWindow('./whatever.jpg');return false"

deletion mistake
no I can't recover that
you didn't save it

-Shrubble

http://www.ishrubble.com

 

[shrubble]

Sorry, I've got a couple typos up there, but you get the point!

Cheers

deletion mistake
no I can't recover that
you didn't save it

-Shrubble

http://www.ishrubble.com

 

[MikeMCSD]

Thanks Shrub . .
I used this and it worked:

<script language=javascript>
function openWindow(address) {
var load = window.open (address,null,"height=400,width=500,status=yes,toolbar=no,menubar=no,location=no");
}</script>

<a href="#" onClick="openWindow('images/FireM.jpg');return false">
<img src='products/thumb.gif'></a>

But . . what I am trying to do is to get a the image name from the database to load into the openWindow('image?.jpg') and not be just a static image name. Is this possible to do using a variable?
Can openWindow( ) take a string variable argument?

Also, I would like the picture to be centered and have a close button on it.

 

[shrubble]

Centering the picture and adding a close button is no big deal, just plop the image into a properly formatted html document and pass that file instead of the picture.

To close the window, all you really need is:

<a href="javascript:window.close();">Close This Window</a>

or something similar.

As far as getting the information from a database, you would have to do that on the server side (with asp,php, cold fusion, perl, whatever), and create the document dynamically after the query. JavaScript is, by design, not allowed to access anything beyond the world of your browser.That keeps everybody honest...


deletion mistake
no I can't recover that
you didn't save it

-Shrubble

http://www.ishrubble.com

 

[MikeMCSD]

Shrub,
I found a way to store the filename and path
(I'm using ASP.NET):

<input type=hidden name="picPath" value='<%# DataBinder.Eval(Container.DataItem, "ImagePath") %>'>

Now, is there a way I can get the value from this hidden field and pass it into a string that will write a new page but not display it until the thumb image is clicked:

<a href="#" onClick="openWindow('BigPic.htm');return false">

Am I inventing something new here or is there an easier (or better) way.

 

[shrubble]

You lost me there-

It seems to me that the whole thing should go something like this (bear with me, I'm more of a php programmer than asp, although I do use Visual Studio .NET for some stuff):

A user hits your page, causing the server to trigger the SQL query that pulls back all of the photo information for that page (thumbnails and regular size image file names).

At this point, your asp writes a hidden input for each image to the html file. The value should be the only the full sized image name.

The page is served to the user.

When the user clicks a thumbnail, the window pops up on the client side, and the address passed by the JavaScript function opening that window has the name of the full sized image concatenated to it as a GET variable. This shouldn't matter, because the popup window has no URL bar for the user to view anyway.

The server than concatenates the image name (via Request.QueryString)to the general path to the images (which I'm assuming is the same for all full sized images), and inserts that into a relatively simple html document as the <img src="" />. This way, the name of the popup html document is always the same, only the GET variable changes.

Is this correct, or am I way off base?

The tell-tale sign of a properly running network is a bored network administrator!

-Shrubble

http://www.ishrubble.com