Показать сообщение отдельно
  #9 (permalink)  
Старый 10.08.2019, 17:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,137

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