09.08.2019, 13:31
|
|
Новичок на форуме
|
|
Регистрация: 09.08.2019
Сообщений: 5
|
|
|
Доработка логики в готовом коде "Галереи"
Привет всем!
Я только начинаю работать с JS, хотел попросить совета по доработке логики и улучшению кода в целом.
Коротко:
Есть скрытый div с областями кнопок (закрытие, след. и пред. изображение), пустыми картинкой и описанием.
При нажатии на любую картинку галереи - div отображается и туда вставляются: url изображения, текстовое описание.
При нажатие на кнопки след. и пред. изображения - меняется url картинки и описание.
Собственно, всё. Несколько вопросов:
1. Правильно ли я объявил переменные в начале и нужно ли их вообще объявлять? Если нет, то почему и как сделать лучше?
2. В методах nextImg и previousImg код практически одинаковый, но не знаю, как его грамотно объединить, чтобы всё работало. Можно ли это сделать и как? Или в какую сторону двигаться, чтобы решить эту задачу?
3. Можно ли как-то упростить или улучшить код? Скорее всего, я не знаю каких-то вещей, которые надо изучить, чтобы сделать код проще и компактнее. Какие именно материалы изучить?
Спасибо за внимание,
Вадим
(function() {
////// Переменные для работы //////
var HIDDEN_CLASS = "hidden";
var OVERFLOW_BLOCK = "overflow-block";
var MODAL = document.body.querySelector(".modal");
var MODAL_IMAGE = MODAL.querySelector("img");
var MODAL_CAPTION = MODAL.querySelector("p");
var MODAL_BUTTON_CLOSE = MODAL.querySelector(".modal-close");
var MODAL_BUTTON_BACK = MODAL.querySelector(".modal-previous");
var GALLERY = document.body.querySelector(".photos")
.getElementsByTagName("img");
////// Объект для работы с функциями //////
var actionImgModal = {
////// Открытие окна
openImg(modalWindow, modalImg, modalCaption, imagesArray) {
for (var i = 0;i<imagesArray.length; i++) {
imagesArray[i].onclick = function () {
document.body.classList.add(OVERFLOW_BLOCK);
modalWindow.classList.remove(HIDDEN_CLASS);
modalImg.src = this.src;
modalCaption.innerHTML = this.alt;
};
}
},
////// Закрытие окна
closeImg(modalWindow) {
document.body.classList.remove(OVERFLOW_BLOCK);
modalWindow.classList.add(HIDDEN_CLASS);
},
////// Следующее изображение
nextImg(modalImg, modalCaption, imagesArray) {
for (var i = 0;i<imagesArray.length; i++) {
if (modalImg.src === imagesArray[imagesArray.length-1].src) {
modalImg.src = imagesArray[0].src;
modalImg.alt = imagesArray[0].alt;
modalCaption.innerHTML = modalImg.alt;
break;
} else if (modalImg.src === imagesArray[i].src) {
i++;
modalImg.src = imagesArray[i].src;
modalImg.alt = imagesArray[i].alt;
modalCaption.innerHTML = modalImg.alt;
break;
}
}
},
////// Предыдущее изображение
previousImg(modalImg, modalCaption, imagesArray) {
for (var i = 0;i<imagesArray.length; i++) {
if (modalImg.src === imagesArray[0].src) {
modalImg.src = imagesArray[imagesArray.length-1].src;
modalImg.alt = imagesArray[imagesArray.length-1].alt;
modalCaption.innerHTML = modalImg.alt;
break;
} else if (modalImg.src === imagesArray[i].src) {
i--;
modalImg.src = imagesArray[i].src;
modalImg.alt = imagesArray[i].alt;
modalCaption.innerHTML = modalImg.alt;
break;
}
}
}
};
////// Запуск функций на странице //////
////// Открытие окна
actionImgModal.openImg(MODAL, MODAL_IMAGE, MODAL_CAPTION, GALLERY);
////// Закрытие окна
MODAL_BUTTON_CLOSE.onclick = function () {
actionImgModal.closeImg(MODAL);
};
////// Следующее изображение
MODAL_IMAGE.onclick = function () {
actionImgModal.nextImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY);
};
////// Предыдущее изображение
MODAL_BUTTON_BACK.onclick = function () {
actionImgModal.previousImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY);
};
////// Работа с изображениями клавиатурой
document.onkeydown = function (evt) {
if (evt.key == "Escape") {
actionImgModal.closeImg(MODAL);
} else if (evt.key == "ArrowRight") {
actionImgModal.nextImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY);
} else if (evt.key == "ArrowLeft") {
actionImgModal.previousImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY);
}
};
})();
|
|
09.08.2019, 13:47
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
persi005,
var GALLERY = document.querySelector(".photos img");
добавьте переменную для индекса, и в методах nextImg и previousImg меняйте только индекс, напишите функцию для показа картинки относительно индекса.
|
|
09.08.2019, 15:34
|
|
Новичок на форуме
|
|
Регистрация: 09.08.2019
Сообщений: 5
|
|
Спасибо за помощь.
Сообщение от рони
|
var GALLERY = document.querySelector(".photos img");
|
Это переделал, только мне нужен массив из картинок и я исправил так:
.querySelector(".photos img");
// На этот
.querySelectorAll(".photos img");
Добавил новый метод, который в зависимости от счётчика меняет картинку "вперёд" или "назад":
changeImg(modalImg, modalCaption, imagesArray, count) {
for (var i = 0;i<imagesArray.length; i++) {
if (modalImg.src === imagesArray[imagesArray.length-1].src && count === 1) {
modalImg.src = imagesArray[0].src;
modalImg.alt = imagesArray[0].alt;
modalCaption.innerHTML = modalImg.alt;
break;
} else if (modalImg.src === imagesArray[0].src && count === -1) {
modalImg.src = imagesArray[imagesArray.length-1].src;
modalImg.alt = imagesArray[imagesArray.length-1].alt;
modalCaption.innerHTML = modalImg.alt;
break;
} else if (modalImg.src === imagesArray[i].src) {
i += count;
modalImg.src = imagesArray[i].src;
modalImg.alt = imagesArray[i].alt;
modalCaption.innerHTML = modalImg.alt;
break; }
};
},
nextImg(modalImg, modalCaption, imagesArray) {
this.changeImg(modalImg, modalCaption, imagesArray, 1);
},
previousImg(modalImg, modalCaption, imagesArray) {
this.changeImg(modalImg, modalCaption, imagesArray, -1);
}
|
|
09.08.2019, 15:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
persi005,
for убрать бы
|
|
09.08.2019, 23:20
|
|
Новичок на форуме
|
|
Регистрация: 09.08.2019
Сообщений: 5
|
|
|
Сообщение от рони
|
|
for убрать бы
|
Пробовал убрать for для changeImg(), но что-то знаний не хватает. Есть варианты, как можно сделать? |
|
09.08.2019, 23:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
|
|
09.08.2019, 23:53
|
|
Новичок на форуме
|
|
Регистрация: 09.08.2019
Сообщений: 5
|
|
Благодарю, буду пробовать |
|
10.08.2019, 13:07
|
|
Новичок на форуме
|
|
Регистрация: 09.08.2019
Сообщений: 5
|
|
Если кому интересно, то подсократил код:
(function() {
var HIDDEN_CLASS = "hidden";
var OVERFLOW_BLOCK = "overflow-block";
var MODAL = document.body.querySelector(".modal");
var MODAL_IMAGE = MODAL.querySelector("img");
var MODAL_CAPTION = MODAL.querySelector("p");
var MODAL_BUTTON_CLOSE = MODAL.querySelector(".modal-close");
var MODAL_BUTTON_BACK = MODAL.querySelector(".modal-previous");
var GALLERY_ARRAY = document.body.querySelectorAll(".photos img");
var CURRENT_IMG_ID;
var actionImgModal = {
openImg(modalWindow, modalImg, modalCaption, imagesArray) {
for (var i = 0; i < imagesArray.length; i++) {
imagesArray[i].id = i;
imagesArray[i].onclick = function () {
CURRENT_IMG_ID = this.id;
modalImg.src = this.src;
modalCaption.innerHTML = this.alt;
modalWindow.classList.remove(HIDDEN_CLASS);
document.body.classList.add(OVERFLOW_BLOCK);
};
}
},
closeImg(modalWindow) {
document.body.classList.remove(OVERFLOW_BLOCK);
modalWindow.classList.add(HIDDEN_CLASS);
},
changeImg(modalImg, modalCaption, imagesArray) {
if (CURRENT_IMG_ID == imagesArray.length) { CURRENT_IMG_ID = 0;
} else if (CURRENT_IMG_ID == -1) { CURRENT_IMG_ID = imagesArray.length - 1
}
modalImg.src = imagesArray[CURRENT_IMG_ID].src;
modalImg.alt = imagesArray[CURRENT_IMG_ID].alt;
modalCaption.innerHTML = modalImg.alt;
},
nextImg(modalImg, modalCaption, imagesArray) {
CURRENT_IMG_ID++;
this.changeImg(modalImg, modalCaption, imagesArray);
},
previousImg(modalImg, modalCaption, imagesArray) {
CURRENT_IMG_ID--;
this.changeImg(modalImg, modalCaption, imagesArray);
}
};
actionImgModal.openImg(MODAL, MODAL_IMAGE, MODAL_CAPTION, GALLERY_ARRAY);
MODAL_BUTTON_CLOSE.onclick = function () {
actionImgModal.closeImg(MODAL);
};
MODAL_IMAGE.onclick = function () {
actionImgModal.nextImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY_ARRAY);
};
MODAL_BUTTON_BACK.onclick = function () {
actionImgModal.previousImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY_ARRAY);
};
document.onkeydown = function (evt) {
if (evt.key == "Escape") {
actionImgModal.closeImg(MODAL);
} else if (evt.key == "ArrowRight") {
actionImgModal.nextImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY_ARRAY);
} else if (evt.key == "ArrowLeft") {
actionImgModal.previousImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY_ARRAY);
}
};
})();
|
|
10.08.2019, 16:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
простейшая галерея
persi005,
для примера ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style type="text/css">
.photos {
width: 600px;
padding: 25px 0 0;
margin: 0 auto;
}
.modal {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.big-image {
background: #fff;
width: 300px;
height: 150px;
margin: 10% auto;
border: 10px solid #ddd;
position: relative;
box-shadow: 0px 0px 20px #000;
border-radius: 15px;
}
.big-image img {
margin: 0 auto;
display: block;
width: 300px;
height: 150px;
}
.modal-previous,
.modal-nextious {
border: none;
position: absolute;
width: 40px;
height: 40px;
outline: none;
}
.modal-previous {
bottom: 20px;
left: 20px;
background: url(http://coderpro.ru/images/images/controls.png) no-repeat
0 0;
}
.modal-nextious {
bottom: 20px;
left: 250px;
background: url(http://coderpro.ru/images/images/controls.png) no-repeat -48px
0;
}
.thumbnails {
width: 605px;
display: flex;
justify-content: center;
}
.thumbnails img {
margin: 0 5px 0 0;
width: 70px;
height: 39px;
border: 2px solid transparent;
display: block;
}
.hidden {
transform: scale(0);
}
.modal-close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
border-radius: 15px;
box-shadow: 1px 1px 3px #000;
}
</style>
</head>
<body>
<div class="photos">
<div class="modal hidden">
<div class="big-image">
<button class="modal-close">X</button>
<img src="http://coderpro.ru/images/images/img11.jpg" alt="image11" />
<button class="modal-previous"></button>
<button class="modal-nextious"></button>
</div>
</div>
<div class="thumbnails">
<img src="http://coderpro.ru/images/images/img11.jpg" alt="image11" />
<img src="http://coderpro.ru/images/images/img12.jpg" alt="image12" />
<img src="http://coderpro.ru/images/images/img13.jpg" alt="image13" />
<img src="http://coderpro.ru/images/images/img14.jpg" alt="image14" />
</div>
</div>
<script>
(function() {
var HIDDEN_CLASS = 'hidden';
var OVERFLOW_BLOCK = 'overflow-block';
var MODAL = document.body.querySelector('.modal');
var MODAL_IMAGE = MODAL.querySelector('img');
var MODAL_CAPTION = MODAL.querySelector('p');
var MODAL_BUTTON_CLOSE = MODAL.querySelector('.modal-close');
var MODAL_BUTTON_BACK = MODAL.querySelector('.modal-previous');
var MODAL_BUTTON_NEXT = MODAL.querySelector('.modal-nextious');
var GALLERY_ARRAY = document.querySelectorAll('.photos .thumbnails img');
var CURRENT_IMG_INDEX = 0;
var IMG_LENGTH = GALLERY_ARRAY.length;
GALLERY_ARRAY.forEach(function(img, i) {
img.onclick = function() {
CURRENT_IMG_INDEX = i;
changeImg();
};
});
function changeImg() {
MODAL.classList.remove(HIDDEN_CLASS);
MODAL_IMAGE.src = GALLERY_ARRAY[CURRENT_IMG_INDEX].src;
}
function closeImg() {
MODAL.classList.add(HIDDEN_CLASS);
}
MODAL_BUTTON_CLOSE.onclick = closeImg;
function limitIndex(i) {
return (CURRENT_IMG_INDEX + IMG_LENGTH + i) % IMG_LENGTH;
}
MODAL_BUTTON_BACK.onclick = function() {
CURRENT_IMG_INDEX = limitIndex(-1);
changeImg();
};
MODAL_BUTTON_NEXT.onclick = function() {
CURRENT_IMG_INDEX = limitIndex(1);
changeImg();
};
})();
</script>
</body>
</html>
|
|
|
|
