Галерея со слайдером и заглушкой (no image)

Tarasov, Basic JS, Events, Lesson 6

by shurikation

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Галерея</title>
  <style>
    .galleryWrapper__screen{
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #222;
      opacity: 0.8;
      position: fixed;
      top: 0;
      z-index: 100;
      display: block;
      text-align: center;
    }
    .galleryWrapper__image {
      max-height: 80%;
      max-width: 80%;
      z-index: 101;
      position: absolute;
      margin: auto;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
    .galleryWrapper__close {
      z-index: 101;
      position: absolute;
      top: 0;
      right: 0;
    }

    .galleryWrapper__next {
      z-index: 101;
      position: absolute;
      top: 50%;
      right: 0;
    }

    .galleryWrapper__back {
      z-index: 101;
      position: absolute;
      top: 50%;
      left: 0;
    }

  </style>
</head>
<body>
  <div class="galleryPreviewsContainer">
    <img src="images/min/1.jpg" data-full_image_url="images/max/1.jpg" alt="Картинка1">
    <img src="images/min/2.jpg" data-full_image_url="images/max/2.jpg" alt="Картинка2">
    <img src="images/min/3.jpg" data-full_image_url="images/max/3.jpg" alt="Картинка3">
    <img src="images/min/4.jpg" data-full_image_url="images/max/4.jpg" alt="Картинка4">
  </div>
  <!--
  <div class="galleryWrapper">
    <div class="galleryWrapper__screen"></div>
    <img class="galleryWrapper__close" src="images/gallery/close.png" alt="">
    <img class="galleryWrapper__image" src="images/max/1.jpg" alt="">
  </div>
  -->
  <script src="js.js"></script>
</body>
</html>

JavaScript

"use strict";

/**
 * @property {Object} settings Объект с настройками галереи.
 * @property {string} settings.previewSelector Селектор обертки для миниатюр галереи.
 * @property {string} settings.openedImageWrapperClass Класс для обертки открытой картинки.
 * @property {string} settings.openedImageClass Класс открытой картинки.
 * @property {string} settings.openedImageScreenClass Класс для ширмы открытой картинки.
 * @property {string} settings.openedImageCloseBtnClass Класс для картинки кнопки закрыть.
 * @property {string} settings.openedImageCloseBtnSrc Путь до картинки кнопки открыть.
 */
const gallery = {

    openedImageEl: null, //элемент открытой картинки здесь храним

    settings: {
        previewSelector: '.mySuperGallery',
        openedImageWrapperClass: 'galleryWrapper',
        openedImageClass: 'galleryWrapper__image',
        openedImageScreenClass: 'galleryWrapper__screen',
        openedImageCloseBtnClass: 'galleryWrapper__close',
        openedImageCloseBtnSrc: 'images/gallery/close.png',
        openedImageNextBtnSrc: 'images/gallery/next.png',
        openedImageNextBtnClass: 'galleryWrapper__next',
        openedImageBackBtnSrc: 'images/gallery/back.png',
        openedImageBackBtnClass: 'galleryWrapper__back',
        imageNotFoundSrc: 'images/gallery/no_image.png',
    },

    /**
     * Инициализирует галерею, ставит обработчик события.
     * @param {Object} userSettings Объект настроек для галереи.
     */
    init(userSettings = {}) {
        // Записываем настройки, которые передал пользователь в наши настройки.
        this.settings = Object.assign(this.settings, userSettings);

        // Находим элемент, где будут превью картинок и ставим обработчик на этот элемент,
        // при клике на этот элемент вызовем функцию containerClickHandler в нашем объекте
        // gallery и передадим туда событие MouseEvent, которое случилось.
        document
            .querySelector(this.settings.previewSelector)
           ...