Подписи ALT изображения, показывающие «неопределенные» на модальном изображенииJavascript

Форум по Javascript
Ответить
Anonymous
 Подписи ALT изображения, показывающие «неопределенные» на модальном изображении

Сообщение Anonymous »

У меня есть арт -галереи Mutiple на моем веб -сайте, содержащие множество изображений, я использую событие Onclick , чтобы поднять полную Res, непревзойденную версию изображения, и оно работает отлично. Тем не менее, я хочу, чтобы уникальная подпись всплыла с каждым изображением, используя Alt в качестве заголовка изображения; У меня появилась подпись, но она показывает «неопределенным». Кажется, не может понять это вообще.

Код: Выделить всё

function showFullRes(imageSrc) {
const overlay = document.getElementById("full-res-overlay");
const fullResImage = document.getElementById("full-res-image");
const captionText = document.getElementById("caption");

fullResImage.src = imageSrc;
overlay.style.display = "block";
captionText.innerHTML = this.alt;
}

function closeFullRes() {
const overlay = document.getElementById("full-res-overlay");
overlay.style.display = "none";
}< /code>
.full-res-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 10;
text-align: center;
}

.full-res-image {
max-width: 80%;
max-height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.caption {
font-family: 'MATRIX';
font-size: 2vw;
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
padding: 10px 0;
height: 150px;
}

.artwork {
cursor: pointer;
width: 18vw;
height: 25vw;
max-width: 100%;
position: relative;
}

.artwork:hover {
opacity: 0.8;
transform: scale(95%);
transition: opacity 0.3s ease;
transition: transform 0.3s ease;
}

.artwork img {
width: 100%;
height: 100%;
object-fit: cover;
}

.artwork-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

.gallery-container {
width: 89%;
max-width: 89%;
padding: 20px;
background-color: transparent;
border-radius: 10px;
text-align: center;
}< /code>




[img]https://sinniister.neocities.org/ARTWORK/VASCHA/REDVOH2TN.jpeg[/img]
             />

[img]https://sinniister.neocities.org/ARTWORK/VASCHA/VOH21S.JPG[/img]
             />









Подробнее здесь: https://stackoverflow.com/questions/794 ... odal-image
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»