Цели и задачи
-
Создать 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, но, надеюсь, что мое решение задачи окажется для кого-то полезным.
Полный 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()