View Full Version : Yet another image gallery question

01-01-2011, 06:34 AM
I'm making my first venture into Javascript with this project.

i've been successful so far, but i'm trying to add a few more elements and i'm not sure how to do it.

here's the test site:


there's a few ways i want to go from here, one is to add captions to each picture when it's made large.
the other is to maybe have the thumb link to another photo, that way i can make the thumb be a face, and have the large pic be their whole body. etc.

i was hoping i could do this by adding more variables to the "a_load()" function. So i guess i was wondering if i can draw on a variable defined by "a_load()" with "b_load()" and if so, how? i have made several educated guesses as to how i would do this, but nothing has worked.
thanks -Andy

head code:

<script type="text/javascript">
function a_load(a_pic1,a_file1,a_pic2,a_file2,a_pic3,a_file3,a_pic4,a_file4,a_pic5,a_file5,a_pic6,a_file6)
document.getElementById(a_pic1).src = a_file1;
document.getElementById(a_pic2).src = a_file2;
document.getElementById(a_pic3).src = a_file3;
document.getElementById(a_pic4).src = a_file4;
document.getElementById(a_pic5).src = a_file5;
document.getElementById(a_pic6).src = a_file6;
function b_load(whichpic)
var x=document.getElementById(whichpic);
document.getElementById("largepic").src = x.src;

body code:

<div id="map">
<img src="images/default/chevy.png" id="chevy" onclick="a_load('pic1','images/default/lion.jpg','pic2','images/default/chimp.jpg','pic3','images/default/zebra.jpg','pic4','images/default/fish.jpg','pic5','images/default/cat.jpg','pic6','images/default/dog.jpg')">
<img src="images/default/ford.png" id="ford" onclick="a_load('pic1','images/default/cow.jpg','pic2','images/default/duck.jpg','pic3','images/default/fish.jpg','pic4','images/default/frog.jpg','pic5','images/default/eagle.jpg','pic6','images/default/cat.jpg')">
<img src="images/default/honda.png" id="honda" onclick="a_load('pic1','images/default/chimp.jpg','pic2','images/default/zebra.jpg','pic3','images/default/cat.jpg','pic4','images/default/lion.jpg','pic5','images/default/frog.jpg','pic6','images/default/duck.jpg')">
<img src="images/default/toyota.png" id="toyota" onclick="a_load('pic1','images/default/dog.jpg','pic2','images/default/fish.jpg','pic3','images/default/cat.jpg','pic4','images/default/eagle.jpg','pic5','images/default/zebra.jpg','pic6','images/default/lion.jpg')">
<img src="images/default/nissan.png" id="nissan" onclick="a_load('pic1','images/default/frog.jpg','pic2','images/default/lion.jpg','pic3','images/default/fish.jpg','pic4','images/default/dog.jpg','pic5','images/default/chimp.jpg','pic6','images/default/zebra.jpg')">
<div id="gallery">
<img src="images/default/cat.jpg" id="pic1" height="150" width="200" onclick="b_load('pic1')">
<img src="images/default/dog.jpg" id="pic2" height="150" width="200" onclick="b_load('pic2')">
<img src="images/default/duck.jpg" id="pic3" height="150" width="200" onclick="b_load('pic3')">
<img src="images/default/chimp.jpg" id="pic4" height="150" width="200" onclick="b_load('pic4')">
<img src="images/default/eagle.jpg" id="pic5" height="150" width="200" onclick="b_load('pic5')">
<img src="images/default/frog.jpg" id="pic6" height="150" width="200" onclick="b_load('pic6')">
<div id="mainpic">
<img src="images/default/cat.jpg" id="largepic" height="300" width="400">

01-01-2011, 03:48 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Camp Cedarcrest</title>
<link rel="stylesheet" type="text/css" href="http://www.ductaman.com/test1/cedarcrest.css">
<script type="text/javascript">

var Captions=['Image 1','Image 2','Image 3','Image 4','Image 5','Image 6'];

