Галерея из трех колонок с переключением изображений

Question

Я здесь новичок. Не очень разбираюсь в программировании, поэтому, пожалуйста, будьте осторожны со мной;) Единственное, что я не могу заставить работать - это галерея изображений, отображаемая в трех разных столбцах.

Если я копирую и вставляю все из первого столбца (я изменяю только имена классов фоновых изображений), галерея красиво отображается так же, как галерея первого столбца, но она не работает, когда я нажимаю стрелку или рисунок.

Мой вопрос: как изменить идентификаторы изображений или какие идентификаторы я должен изменить, чтобы это работало? В каком файле? Или, может быть, какой-нибудь сценарий javascript сделает эту работу просто отлично?

Пожалуйста, помогите, скоро наступит крайний срок.

Я прилагаю ссылку для кода с одним столбцом, работающим отлично. Как сделать так, чтобы еще две такие работали на одной странице?

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>

Answer 1

Решено, не закрывая тег div, и я добавил только два разных div gallery_rooms и назвал их отдельно.