0

I am new here. Not so experienced with coding so please take it easy on me ;) The only thing I can't make working is the image gallery displayed in three different columns.

If I copy paste everything from first column (I only change background images class names) gallery is nicely displayed just like first column gallery but it's not working when I press arrow or a picture.

My question is how to change id's of images or which id's should I change to make it work? In which file? Or maybe some javascript script would do the job just fine?

Please help, soon there's a deadline.

I attach link for the code with just one column working perfectly. How to make two more like that to work on the same page?

clickMenu = function(gallery) 
 {
 var getImg = document.getElementById(gallery).getElementsByTagName("IMG");
 var getLi = document.getElementById(gallery).getElementsByTagName("li");

 for (var i=0; i<getImg.length; i++) {
   getImg[i].onclick=function() {
   if ((this.className.indexOf('left-arrow'))!=-1) {
    for (var x=getLi.length-1; x>0; x--) {
     if ((getLi[x].className.indexOf('chosen'))!=-1) {
      getLi[x].className=getLi[x].className.replace("chosen", "");
      x--;
      if (x>-1) {
       getLi[x].className+=" chosen";
        if (x>-1 && x<getLi.length-7){
        getLi[x].className=getLi[x].className.replace("hide", "");
         if ((getLi[x+7].className.indexOf('hide'))==-1)
         {
          getLi[x+7].className+=" hide";
         }
        }
       }
      }
     }
    }

   if ((this.className.indexOf('right-arrow'))!=-1) {
    for (var x=0; x<getLi.length-1; x++) {
     if ((getLi[x].className.indexOf('chosen'))!=-1) {
      getLi[x].className=getLi[x].className.replace("chosen", "");
      x++;
      if (x<getLi.length) {
       getLi[x].className+=" chosen";
        if (x>6 && x<getLi.length) {
        getLi[x].className=getLi[x].className.replace("hide", "");
         if ((getLi[x-7].className.indexOf('hide'))==-1)
         {
          getLi[x-7].className+=" hide";
         }
        }
       }
      }
     }
    }
   }
  }


  for (var i=0; i<getLi.length; i++) {
   getLi[i].onclick=function() {
    for (var x=0; x<getLi.length; x++) {
     if ((getLi[x].className.indexOf('chosen'))!=-1) {
      getLi[x].className=getLi[x].className.replace("chosen", "");
     }
    }
   this.className+=" chosen";  
   }
  }
 }
#gallery_rooms {width: 400px;height:auto;display: inline-block;position: relative;margin:0;padding-top:300px;}

#gallery_rooms img.left-arrow {width:10px; float:left;cursor:pointer;margin-left: 2%;margin-top: 4%;}
#gallery_rooms img.right-arrow {width:10px; float:right;cursor:pointer;margin-right: 2%;margin-top: 4%;}

#gallery_rooms ul {list-style:none; padding:0; float:left;margin:0;width:400px; height:auto; display:table-cell; vertical-align:middle; text-align:center;cursor:pointer}

#gallery_rooms ul li {display:inline; width:50px; height:50px; float:left; margin:0 4px; border:1px solid #000; cursor:pointer;}

#gallery_rooms ul li.hide {display:none;}

/* using background images 1 */
#gallery_rooms ul li.th1 {background:url(../images/rooms/single-bedroom/1.jpg);background-size: 150%;}
#gallery_rooms ul li.th2 {background:url(../images/rooms/single-bedroom/2.jpg);background-size: 150%;}
#gallery_rooms ul li.th3 {background:url(../images/rooms/single-bedroom/3.jpg);background-size: 150%;}

#gallery_rooms ul li img {visibility:hidden; display:block; width:50px; height:50px;background-size: 100%;
}

#gallery_rooms  ul li span {display:none; position:absolute; left:61px; top:430px; width:411px;font-family:verdana, arial, sans-serif; color:#666; font-size:11px; line-height:15px; text-align:justify;}
#gallery_rooms  ul li b {color:#444;}

#gallery_rooms  ul li.chosen {border-color:#fff; cursor:default;}
#gallery_rooms  ul li.chosen div {position:absolute; left:0; top:0; width:400px; height:auto; background:#444; border:1px solid #000; border-width:1px 1px 0 1px;}
#gallery_rooms  ul li.chosen div i {width:400px; height:auto; display:table-cell; vertical-align:middle; text-align:center;} 
#gallery_rooms  ul li.chosen div i img {visibility:visible; width:auto; height:auto; border:1px solid #aaa; margin:0 auto;}
#gallery_rooms  ul li.chosen span {display:block;}
<body onload="clickMenu('gallery_rooms')">
    <article class="one-third promo">
<div id="gallery_rooms">
<ul>
<img class="left-arrow" src="images/ico/arrow-left.png" alt="left-arrow"  title="" />
    <li class="chosen th1"><div><i><em></em><img class="start" src="http://www.cssplay.co.uk/menu/trees/t1.jpg" title="" alt="" /> </i></div>
    </li>
    <li class="th2"><div><i><em></em><img src="http://www.cssplay.co.uk/menu/trees/t2.jpg"  title="" alt="" /></i></div>
    </li>
    <li class="th2"><div><i><em></em><img src="http://www.cssplay.co.uk/menu/trees/t3.jpg"  title="" alt="" /></i></div>
    </li>
    <img class="right-arrow" src="images/ico/arrow-right.png" alt="right-arrow"  title="" />

</ul>

        </body>
sara
  • 1
  • 1

1 Answers1

0

SOLVED, matter of not closing div tag and I only added two different gallery_rooms divs and called them separately.

sara
  • 1
  • 1