Вопрос требует решения) Галерея.

[Endorphin]

Возник такой вопрос, JavaScript еще не учил, но интересует возможно ли например такое: У меня есть 3 пункта меню, пункт 1, пункт 2, пункт 3. Нужно чтобы при клике на пункт 1 показывались одни картинки на странице, а при клике на пункт 2 другие, и т.д. Собственно вопрос вот в чем, возможно ли с помощью скрипта изменить путь к картинке к примеру по умолчанию images/slides1/img1.png, а после клика по пункту images/slides2/img1.png, в теге img. Так как создавать 3 страницы разных ради того чтоб просто менять как то не очень  кто сможет популярно объяснить как создать данный скрипт, если такое возможно конечно. К странице будет подключаться галерея Gamma Gallery

[by chris]

@Endorphin,https://jsfiddle.net/cy792dmr/

[Endorphin]

7 часов назад, by chris сказал:

@Endorphin,https://jsfiddle.net/cy792dmr/

Огромное спасибо:)

[Endorphin]

<div class="gallery-main-block clearfix">    

  <div id="gallery">
    <div class="item-masonry sizer4 nav-portf">
      <nav>
        <button type="button">Индивидуальная</button>
        <button type="button">Love story</button>
        <button type="button">Семейная и детская</button>
        <button type="button">Свадебная съемка</button>
        <button type="button">Студийная съемка</button>
      </nav> 
    </div>
    
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img1.jpg" alt="img1"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img2.jpg" alt="img2"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img10l.jpg" alt="img10l"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img3.jpg" alt="img1"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img8l.jpg" alt="img8l"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img4.jpg" alt="img5"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img9l.jpg" alt="img9l"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img5.jpg" alt="img5"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img6.jpg" alt="img6"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img11l.jpg" alt="img11l"> 
    </div>


  </div>
  

Нужно тоже самое но для такой структуры если не сложно, попробовал подставить свои значения, но видимо чего то не хватает, заранее очень благодарен.

Edited July 15, 2016 by Endorphin

[by chris]

@Endorphin, нужен код с подставленными значениями, чтобы отследить где ошибка.

[Endorphin]

1 час назад, by chris сказал:

@Endorphin, нужен код с подставленными значениями, чтобы отследить где ошибка.

 

	<script>
   var btn = document.querySelectorAll('button'),
        wrp = document.querySelector('.item-masonry'),
        img = wrp.querySelectorAll('img');

    [].forEach.call(btn, function(el, i) {
      el.addEventListener('click', function() {

        [].forEach.call(img, function(el) {
          var str = img[i].src,
              str = str.slice(img[i].src.indexOf('images')),
              re = /gallery\d+/gi,
              newstr;

          newstr = str.replace(re, 'gallery'+ (i+1));
          el.src = newstr;
          alert(newstr);

        });
      });
    }); 
  </script>

 

[by chris]

Сейчас мы не можешь получить полную коллекцию картинок, т.к. .item-masonry не является  родителем для всех сразу. Вот идентификатор gallery, подойдет.

[Endorphin]

10 часов назад, by chris сказал:

Сейчас мы не можешь получить полную коллекцию картинок, т.к. .item-masonry не является  родителем для всех сразу. Вот идентификатор gallery, подойдет.

Тоесть в wrp записать id gallery место item-masonry?

[by chris]

3 часа назад, Endorphin сказал:

Тоесть в wrp записать id gallery место item-masonry?

ага)

[Endorphin]

Сработало, но теперь он переключает еще и изображения вложенные на одно и тоже изображение.

должно быть так.

<div class="item-masonry sizer4">
          <img src="images/gallery1/img9l.jpg" alt="img9l"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img5.jpg" alt="img5"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img6.jpg" alt="img6"> 
    </div>
    <div class="item-masonry sizer4">
          <img src="images/gallery1/img11l.jpg" alt="img11l"> 
    </div>

а после переключения происходит вот так

    <div class="item-masonry sizer4">
          <img src="images/gallery2/img11l.jpg" alt="img11l"> 
    </div>
<div class="item-masonry sizer4">
          <img src="images/gallery2/img11l.jpg" alt="img11l"> 
    </div>
<div class="item-masonry sizer4">
          <img src="images/gallery2/img11l.jpg" alt="img11l"> 
    </div>
<div class="item-masonry sizer4">
          <img src="images/gallery2/img11l.jpg" alt="img11l"> 
    </div>
<div class="item-masonry sizer4">
          <img src="images/gallery2/img11l.jpg" alt="img11l"> 
    </div>

скрипт блин вредный какой, или я вредный)

[by chris]

23 минуты назад, Endorphin сказал:

еще и изображения вложенные на одно и тоже изображение.

не осилил логику.

[Endorphin]

Я же скинул код. Смотри, на странице были разные изображения, нажимаю кнопку чтоб переключился каталог, по логике должна появиться другая галерея с изображениями, а получается что после переключения изменился каталог, и в путь подставились одинаковые изображения.

[by chris]

@Endorphin, так - https://jsfiddle.net/cy792dmr/1/ ?

[Endorphin]

3 минуты назад, by chris сказал:

@Endorphin, так - https://jsfiddle.net/cy792dmr/1/ ?

Огромнейшее спасибо, да именно то что нужно было, жаль что еще не знаю js.