Цели и задачи
Создать 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;
}
Стили для всех картинок:
.gallery > div {
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()};
devlev
А чем bootstrap вас не устроил?
Lucker_Kophe Автор
Спасибо за вопрос. Так как все HTML картинки генерируются у меня в JS, а bootstrap нужно интерпретировать в виде классов, я решил не захламлять свой генерируемый HTML и прописать чистый CSS.