JavaScript - Thumbnail Image Viewer

Hello, I have a media page for my band website.

I am putting an image gallery on this page. I have a set of images within a div.
What I want to achieve, is when any image is clicked, I want that image to 'fade in' over the top of the images - with a larger height and width. Effectively, I want to open the image without having to navigate along with the anchor tag to a separate page. With this, I want the user to be able to close the image by clicking the larger scaled image. When that certain image has faded in above the images I want all the other images to be unclickable until the user has closed the current image.

I have a live example at this site: Band - Media Page. I have a simple jquery effect already on the page which i used from watching a tut.

I have no idea where to start. I did start by creating this code:
Code:

function showImage(that) {
	
	var img = that.src; //sets the var 'img' to the src of the image which   was passed in
	img = img.substr(img.lastIndexOf('/')+1); //Retrieves the file name, stores in 'img'
	
	return true;
}

But, I'm just not sure where to go after this.

Please take no notice of the header and menu as these are mis-aligned and I need to set certain things properly, though this is another matter in itself.

Thank you in advance for any help you can give me.

Regards,

LC.

Hi I was wondering I really like the image viewer Gamespot uses.
example:
http://www.gamespot.com/wii/action/s...&tag=thumb%3B1

Anyone know how to make one like that?
Thanks for any replies.

I'm using the BackBox Script for image viewing on my HTML doc. However, the code is good for the use of one thumbnail with images that can be loaded. What if I want more than one thumbnail image using its own set of images? How can I have multiple thumbnails with their own set of large images to view? Does that make since? Any help would be much appreciated!

Kenneth

I need help implementing what appears to be a simple javascript :

http://www.javascriptkit.com/script/...ivviewer.shtml

Quote:
Directions: Add the below script to the HEAD section of your page:

Code:

<script src="DV.js" type="text/javascript">

/***********************************************
* Pagination Combo Box- by Axel Schneider (http://axelschneider.info/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Please keep this notice intact
***********************************************/

</script>

<script type="text/javascript">
//Define your images using arbitrary variables, to be passed in as arguments later down the page:
var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">'
var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' 

</script>
<script src="DV.js" type="text/javascript">

/***********************************************
* Pagination Combo Box- by Axel Schneider (http://axelschneider.info/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Please keep this notice intact
***********************************************/

</script>

<script type="text/javascript">
//Define your images using arbitrary variables, to be passed in as arguments later down the page:
var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">'
var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' 

</script>
<script src="DV.js" type="text/javascript">

/***********************************************
* Pagination Combo Box- by Axel Schneider (http://axelschneider.info/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Please keep this notice intact
***********************************************/

</script>

<script type="text/javascript">
//Define your images using arbitrary variables, to be passed in as arguments later down the page:
var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">'
var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' 

</script>
<script src="DV.js" type="text/javascript">

/***********************************************
* Pagination Combo Box- by Axel Schneider (http://axelschneider.info/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Please keep this notice intact
***********************************************/

</script>

<script type="text/javascript">
//Define your images using arbitrary variables, to be passed in as arguments later down the page:
var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">'
var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' 

</script>

You also need to download the below external JavaScript file:

DV.js

Then, to create a link that pops up an image when clicked on, do the following:

Code:

<a href="#" onClick="dv.showDV(pancake); return false">pancakes</a>

Where pancake is the variable containing the image tag to be shown (see code in your HEAD section.

Obviously this works on image links as well.
I do not need a text link, I want the image to be displayed on a mouse click over the thumbail. I have tried to incorporate the HTML as follows :

Code:

<html>
<head>
<TITLE>Test</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="Description" CONTENT="Test">


/***********************************************
* Pagination Combo Box- by Axel Schneider (h**p://axelschneider.info/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Please keep this notice intact
***********************************************/

</script>

<script type="text/javascript">
//Define your images using arbitrary variables, to be passed in as arguments later down the page:
var image = src="Images/SNICTI__Stationery_1_by_caprozo.jpg" width="2133" height="1600" border="0" alt="">'
</script>
</head>

<body bgcolor="#000000" text="#000000">

<body bgcolor="#000000" vlink="#000000" alink="#0000FF" link="#000000">
<font size="3" face="Tahoma">
<div align="center">
  <center>

<p>
<img src="Images/SNICTI__Stationery_1_by_caprozo_small.jpg" width="100" height="100" border="0"></p>
</center> 
</div>

</font>
<p>
</body>
</html>

I've used the Backbox Image Viewer from http://www.javascriptkit.com/script/script2/backbox/ on this website for over 3 years and this problem just arose with the update of IE to version 9.

When you click the link to open the gallery, instead of backbox opening normally, a small all white box appears in it's place. No navigation images or gallery images or anything.

You can view the issue here at http://www.joewheelerknifemaker.com and by clicking on "Knives by Joe, Photo Gallery".

I know that this happens on multiple computers using IE9, but works perfectly in Firefox, Safari and Chrome from what I can tell.

Anyone have any ideas or know what IE changed in this version that could be causing this? Thanks in advance.