Галерея с оверлеем

212
10 июня 2022, 12:20

Помогите пожалуйста реализовать галерею, или подскажите готовое решение с готовым функционалом как на скриншоте: http://prntscr.com/vmn588

Если подробнее, нужно сделать Grid сетку и в ней разместить изображения, по нажатию на которые будет открываться такой оверлей с возможностью переключаться между изображениями. Я нашёл парочку подходящих вариантов, но там настройка стилей, построение блоков и добавление самих изображений реализовано через JS, а хотелось бы размещать и стилизовать блоки (например добавлять описание под изображением) в HTML+CSS, как тут, например:

Answer 1

посидел и подумал... Вот принцип, как можно всё реализовать, почти готовое решение

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./styles/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./styles/css1.css">
</head>
<body>
    <div class="container container-fluid">
        
        <div class="row">
           
            <div class="main col-lg-12">
                <div class="grid col-lg-3">
                    <a href="#mainimg"><img src="img/LogoWRP170x150.png"></img></a>
                    <div class="info">
                        <p>Описание:</p>
                    </div>
                </div>
                <div class="grid col-lg-3">
                    <img src="img/LogoWRP170x150.png"></img>
                    <div class="info">
                        <p>Описание:</p>
                    </div>
                    <a href="#" id="mainimg">
                        <div id="okno">
                            <img src="img/LogoWRP170x150.png"></img>
                        </div>
                      </a>
                </div>
                
                <div class="grid col-lg-3">
                    <img src="img/LogoWRP170x150.png"></img>
                    <div class="info">
                        <p>Описание:</p>
                    </div>
                </div>
                <div class="grid col-lg-3">
                    <img src="img/LogoWRP170x150.png"></img>
                    <div class="info">
                        <p>Описание:</p>
                    </div>
                </div>
            </div>
            
        </div>
        
    </div>
    
</body>
</html>

css

body
{
    padding: 0%;
    margin: 0;
}
.header
{
    background: wheat;
    height: 150px;
}
.main
{
    background: yellowgreen;
    height: 500px;
}
.grid
{
    
    background: yellow;
    height: 170px;
    width: 200px;
    margin-top: 10%;
    margin-left: 2%;
    margin-right: 2%;
}
.info
{
    background: blue;
    
}
#mainimg
{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#okno 
{
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 1px solid whitesmoke;
border-radius: 200px;
color: #0000cc;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#mainimg:target {display: block;}

Принцип работы: https://ibb.co/JFj0mRz https://ibb.co/bP40j7j

p.s Сорямба за кислотность, мне так удобнее блоки верстать.

Answer 2

Вдруг кому-то пригодится подобное решение. Готовая галерея FancyBox имеет кучу настроек, своего рода Swiper в мире галерей :D Ссылка: Перейти на сайт FancyBox

READ ALSO
Как оптимизировать код JS

Как оптимизировать код JS

сделал простой калькулятор, который складывает, вычитает, умножает и делитНо как этот код уменьшить? На сколько я понимаю это делается с помощью...

185
JS задача с циклом

JS задача с циклом

Нужно написать цикл, который перебирает числа от 4 до 37 и выполняет следующие действия:

208
Склонение слов по русским падежам

Склонение слов по русским падежам

Подскажите, почему неверно склоняются слова

202
Как подключить SwiperJS по npm на NuxtJS?

Как подключить SwiperJS по npm на NuxtJS?

Как подключить SwiperJS по npm на NuxtJS?

237