Создание квадратизированной галереи проектов на JS

Цели и задачи

• Создать js-класс Img, описывающий компонент картинки галереи и принимающий следующие аргументы: тип картинки (широкая, высокая, стандартная), ссылка на изображение, ссылка на проект.

• Генерировать галерею в html.

• Реализовать механизм показа/скрытия частей галереи.

• По class.elem должен быть доступен корневой DOM элемент картинки.

Для ее создания вам понадобится базовое знание ООП в JS.

Итак, начнем.

1. Создадим HTML-контейнер для галереи:

 <div class="gallery"> 	<!--Сюда будут интерпретироваться картинки-->  </div>

2. Пропишем CSS для галереи и картинок:

Стили для высокой, широкой и стандартной картинки:

.short_box {     width: 383px;     height: 337px;     background: #ffffff;   }      .high_box {     width: 383px;   height: 692px;   background: #ffffff;   }    .long_box {     width: 795px;   height: 337px;     background: #ffffff;   } 

Стили для всех картинок:

  border: 4px solid #BB70B3;   z-index: 10;   margin-top: 18px;   position: relative;   overflow: hidden;   cursor: pointer; }  .gallery > div img {   z-index: -5;   width: 100%;   height: auto;   position: absolute;   left: 50%;    top: 50%;   transform: translate(-50%, -50%); /* Вертикальное и горизонтальное выравнивание */ }

Стили для контейнера галереи:

.gallery {   width: 795px;   display: table;   margin: 0 auto; }

Стили для кнопки прокрутки:

.scroll_to {   margin: 0 auto;   padding-top: 30px;   width: 100%;   cursor: pointer; }

Дополнительные стили для адаптивности галереи:

@media screen and (max-width: 795px) {   .gallery {     width: 595px;   }    .short_box {     width: 283px;     height: 237px;     background: #ffffff;   }    .high_box {     width: 283px;     height: 490px;     background: #ffffff;   }    .long_box {     width: 595px;     height: 237px;     background: #ffffff;   } } @media screen and (max-width: 595px) {   .gallery {     width: 100%;   }   .gallery > div {     display: block;     margin: 0 auto;     margin-top: 18px;     float: none!important;   }    .long_box {     width: 100%;     height: 237px;   } }

3. Пишем JS-класс для создания компонентов:

Создадим класс, в котором будем создавать DOM-элемент и повесим на него событие “onclick” для перехода по нужной ссылке.

Для будущего механизма показа/скрытия частей галереи передадим аргумент groupImg, в который впоследствии будет передаваться группа с принадлежащим ей изображением. Благодаря этому мы сможем скрывать и показывать нужные нам группы изображений.

class ImgComponent {     constructor(groupImg, srcImg, srcToProject, size = 'short', float = 'left') { // передаем аргументы: группа изображений, ссылка на изображение, ссылка на проект, размер картинки по заранее созданным типам(short, long, high), значение свойства float;          this.render() //создаем корневой DOM элемент          this.elem.className = `img_gallery ${size}_box`; // присваиваем классы для картинок, и также класс описывающий его тип         this.elem.dataset.group = `${groupImg}` // Присваиваем data-атрибут          this.elem.href = `./articles/${srcToProject}` // Присваиваем ссылку на проект, на который ведет картинка         this.elem.style.float = float; // Присваиваем свойство float         this.elem.innerHTML = `         <img src="img/${srcImg}" alt="gallery_img">         ` // Вкладываем внутрь элемента картинку          this.appendElem() // Добавляем элемент на страницу         this.onClick(); // Добавляем на элемент событие onclick     }      render = () => {          this.elem = document.createElement('div') //создаем метод, создающий корневой DOM элемент нашей картинки.     }     appendElem = () => { // Создаем метод, для добавления элемента на страницу         document.querySelector('.gallery').append(this.elem);     }     onClick = () => { // Создаем метод для прослушки события onclick элемента, для перехода по ссылке.         this.elem.addEventListener('click', () => {             window.open(this.elem.href);         }) 

Класс для генерации галереи готов, теперь можем создавать на основе него нужные нам компоненты (картинки).

Пример:

new ImgComponent(1, 'img_1.jpg', 'article1.html') new ImgComponent(1, 'img_1.jpg', 'article1.html', 'short', 'right') new ImgComponent(1, 'img_3.jpg', 'article1.html', 'long', 'right') new ImgComponent(1, 'img_2.jpg', 'article1.html', 'high', 'left') new ImgComponent(1, 'img_2.jpg', 'article1.html', 'high', 'right') new ImgComponent(2, 'img_3.jpg', 'article1.html', 'long') new ImgComponent(2, 'img_3.jpg', 'article1.html', 'long') new ImgComponent(3, 'img_3.jpg', 'article1.html', 'long') new ImgComponent(3, 'img_3.jpg', 'article1.html', 'long')

4. Создаем механизм показа/скрытия частей галереи

Для начала создадим глобальную переменную, в которой будет храниться прогресс показа галереи:

let groupNum = 1;

Далее создадим объект, на основе которого будет создаваться элемент нашей кнопки, и все необходимые методы.

let scroll_svg = {     elem: document.createElement('img'), // Создаем корневой DOM элемент кнопки     hiddenImg() {  // Создаем метод скрытия для первоначального всех изображений         let array = document.querySelectorAll('.img_gallery'); // Выделяем все изображения внутри галлереи         let arrayShow = document.querySelectorAll(`.img_gallery[data-group="${groupNum}"]`); // выделяем первую группу изображений по атрибута data-group для показа         for(let i = 0; i < array.length; i++) { // Скрываем все изображения             array[i].style.display = 'none'         }         for(let i = 0; i < arrayShow.length; i++) { // Показ первой группы изображений             arrayShow[i].style.display = '';             if(i === arrayShow.length - 1) { // Вставка элементов после первой группе изображений                 arrayShow[i].insertAdjacentElement('afterEnd', this.elem);             }         }     },     showImg() { // Создаем метод показа следующей группы изображений         let array = document.querySelectorAll('.img_gallery'); // Выделяем все изображения внутри галлереи         let arrayShow = document.querySelectorAll(`.img_gallery[data-group="${groupNum}"]`); // выделяем следующую группу изображений по атрибута data-group для показа         for(let i = 0; i < arrayShow.length; i++) { // Перебор массива изображений которые нужно показать             arrayShow[i].style.display = ''; // показываем все изображения из нашего массива              if(arrayShow[i] !== array[array.length - 1]) { // Проверка - на то является ли группа картинок последней                 arrayShow[i].insertAdjacentElement('afterEnd', this.elem); // Если нет, то вставляем кнопку после следующей группы картинок             } else {                 this.elem.style.display = 'none'; // Если условие не проходит, скрываем кнопку со страницы             }         }     },     render() {         this.elem.src = './img/scroll.svg'; // Прописываем путь до кнопки показа         this.elem.className = 'scroll_to'; // Присваивает класс, для последующего приминения CSS стилей         this.hiddenImg(); // Скрытие всех изображений на странице, кроме первой группы          this.elem.addEventListener('click', () => { // Вешаем событие на кнопку - показ группы изображений и увелечение переменной хранящей в себе прогресс показа изображений             groupNum++;             this.showImg();         })     } }

И завершающий штрих! Вызовем метод render() для активации механизма.

scroll_svg.render()

Уверен, что я не первопроходец в создании галерей на JS, но, надеюсь, что мое решение задачи окажется для кого-то полезным.

let groupNum = 1;  class ImgComponent {     constructor(groupImg, srcImg, srcToProject, size = 'short', float = 'left') {          this.render();          this.elem.className = `img_gallery ${size}_box`;         this.elem.dataset.group = `${groupImg}`         this.elem.href = `./articles/${srcToProject}`         this.elem.style.float = float;         this.elem.innerHTML = `         <img src="img/${srcImg}" alt="gallery_img">         `         this.appendElem();         this.onClick();     }      render = () => {          this.elem = document.createElement('div');     }     appendElem = () => {          document.querySelector('.gallery').append(this.elem);     }     onClick = () => {          this.elem.addEventListener('click', () => {             window.open(this.elem.href);         })     } }  new ImgComponent(1, 'img_1.jpg', 'article1.html') new ImgComponent(1, 'img_1.jpg', 'article1.html', 'short', 'right') new ImgComponent(1, 'img_3.jpg', 'article1.html', 'long', 'right') new ImgComponent(1, 'img_2.jpg', 'article1.html', 'high', 'left') new ImgComponent(1, 'img_2.jpg', 'article1.html', 'high', 'right') new ImgComponent(2, 'img_3.jpg', 'article1.html', 'long') new ImgComponent(2, 'img_3.jpg', 'article1.html', 'long') new ImgComponent(3, 'img_3.jpg', 'article1.html', 'long') new ImgComponent(3, 'img_3.jpg', 'article1.html', 'long')   let scroll_svg = {     elem: document.createElement('img'),     hiddenImg() {         let array = document.querySelectorAll('.img_gallery');         let arrayShow = document.querySelectorAll(`.img_gallery[data-group="${groupNum}"]`);         for(let i = 0; i < array.length; i++) {             array[i].style.display = 'none'         }         for(let i = 0; i < arrayShow.length; i++) {             arrayShow[i].style.display = '';             if(i === arrayShow.length - 1) {                 arrayShow[i].insertAdjacentElement('afterEnd', this.elem);             }         }     },     showImg() {         let array = document.querySelectorAll('.img_gallery');         let arrayShow = document.querySelectorAll(`.img_gallery[data-group="${groupNum}"]`);         for(let i = 0; i < arrayShow.length; i++) {             arrayShow[i].style.display = '';             if(arrayShow[i] !== array[array.length - 1]) {                 arrayShow[i].insertAdjacentElement('afterEnd', this.elem);             } else {                 this.elem.style.display = 'none';             }         }     },     render() {         this.elem.src = './img/scroll.svg';         this.elem.className = 'scroll_to';         this.hiddenImg();          this.elem.addEventListener('click', () => {             groupNum++;             this.showImg();         })     } }  scroll_svg.render()