Мне необходимо понять как делать открытие по нажатию на картинку, я не гуру в js и не особо понимаю как сделать это... Кому не сложно могли бы мне объяснить, либо дать материал который мне поможет понять как это делать.
Какие параметры у меня в задаче:
Необходимо что бы при нажатие плавно разворачивался popup с картинкой.
Вёрстка адаптивная, без полосы прокрутки при изменении ширины окна.
Максимальная ширина открытой картинки — 75vw, максимальная высота — 75vh. Файловая структура организована по БЭМу
Всем спасибо кто поможет!.
// Денамические карточки.
const initialCards = [
{
name: 'Архыз',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg'
},
{
name: 'Челябинская область',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg'
},
{
name: 'Иваново',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/ivanovo.jpg'
},
{
name: 'Камчатка',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg'
},
{
name: 'Холмогорский район',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kholmogorsky-rayon.jpg'
},
{
name: 'Байкал',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/baikal.jpg'
}
];
// Подключенные переменные.
let buttonEditPopup = document.querySelector('.profile__edit-button');
let buttonEditPopupClose = document.querySelector('.popup__close');
let editPopup = document.querySelector('.popup');
let formElement = document.querySelector('.popup__form');
let buttonAddPopup = document.querySelector('.profile__add-button');
let buttonAddPopupClose = document.querySelector('.popup-add__close');
let addPopup = document.querySelector('.popup-add');
let formAddCardsElement = document.querySelector('.popup__form-card');
let inputUserName = document.querySelector('.popup__text_user_name');
let inputUserSpecialty = document.querySelector('.popup__text_user_specialty');
let profileName = document.querySelector('.profile__name');
let profileSpecialty = document.querySelector('.profile__specialty');
const initialCardsList = document.querySelector('.cards');
const templateElements = document.querySelector('.template');
const cardsElements = document.querySelector('.cards__card');
const inputLinkElements = document.querySelector('.popup__text-link');
const inputTitleElements = document.querySelector('.popup__text-title');
let imgPopup = document.querySelector('.popup-image');
let fullSizeImage = document.querySelector('.popup__title-image');
let fullSizeImageLink = document.querySelector('.popup__image-link');
// Модальное окно 'редактирование профиля'
function openedPopup(modal) {
modal.classList.add('popup_opened');
}
function closePopup(modal) {
modal.classList.remove('popup_opened');
}
function formAddSubmitHandler(evt) {
evt.preventDefault();
const inputTextLink = inputLinkElements.value;
const inputTextTitle = inputTitleElements.value;
let data = {
name: inputTextTitle,
link: inputTextLink
};
const newItem = composeItem(data);
initialCardsList.prepend(newItem);
formAddCardsElement.reset();
closePopup(addPopup);
}
// Функция гинераций карточек
function renderList() {
const listItemCard = initialCards.map(composeItem);
initialCardsList.append(...listItemCard);
}
function composeItem(item) {
const newItem = templateElements.content.cloneNode(true);
const headerElemets = newItem.querySelector('.cards__title');
const linkElemets = newItem.querySelector('.cards__image');
headerElemets.textContent = item.name;
linkElemets.setAttribute('src', item.link);
newItem.querySelector('.cards__rectangle-like').addEventListener('click', function (evt) {
evt.target.classList.toggle('cards__rectangle-like_active');
});
const removeButton = newItem.querySelector('.cards__rectangle-remove');
removeButton.addEventListener('click', removeItem);
return newItem;
}
function removeItem(event) {
const targetElement = event.target;
const targetItem = targetElement.closest('.cards__card');
targetItem.remove();
}
renderList();
<!DOCTYPE html>
<html lang="ru">
<!-- Вверх сайта -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./pages/index.css" />
<title>Mesto</title>
</head>
<!-- Модальное окно -->
<div class="popup">
<div class="popup__container">
<button class="popup__close" type="reset"></button>
<h2 class="popup__title">Редактировать профиль</h2>
<form class="popup__form" action="form-user" name="form-user">
<input class="popup__text popup__text_user_name" type="text" id="name" name="name" required
minlength="4" maxlength="28" />
<input class="popup__text popup__text_user_specialty" type="text" id="specialty" name="specialty"
required minlength="4" maxlength="28" />
<button class="popup__save" type="submit">Сохранить</button>
</form>
</div>
</div>
<div class="popup popup-add">
<div class="popup__container">
<button class="popup__close popup-add__close" type="reset"></button>
<h2 class="popup__title">Новое место</h2>
<form class="popup__form-card" action="form-card" name="form-card">
<input class="popup__text popup__text-title" type="text" id="title" name="title" placeholder="Название публикаций" />
<input class="popup__text popup__text-link" type="text" id="link" name="link" required
placeholder="Ссылка на картинку" />
<button class="popup__save popup-add__save" type="submit">Создать</button>
</form>
</div>
</div>
<div class="popup popup-image">
<div class="popup__container">
<button class="popup__close" type="reset"></button>
<img class="popup__image popup__image-link" src="${item.link}" alt="">
<p class="popup__title popup__title-image">${item.name}</p>
</div>
</div>
<!-- Template -->
<template class="template">
<div class="cards__card">
<button class="cards__rectangle-remove" type="button"></button>
<img class="cards__image" src="" alt="" />
<div class="cards__discription">
<h2 class="cards__title"></h2>
<button class="cards__rectangle-like" type="button"></button>
</div>
</div>
</template>
<!-- Подключение js и других скриптов -->
<script src="./scripts/script.js"></script>
</body>
</html>