Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.08.2019, 13:31
Новичок на форуме
Отправить личное сообщение для persi005 Посмотреть профиль Найти все сообщения от persi005
 
Регистрация: 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);
    }
};

})();
Ответить с цитированием
  #2 (permalink)  
Старый 09.08.2019, 13:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

persi005,
var GALLERY = document.querySelector(".photos img");

добавьте переменную для индекса, и в методах nextImg и previousImg меняйте только индекс, напишите функцию для показа картинки относительно индекса.
Ответить с цитированием
  #3 (permalink)  
Старый 09.08.2019, 15:34
Новичок на форуме
Отправить личное сообщение для persi005 Посмотреть профиль Найти все сообщения от persi005
 
Регистрация: 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);
}
Ответить с цитированием
  #4 (permalink)  
Старый 09.08.2019, 15:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

persi005,
for убрать бы
Ответить с цитированием
  #5 (permalink)  
Старый 09.08.2019, 23:20
Новичок на форуме
Отправить личное сообщение для persi005 Посмотреть профиль Найти все сообщения от persi005
 
Регистрация: 09.08.2019
Сообщений: 5

Сообщение от рони Посмотреть сообщение
for убрать бы
Пробовал убрать for для changeImg(), но что-то знаний не хватает. Есть варианты, как можно сделать?
Ответить с цитированием
  #7 (permalink)  
Старый 09.08.2019, 23:53
Новичок на форуме
Отправить личное сообщение для persi005 Посмотреть профиль Найти все сообщения от persi005
 
Регистрация: 09.08.2019
Сообщений: 5

Сообщение от рони Посмотреть сообщение
persi005,
https://javascript.ru/forum/misc/762...ntejjnere.html
https://javascript.ru/forum/misc/769...tml#post504286
https://javascript.ru/forum/misc/576...tml#post384004
https://javascript.ru/forum/dom-wind...tml#post508951
Благодарю, буду пробовать
Ответить с цитированием
  #8 (permalink)  
Старый 10.08.2019, 13:07
Новичок на форуме
Отправить личное сообщение для persi005 Посмотреть профиль Найти все сообщения от persi005
 
Регистрация: 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);
        }
    };

})();
Ответить с цитированием
  #9 (permalink)  
Старый 10.08.2019, 16:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

простейшая галерея
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>
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск