Web Analytics Made Easy -
StatCounter modify JS code for multiple photo galleries on same page - CodingForum

Announcement

Collapse
No announcement yet.

modify JS code for multiple photo galleries on same page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • modify JS code for multiple photo galleries on same page

    Hi, I am not very familiar with javascript, and need some simple (I think) help.
    I have obtained script for a photo gallery and have placed it on a web page. I have duplicated the html code 2 more times for the additional 2 galleries I need. The first one works, the other 2 don't (nothing happens when you click on the thumbnails). I know I need to refer to the other 2 in the javascript file, but I'm not sure how. Can someone please help point me in the right direction? Here is the javascript file code for 1 gallery, which I need to modify for 3 galleries, but don't know how...

    Code:
    clickMenu = function(menu) {
    	var getEls = document.getElementById(menu).getElementsByTagName("LI");
    	var getAgn = getEls;
    
    	for (var i=0; i<getEls.length; i++) {
    			getEls[i].onclick=function() {
    				for (var x=0; x<getAgn.length; x++) {
    				getAgn[x].className=getAgn[x].className.replace("click", "");
    				}
    				this.className+=" click";
    				}
    			}
    		}

    My html is as follows (for 1 gallery ... the other galleries are basically the same, except named gallery2 and gallery3) :

    Code:
    <body onload="clickMenu('gallery')" style="background-color: #050505; background-image: url('background.gif')">
    <div id="gallery" style="left: 0px; top: 22px; z-index: 1;">
    <ul>
    	<li><i><img src="samples/GialloFiorito.jpg" title="" alt="" /></i><span><b>Granite:</b><br />Giallo Fiorito</span></li>
    	<li><i><img src="samples/GialloNapoleone.jpg" title="" alt="" /></i><span><b>Granite:</b><br />Gial
    	<li><i><img src="samples/OnyxTiger.jpg" title="" alt="" /></i><span><b>Onyx:</b><br />Tiger</span></li>
    	<li><i><img src="samples/OnyxWhiteCream.jpg" title="" alt="" /></i><span><b>Onyx:</b><br />White Cream</span></li>	
    	<li class="click"><i style="left: 0; top: 0; height: 375px"><img class="default" src="samples/GialloFiorito.jpg" title="" alt="" /></i><span><b>Granite:</b><br />
    	Giallo Fiorino</span></li>
    </ul>
    </div>
    </body>
    Any assistance would be greatly, greatly appreciated!

  • #2
    link the page if you can or post the javascript. there's no way to guess at what the solution might be

    Comment


    • #3
      Sorry about that ... here is the page link:
      http://www.kunstlerstone.com/materials.htm

      Any assistance is most greatly appreciated! I am fairly new to all of this and trying to learn as I go along.

      Thank you!!!

      Comment


      • #4
        Originally posted by Sandra D View Post

        Code:
        clickMenu = function(menu) {
        	var getEls = document.getElementById(menu).getElementsByTagName("LI");
        	var getAgn = getEls;
        
        	for (var i=0; i<getEls.length; i++) {
        			getEls[i].onclick=function() {
        				for (var x=0; x<getAgn.length; x++) {
        				getAgn[x].className=getAgn[x].className.replace("click", "");
        				}
        				this.className+=" click";
        				}
        			}
        		}
        This just changes the appearance (border) of the thumbnails. Just call it three times:

        Code:
        <body onload="clickMenu('gallery');clickMenu('gallery2');clickMenu('gallery3');"  ....... >
        There's no need to have multiple <body> sections in the document just to call the preload function. In fact there's no need to call it at all, since your thumbnail images are scaled versions of the large image, meaning that the images are pre-loaded anyway.

        Comment


        • #5
          That was it! Thank you sooo much!!! I am forever grateful!!!

          Comment

          Working...
          X