Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Yet another image gallery question

    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:

    http://www.ductaman.com/test1/amenities.html

    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:
    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;
    			}
    	</script>
    body code:
    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>
    		<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">
    			</div>
    		</div>
    	</div>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    <HTML>
    <head>
    	<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(args[z0]).src='http://www.ductaman.com/test1/'+args[z0+1];
      Captions[z0/3]=args[z0+2];
     }
     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];
    }
    	</script>
    </head>
    
    <body>
    
    	<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>
      		</div>
    		<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>
    
    		<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>
    		</div>
                    <div id="txt" style="height:50px;width:200px;border:solid black 1px;background-Color:red;" >Image 1</div>
    	</div>
    	<div id="footer">&copy; Copyright 2010 Camp Cedarcrest | Designed by <a href="http://www.blinddogcoding.com">Blind Dog Coding</a></div>
    </body>
    </HTML>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    sathirtythree (01-01-2011)

  • #3
    New Coder
    Join Date
    Mar 2008
    Posts
    28
    Thanks
    2
    Thanked 1 Time in 1 Post
    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:
    Code:
    function exA(paramA,paramB) {
      paramA = 2;
    }
    function exB(paramC,paramD){
      paramC = paramA;
    }
    Will not work. But...
    Code:
    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 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.

    [WARNING: SPOILER ALERT!]


    Descriptions:
    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.

    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():
    Code:
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","alt"+whichpic,true);
    xmlhttp.send();
    xmlhttp.onreadystatechange=function test(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
         document.getElementById("largepic").src = "alt"+x.src;
      }else{
        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!

  • Users who have thanked EchoLynx for this post:

    sathirtythree (01-01-2011)

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    awesome replies, thank you both!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •