Image Gallery Question

doni

11-14-2004, 04:57 AM

Hi all!

I'm setting up a web page for selling a house. I'd like to display pictures of the property in a gallery.

What I'd like is a drop down list of the floors, a drop down list of all the photos taken on each floor, a grouping of thumbnails of all the photos from the selected floor and a "Big Image".

When the user clicks on a thumnail, the chosen picture will appear in the "Big Image" location. There should be a "Next" and a "Previous" arrow to scroll through the available thumbnails. When the user selects an option on the "Floors" list, the thumbnails would change to show the photos from the selected floor and the list of locations in the "Locations" list would change to match the selected floor and the floorplan image would change as appropriate.

To avoid double entry, I'd also like to make the script run onpage load--I'd just have it load the first floor.

I'd prefer to make it so that the images/links get changed without having to reload the page.

I've attached a jpg file to give you a visual idea what I'm talking about. Can someone point me in the right direction as to where I can find a script to start with? I've looked at dynamic drive and none of the scripts that I saw looked like a good fit.

TIA!

Mr J

11-14-2004, 11:51 AM

Take a look here, this may be on the lines of what you are after

www.huntingground.freeserve.co.uk/style/sldshow_thumb2.htm

Also take a look at the image galleries in the Javascript section.

www.huntingground.freeserve.co.uk/scripts/snav.htm

doni

11-16-2004, 03:56 AM

Ok. I made a lot of headway last night. I'm working on getting the scripts to actually work right. AFter that, I'll worry about the layout.

I think I've actually got a fairly firm grasp on how the image gallery scripts work but I have two questions that I hope someone can answer. The scripts that you pointed to would actually do what I need, but I was able to decipher what they were doing and figure out how to do what I want.

I successfully got it to scroll the thumbnail images and show the full picture in the proper place. But when I first load the page I'm prompted with a message that active content is disabled for security reasons. I'm worried that the general users that would be visiting my site might be too afraid to enable the scripts. What is it about these scripts that is causing them to get stopped?

The current code (the file is located at home.comcast.net/~doni49/imagegallery/test2.html) :

<html>
<head>

<script language="JavaScript">
var Gallery1 = new Array("IM000018.jpg","IM000019.jpg","IM000020.jpg","IM000021.jpg","IM000022.jpg","IM000023.jpg","IM000026.jpg")
var floorList = new Array("Exterior", "Basement", "First Floor", "Second Floor")
var locList1 = new Array ("18", "19", "20", "21", "22", "23", "26")

var thisImg = 0

function initGallery() {
document.Thumb1.src=Gallery1[0]
document.Thumb2.src=Gallery1[1]
document.Thumb3.src=Gallery1[2]
showPic(0)
}

function doPrevious() {
if (thisImg > 0) {
thisImg--
document.Thumb1.src=Gallery1[thisImg]
document.Thumb2.src=Gallery1[thisImg + 1]
document.Thumb3.src=Gallery1[thisImg + 2]
}
}

function doNext() {
if (thisImg < Gallery1.length -3) {
thisImg++
document.Thumb1.src=Gallery1[thisImg]
document.Thumb2.src=Gallery1[thisImg + 1]
document.Thumb3.src=Gallery1[thisImg + 2]
}
}

function showPic(source) {
document.bigPic.src=Gallery1[source + thisImg]
}

onload = initGallery;

// -->
</script></head>
<body>
<table>
<tr>
<td>
<form">
<select "floor">
<option selected value="">
</option>
</select>
<select "Locations">
<option selected value="">
</option>
</select>
</form>
</td>
</tr>
<tr>
<td><a href="javascript:showPic(0)"><img name="Thumb1" width="100" src=""></a></td>
<Td><a href="javascript:showPic(1)"><img name="Thumb2" width="100" src=""></a></td>
<td><a href="javascript:showPic(2)"><img name="Thumb3" width="100" src=""></a></td>
</tr>
<tr>
<td><small><font face="Verdana"><a href="javascript:doPrevious()">Previous</a><font color="#FFFFFF">-</font></td>
<td><small><font face="Verdana"><a href="javascript:doNext()">Next</a></font></small>
</tr>
<tr>
<td><img name="bigPic" src=""</td>
</tr>
</body>
</html>

The other question is how to go about populating the drop down list with the contents of the appropriate arrays. Again if someone can just point me in the right direction, it would be appreciated.

Thanks again for any and all help anyone can/will provide.