function a_load(){
var args=a_load.arguments;
for (var z0=0;z0<args.length;z0+=3){
document.getElementById("largepic").src ='http://www.ductaman.com/test1/'+args[1];
document.getElementById("txt").innerHTML =Captions[0];

function b_load(img,nu){
document.getElementById("largepic").src =img.src;
document.getElementById("txt").innerHTML =Captions[nu];


<div id="body">
<div id="header">
<div id="menu">
<a href="index.html">Home</a>
<a href="aboutus.html">About Us</a>
<a href="amenities.html">| Amenities |</a>
<a href="photos.html">Photos</a>
<a href="directions.html">Directions</a>

<div id="map">
<img src="http://www.ductaman.com/test1/images/default/chevy.png" id="chevy" onclick="a_load('pic1','images/default/lion.jpg','Image 7', 'pic2','images/default/chimp.jpg','Image 8','pic3','images/default/zebra.jpg','Image 9','pic4','images/default/fish.jpg','Image 7', 'pic5','images/default/cat.jpg','Image 10', 'pic6','images/default/dog.jpg','Image 11')">

<div id="gallery">
<img src="http://www.ductaman.com/test1/images/default/cat.jpg" id="pic1" height="150" width="200" onclick="b_load(this,0)">
<img src="http://www.ductaman.com/test1/images/default/dog.jpg" id="pic2" height="150" width="200" onclick="b_load(this,1)">
<img src="http://www.ductaman.com/test1/images/default/duck.jpg" id="pic3" height="150" width="200" onclick="b_load(this,2)">
<img src="http://www.ductaman.com/test1/images/default/chimp.jpg" id="pic4" height="150" width="200" onclick="b_load(this,3)">
<img src="http://www.ductaman.com/test1/images/default/eagle.jpg" id="pic5" height="150" width="200" onclick="b_load(this,4)">
<img src="http://www.ductaman.com/test1/images/default/frog.jpg" id="pic6" height="150" width="200" onclick="b_load(this,5)">
<div id="mainpic">
<img src="http://www.ductaman.com/test1/images/default/cat.jpg" id="largepic" height="300" width="400">
<div id="txt" style="height:50px;width:200px;border:solid black 1px;background-Color:red;" >Image 1</div>
<div id="footer">&copy; Copyright 2010 Camp Cedarcrest | Designed by <a href="http://www.blinddogcoding.com">Blind Dog Coding</a></div>

01-01-2011, 04:10 PM
To my knowledge, it is impossible to directly access a function's variable from outside the function. However, it is possible to pass it to something outside the function.

For example:

function exA(paramA,paramB) {
paramA = 2;
function exB(paramC,paramD){
paramC = paramA;

Will not work. But...

var independentVariable;
function exA(paramA,paramB) {
paramA = 2;
independentVariable = paramA;
function exB(paramC,paramD){
paramC = independentVariable;
...this will. independentVariable serves as the middle man between paramA and paramC.

As for your code, your solution is a very good one, though I would recommend the use of arrays (http://www.javascriptkit.com/javatutors/loop2.shtml) for your pictures, filenames, and (eventually) descriptions.

That said, you could definitely add descriptions or use different images from the thumbnail with your current setup.


In the body code:

Add a <div> with an id for description within the <div id ="mainpic">. In the new div put the default description for the cat image.
Add a description value for every image passed to a_load() in every car-logo link.
In the head code:

Add a description parameter for every image in a_load(). Make sure it lines up with the value you entered in the car-logo links!
Create a description variable for each image outside of any function. (You could also use an array.)
In a_load(), set each of the independent variables to the value of each of the parameters. Now you can get to the descriptions from b_load()!

In b_load(), add a parameter for which description you want to load with whichpic. Within b_load, set the description <div> you created earlier in the same way you set the <div id="mainpic">'s src value.
NOTE: This is where Arrays would make more sense. Instead of needing an additional variable for the description in b_load, you could just pass the index of the image in the image array. Then, if you match the order of the images in the images array with the order of the descriptions in the descriptions array, you only need to pass the index to get to both the image and the description.

Alternate Images:
This will be more complicated. I will use the HttpRequest object (http://www.w3schools.com/dom/dom_http.asp).

Add your alternate images to the same directory you have the rest of the images in. Name them so they correspond with the thumbnail they go to - "alt"+<thumbnailname>. (append alt to the start of the name)

Add this below var x=document.getElementById(whichpic); in b_load():

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function test(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("largepic").src = "alt"+x.src;
document.getElementById("largepic").src = x.src;

That *should* check to see if the alt+<thumbnailname> file is accessible. If it is, it will use it, if it isnt, it will use <thumbnailname>.

Sorry if this post is a bit confusing. I ran out of steam typing this up.

Let me know if you have any questions!

01-01-2011, 05:14 PM
awesome replies, thank you both!