Как исправить мою модальную галерею и как улучшить последующие изображения
Я все еще изучаю JS и хотел сделать небольшую модальную галерею, внутри которой была бы собственная галерея для брошюры для свадебного салона. Ниже ссылка на мой Codepen:
Мне удалось открыть модальную галерею, но вторая галерея запуталась и не работала нормально. Я еще не эксперт по JavaScript, но мне удалось это сделать.
Я хочу, чтобы второй не был повсюду. Я пытался закодировать его раньше, но моих навыков все еще не хватает.
window.addEventListener("click", init, false);
// Get modal element
const modal = document.getElementById("myModal");
const modal1 = document.getElementById("myModal1");
// Get the button that opens the modal
const mdl = document.getElementById("openModal");
const mdl1 = document.getElementById("openModal1");
// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];
// When the user clicks the image, open the modal
mdl.onclick = function () {
modal.style.display = "block";
};
mdl1.onclick = function () {
modal1.style.display = "block";
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target === modal) {
modal.style.display = "none";
}
if (event.target === modal1) {
modal1.style.display = "none";
}
};
///////////////
function init(e) {
if (!e.target.closest(".item")) return;
let hero = document.querySelector('div[data-pos = "0"]');
let target = e.target.parentElement;
[target.dataset.pos, hero.dataset.pos] = [
hero.dataset.pos,
target.dataset.pos,
];
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
height: 100svh;
display: grid;
place-items: center;
}
.gallery {
position: relative;
width: 990px;
height: 605px;
&:hover :not(div[data-pos = "0"], img) {
cursor: pointer;
}
& .item {
position: absolute;
width: 175px;
height: 150px;
overflow: hidden;
transition: transform 0.9s, width 0.9s, height 0.9s;
& img {
width: 100%;
height: 100%;
}
}
& div[data-pos = "0"] {
width: 600px;
height: inherit;
z-index: 10;
}
}
div[data-pos = "0"] {
transform: translate(0, 0);
}
div[data-pos = "1"] {
transform: translate(620px, 0);
}
div[data-pos = "2"] {
transform: translate(815px, 0);
}
div[data-pos = "3"] {
transform: translate(620px, 170px);
}
div[data-pos = "4"] {
transform: translate(815px, 170px);
}
@media (max-width: 800px) {
.gallery {
width: 405px;
height: 660px;
& .item {
width: 200px;
height: 150px;
}
& div[data-pos = "0"] {
width: inherit;
height: 350px;
// z-index: 1;
}
}
div[data-pos = "0"] {
transform: translate(0, 0);
}
div[data-pos = "1"] {
transform: translate(0, 355px);
}
div[data-pos = "2"] {
transform: translate(0, 510px);
}
div[data-pos = "3"] {
transform: translate(205px, 355px);
}
div[data-pos = "4"] {
transform: translate(205px, 510px);
}
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.modal1 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: fit-content; /* Could be more or less, depending on screen size */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.gallery img {
width: 100%; /* Adjust as needed */
margin-bottom: 20px;
width: 100px; /* Thumbnail size */
// margin: 10px;
transition: transform 0.2s; /* Animation */
}
//////////////<div class = "wrapper">
<img
id = "openModal"
src = "https://images.unsplash.com/photo-1578054330576-3f6646e38b1b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt = "Open Modal"
style = "width: 100%; max-width: 300px"
/>
<!-- Modal Structure -->
<div id = "myModal" class = "modal">
<div class = "modal-content">
<span class = "close">×</span>
<div class = "gallery">
<!-- Gallery Images Here -->
<main class = "gallery">
<div class = "item" data-pos = "0">
<img
src = "https://plus.unsplash.com/premium_photo-1661456395657-049a92e01522?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "1">
<img
src = "https://images.unsplash.com/photo-1580151134699-e0cfbeb763d3?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "2">
<img
src = "https://images.unsplash.com/photo-1549488497-94b52bddac5d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "3">
<img
src = "https://images.unsplash.com/photo-1523264114838-feca761983c4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "4">
<img
src = "https://images.unsplash.com/photo-1542764824-4cdbd6c92dbe?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
</main>
<!-- Add other images similarly -->
</div>
</div>
</div>
<!-- Trigger Button 2nd -->
<img
id = "openModal1"
src = "https://plus.unsplash.com/premium_photo-1661340932540-c285e730728a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt = "Open Modal"
style = "width: 100%; max-width: 300px"
/>
<!-- Modal Structure -->
<div id = "myModal1" class = "modal modal1">
<div class = "modal-content">
<span class = "close">×</span>
<div class = "gallery">
<!-- Gallery Images Here -->
<main class = "gallery">
<div class = "item" data-pos = "0">
<img
src = "https://images.unsplash.com/photo-1525258946800-98cfd641d0de?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "1">
<img
src = "https://images.unsplash.com/photo-1628046276142-a614ec8c5504?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "2">
<img
src = "https://plus.unsplash.com/premium_photo-1664530452440-e0cbce3869c0?q=80&w=1972&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "3">
<img
src = "https://images.unsplash.com/photo-1593575620619-602b4ddf6e96?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "4">
<img
src = "https://images.unsplash.com/photo-1615164631286-c9a3fd24e3ad?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
</main>
</div>
</div>
</div>
</div>@MisterJojo не работает или, по крайней мере, не решает проблему. Похоже, проблема связана со второй галереей, она не возвращается к исходному значению data-pos-# и остается на data-pos-0 при выборе.
—
07.07.2024 16:07
ОК, да. А пока я вижу следующее: «Вторая галерея запуталась и не будет играть хорошо». Не могли бы вы отредактировать, чтобы объяснить, что это значит? «Плохо» и «не очень хорошо играют» — это не совсем точные отчеты об ошибках.
—
07.07.2024 20:50
@MisterJojo, ты даже не представляешь, как я благодарен! Я обязательно тщательно изучу это, прежде чем реализовывать это самостоятельно. Еще раз большое спасибо, может показаться, что это не так уж и много, но я благодарен за вашу помощь.
—
08.07.2024 05:08
@halfer Прошу прощения, если мой способ передачи данных еще не на должном уровне. Я обязательно улучшусь, поэтому, если вы снова увидите мои вопросы, вы не подумаете: «Что, черт возьми, говорит этот парень?» Большое спасибо за то, что помогли мне. Я очень ценю это.
—
08.07.2024 05:09
@ user25737164: нет проблем. Хорошее эмпирическое правило — писать сообщения так, как если бы они были документацией (вопреки распространенному мнению, Stack Overflow — это не чат или форум). Хорошие вопросы (и ответы) хранятся здесь навсегда, поэтому мы хотим, чтобы они были достаточно правильно написаны, имели правильный регистр, были хорошо отформатированы и т. д. Людям, для которых английский является вторым языком, рекомендуется установить программу проверки орфографии или грамматики.
—
08.07.2024 17:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
74
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
вы можете сделать это таким образом (с помощью настоящего <dialog> element en JS .showModal() метода.
const
myModalDialog = document.querySelector('#modal-dial')
;
document.querySelector('div.wrapper').addEventListener('click', ({target})=>
{
if (!target.matches('img[data-modal]')) return
;
myModalDialog.className = target.dataset.modal;
myModalDialog.showModal();
})
myModalDialog.addEventListener('click', ({target}) =>
{
if (target.matches('.close'))
{
myModalDialog.close();
return;
}
if ( !target.matches('img')) return
;
const
small = target.closest('.item')
, pos = small.dataset.pos
, bigg = small.closest('.gallery').querySelector('.item[data-pos = "0"]')
;
if (small===bigg) return
;
small.dataset.pos = '0';
bigg.dataset.pos = pos;
})* {
margin : 0;
padding : 0;
box-sizing : border-box;
}
body {
height : 100svh;
display : grid;
place-items : center;
}
.wrapper img {
width : 300px;
cursor : pointer;
}
dialog {
position : relative;
margin : auto;
border : none;
padding : 20px;
outline : none;
}
dialog::backdrop {
background-color: #7fffd49f;
}
.gallery {
position : relative;
width : 990px;
height : 605px;
}
.gallery .item:not([data-pos = "0"]) {
cursor: pointer;
}
.gallery .item {
position : absolute;
width : 175px;
height : 150px;
overflow : hidden;
transition : transform 0.9s, width 0.9s, height 0.9s;
}
.gallery .item img {
width : 100%;
height : 100%;
}
.gallery .item[data-pos = "0"] {
width : 600px;
height : inherit;
transform : translate(0, 0);
z-index : 10;
}
.gallery .item[data-pos = "1"] { transform: translate(620px, 0); }
.gallery .item[data-pos = "2"] { transform: translate(815px, 0); }
.gallery .item[data-pos = "3"] { transform: translate(620px, 170px); }
.gallery .item[data-pos = "4"] { transform: translate(815px, 170px); }
@media (max-width: 800px) {
.gallery {
width : 405px;
height : 660px;
}
.gallery .item {
width : 200px;
height : 150px;
}
.gallery .item[data-pos = "0"] {
width : inherit;
height : 350px;
}
.gallery .item[data-pos = "0"] { transform: translate( 0, 0 ); }
.gallery .item[data-pos = "1"] { transform: translate( 0, 355px); }
.gallery .item[data-pos = "2"] { transform: translate( 0, 510px); }
.gallery .item[data-pos = "3"] { transform: translate(205px, 355px); }
.gallery .item[data-pos = "4"] { transform: translate(205px, 510px); }
}
dialog.modal_0 > article:not(.modal_0) ,
dialog.modal_1 > article:not(.modal_1) {
display: none;
}
.close {
color : #aaa;
float : right;
font-size : 28px;
font-weight : bold;
cursor : pointer;
transform : translate(18px, -24px)
}
.close:hover {
color: black;
}<div class = "wrapper">
<img alt = "" data-modal = "modal_0"
src = "https://images.unsplash.com/photo-1578054330576-3f6646e38b1b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
>
<img alt = "" data-modal = "modal_1"
src = "https://plus.unsplash.com/premium_photo-1661340932540-c285e730728a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
>
</div>
<dialog id = "modal-dial" class = "modal_0">
<span class = "close">×</span>
<article class = "gallery modal_0">
<div class = "item" data-pos = "0">
<img
src = "https://plus.unsplash.com/premium_photo-1661456395657-049a92e01522?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "1">
<img
src = "https://images.unsplash.com/photo-1580151134699-e0cfbeb763d3?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "2">
<img
src = "https://images.unsplash.com/photo-1549488497-94b52bddac5d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "3">
<img
src = "https://images.unsplash.com/photo-1523264114838-feca761983c4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "4">
<img
src = "https://images.unsplash.com/photo-1542764824-4cdbd6c92dbe?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
</article>
<article class = "gallery modal_1">
<div class = "item" data-pos = "0">
<img
src = "https://images.unsplash.com/photo-1525258946800-98cfd641d0de?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "1">
<img
src = "https://images.unsplash.com/photo-1628046276142-a614ec8c5504?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "2">
<img
src = "https://plus.unsplash.com/premium_photo-1664530452440-e0cbce3869c0?q=80&w=1972&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "3">
<img
src = "https://images.unsplash.com/photo-1593575620619-602b4ddf6e96?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
<div class = "item" data-pos = "4">
<img
src = "https://images.unsplash.com/photo-1615164631286-c9a3fd24e3ad?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
</article>
</dialog>Другие вопросы по теме
Leetcode — Найдите ученика, который заменит мел
Как мне отсортировать 13 случайных игральных карт по порядку (последовательности) в Java?
Как узнать, содержит ли массив вложенный массив с определенными значениями?
Как получить массив строк в ячейке Excel и использовать его в качестве ссылки
Извлечение значений из массивов в
Доступ к массиву Comptime во время выполнения с помощью цикла for
Как эффективно вычислить среднее геометрическое массива Numpy?
Сгенерируйте адрес чтения и адрес записи для зигзагообразного сканирования матрицы NxN
Как быстро найти минимальный элемент справа для каждого элемента массива Numpy?
От 2D-массивов к матрице 2x2 в C
Похожие вопросы
CodeIgniter и Ajax: динамически зависимый раскрывающийся список не работает
Очистка таблицы с веб-страницы
Asp net core вызывает ошибку Fetch: TypeError
Перенаправление на другую страницу после отправки формы ASP NET
Почему обработка частных полей не работает ожидаемым образом в JavaScript?
Создание пользовательского выбора во время выполнения
Как проверить, отключены ли кнопки формы при нажатии кнопки отправки в Playwright
Разрешить полное вращение модели в Three с React
Я получаю сообщение об ошибке: AxiosError {сообщение: «Запрос не выполнен с кодом состояния 500», имя: «AxiosError», код: «ERR_BAD_RESPONSE»}
Реагировать на обновление значения в сопоставленном объекте из дочернего компонента
Вам следует использовать настоящий элемент HTML
<dialog>и метод JS.showModal()...