Галерея

Tarasov, Lesson 6, Events

by shurikation

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <div class="galleryPreviewsContainer">  
  <!--- В src - миниатюры, в data- полноразмерные фото -->
    <img src="http://d2ouvy59p0dg6k.cloudfront.net/img/web_259255_511791.jpg" data-full_image_url="https://www.rockstargames.com/sanandreas/desktops/wallpapers/800x600/SA_og800x600.jpg" alt="#1">
    <img src="https://s1.1zoom.me/prev2/568/Germany_Forests_Schwarzwald_Trees_Rays_of_light_567955_300x200.jpg" data-full_image_url="http://picsdesktop.net/Winter/800x600/PicsDesktop.net_10.jpg" alt="#2">
    <img src="http://sci.photos/Photos/Nature/Nature/Nature_small.jpg" data-full_image_url="http://arabesko.ru/images/files/walpapers/oboi1_800_600.jpg" alt="#3">
    <img src="https://www.eco-business.com/media/cache/a0/89/a0895ac88feff6852593941272ff3e0e.jpg" data-full_image_url="https://magazine.uchicago.edu/views/view1_800x600.jpg" alt="#4">
  </div>
</body>
</html>

JavaScript

'use srtict';

const gallery = {
//Селекторы для галереи
//Это для того, Чтобы программист не вникал в то как у вас все это используется, где надо исправить что-то чтобы это работало как надо
	settings: {
  	previewSelector: '.mySuperGallery',
    openedImageWrapperClass: '.galleryWrapper',
    openedImageClass: 'galleryWrapper__image',
    openedImageScreenClass: 'galleryWrapper__screen',
    openedImageCloseBtnClass: 'galleryWrapper__close',
    openedImageCloseBtnSrc: 'https://abeon-hosting.com/images/cross-button-png-7.png',
  },
  
  init(userSettings = {}) {
  //Вместо'.mySuperGallery' - ставим '.galleryPreviewsContainer'
   Object.assign(this.settings, userSettings);
   
   document.querySelector(this.settings.previewSelector).addEventListener('click', event => this.containerClickHandler(event)); //вызовет containerClickHandler
  
  },
  
  containerClickHandler(event) {
  //если клик не по картинке, то выходим отсюда
  	if (event.target.tagName !== 'IMG') {
    return;
    }
    
    this.openImage(event.target.dataset.full_image_url); //передает дата-атрибут т.е. путь до полноразмерной картинки
  },
  
  //метод открывает картинку
  openImage(src) {

    this.getScreenContainer().querySelector('.openedImageClass').src = src;//*****получаем картинку без src*** и вставляем в нее src
  },
  
   //метод, который получает контйнер с картинкой
 getScreenContainer() {
 	const galleryWrapperElement = document.querySelector(`.${this.settings.openedImageWrapperClass}`);
  //если такой существует, то его надо вернуть
  if(galleryWrapperElement) {
   return galeryWrapperElement;
  }
  
  //иначе - запустить метод создания контейнера
  return this.createScreenContainer();
 },
 
 createScreenContainer() {
 		const galleryWrapperElement = document.createElement('div');
    //ставим диву класс, который берем из настроек. !!! Не просто вписываю четко в код этот класс и как это исправить - это называется хардкодить. Все должно быть гибко и разбито.
   ...