Галерея фотографий

218

24 апреля 2017, 04:11

Для вывода галереи использую следующий код: Разметка:

<div class="gallery">
<div>
    <div class="photos">
        <img src="images/img-1.jpg" alt="">
        <img src="images/img-2.jpg" alt="">
        <img src="images/img-3.jpg" alt="">
        <img src="images/img-4.jpg" alt="">
    </div>
    <div class="buttons">
        <button class="prev">Назад</button>
        <button class="next">Вперед</button>
    </div>
</div>
<div class="previews">
    <img src="images/img-1.jpg" alt="" data-num="0">
    <img src="images/img-2.jpg" alt="" data-num="1">
    <img src="images/img-3.jpg" alt="" data-num="2">
    <img src="images/img-4.jpg" alt="" data-num="3">
</div>

Скрипт:

var prev = document.querySelector(".gallery button.prev");
var next = document.querySelector(".gallery button.next");
var images = document.querySelectorAll(".gallery .photos img");
var i = 0;
if (next) {
next.onclick = function () {
    images[i].style.opacity = "0";
    i++;
    if (i >= images.length) {
        i = 0;
    }
    images[i].style.opacity = "1";
}}

if (prev) {
prev.onclick = function () {
    images[i].style.opacity = "0";
    i--;
    if (i < 0) {
        i = images.length - 1;
    }
    images[i].style.opacity = "1";
}}

$(function() {
    $(".gallery .previews img").click(function() {
        i = $(this).attr("data-num");
        $(".gallery .photos img").css("opacity","0");
        images[i].style.opacity = "1";
    })
})

Все работало до тех пор, пока не появилась необходимость поставить более 1й галереи на страницу. Когда их больше чем одна в из-за переменных images, prev, next работа нарушается.
Как можно модернизировать скрипт для корректной работы с большим количеством галерей?

Answer 1

function Gallery(target) { 
  this.target = $(target); 
  this.images = $('.photos img', this.target); 
  this.index = 0; 
} 
 
Gallery.prototype.init = function() { 
  var self = this; 
  $('button.next', this.target).click(function() { 
    self.images.eq(self.index).css('opacity',  0); 
    self.index++; 
    if (self.index >= self.images.length) { 
      self.index = 0; 
    } 
    self.images.eq(self.index).css('opacity', 1); 
  }); 
  $('button.prev', this.target).click(function() { 
    self.images.eq(self.index).css('opacity',  0); 
    self.index--; 
    if (self.index < 0) { 
      self.index = self.images.length - 1; 
    } 
    self.images.eq(self.index).css('opacity', 1); 
  }); 
  $('.previews img', this.target).click(function() { 
    self.index = $(this).attr('data-num'); 
    self.images.css('opacity', 0); 
    self.images.eq(self.index).css('opacity', 1); 
  }); 
}; 
 
$(function() { 
  $('.gallery').each(function() { 
    new Gallery(this).init();       
  }); 
});

.gallery { 
  float: left; 
  width: 50%; 
} 
 
.photos { 
  height: 120px; 
} 
 
.photos img { 
  height: 120px; 
  opacity: 0; 
  position: absolute; 
  width: 160px; 
} 
 
.photos img:first-child { 
  opacity: 1; 
} 
 
.previews img { 
  height: 30px; 
  width: 40px; 
} 
 
.color1 { background-color: #f00; } 
.color2 { background-color: #f80; } 
.color3 { background-color: #ff0; } 
.color4 { background-color: #0f0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="gallery"> 
  <div class="photos"> 
    <img src="images/img-1.jpg" alt="Photo 1" class="color1"/> 
    <img src="images/img-2.jpg" alt="Photo 2" class="color2"/> 
    <img src="images/img-3.jpg" alt="Photo 3" class="color3"/> 
    <img src="images/img-4.jpg" alt="Photo 4" class="color4"/> 
  </div> 
  <div class="buttons"> 
    <button class="prev">Назад</button> 
    <button class="next">Вперед</button> 
  </div> 
  <div class="previews"> 
    <img src="images/img-1.jpg" alt="1" data-num="0" class="color1"/> 
    <img src="images/img-2.jpg" alt="2" data-num="1" class="color2"/> 
    <img src="images/img-3.jpg" alt="3" data-num="2" class="color3"/> 
    <img src="images/img-4.jpg" alt="4" data-num="3" class="color4"/> 
  </div> 
</div> 
 
<div class="gallery"> 
  <div class="photos"> 
    <img src="images/img-1.jpg" alt="Photo 1" class="color1"/> 
    <img src="images/img-2.jpg" alt="Photo 2" class="color2"/> 
    <img src="images/img-3.jpg" alt="Photo 3" class="color3"/> 
    <img src="images/img-4.jpg" alt="Photo 4" class="color4"/> 
  </div> 
  <div class="buttons"> 
    <button class="prev">Назад</button> 
    <button class="next">Вперед</button> 
  </div> 
  <div class="previews"> 
    <img src="images/img-1.jpg" alt="1" data-num="0" class="color1"/> 
    <img src="images/img-2.jpg" alt="2" data-num="1" class="color2"/> 
    <img src="images/img-3.jpg" alt="3" data-num="2" class="color3"/> 
    <img src="images/img-4.jpg" alt="4" data-num="3" class="color4"/> 
  </div> 
</div>