<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./pages/index.css">
<title>Место</title>
</head>
<body class="page">
<div class="wrapper">
<header class="header">
<img class="header__logo" src="./images/vector/header__logo.svg" alt="Лого">
</header>
<section class="profile">
<img class="profile__avatar" src="./images/jpg/kysto.jpg" alt="Кусто">
<article class="profile__info">
<div class="profile__heading">
<h1 class="profile__name">Жак-Ив Кусто</h1>
<button type="button" class="profile__edit-button"></button>
</div>
<p class="profile__subtitle">Исследователь океана</p>
</article>
<button type="button" class="profile__add-button"></button>
</section>
<section class="elements">
</section>
<footer class="footer">
<h2 class="footer__copyright">© 2020 Mesto Russia</h2>
</footer>
</div>
<div class="popup animation-open">
<div class="menu">
<button class="menu__close-icon" type="button"></button>
<h2 class="menu__title">Редактировать профиль</h2>
<form class="form" name="formMenu">
<input type="text" name="menuName" value="Жак-Ив Кусто" class="form__input form__input_type_name">
<input type="text" name="menuSubtitle" value="Исследователь океана"
class="form__input form__input_type_job">
<button type="submit" class="menu__button">
Сохранить
</button>
</form>
</div>
</div>
<div class="popup-cards animation-open">
<div class="menu-cards menu">
<button class="menu__close-icon menu__card-close" type="button"></button>
<h2 class="menu__title menu__title-cards">Новое место</h2>
<form class="form-cards" name="formCards">
<input type="text" name="" placeholder="Название" class="form-cards__input form-cards__input_type_text">
<input type="link" name="" placeholder="Ссылка на картинку"
class="form-cards__input form__input_type_link">
<input type="button" class="menu__button menu-cards__buttonCreate" value="Создать">
</input>
</form>
</div>
</div>
<template class = "card-template">
<div class="card">
<button class="card__button-delete" type="button"></button>
<img src="" alt="" class="card__image">
<div class="card__description">
<h2 class="card__title"></h2>
<button class="card__button-like" type="button"></button>
</div>
</div>
</template>
<div class="popup-image animation-open">
<img class= "open-image" src="" alt="">
</div>
<script src="./scripts/script.js"></script>
</body>
</html>
.popup-image{
display: none;
width: 75vw;
height: 75vh;
position: fixed;
z-index: 3;
top: 10%;
left: 50%;
transform: translateX(-50%);
}
.popup-image_active{
display: block;
}
const page = document.querySelector('.page');
const wrapper = page.querySelector('.wrapper');
const editButton = wrapper.querySelector('.profile__edit-button');
const menu = document.querySelector('.menu');
const saveButton = menu.querySelector('.menu__button');
const closeButton = menu.querySelector('.menu__close-icon');
const popup = page.querySelector('.popup');
const textName = document.querySelector('.form__input_type_name');
const textSubtitle = document.querySelector('.form__input_type_job');
const profileNameText = document.querySelector('.profile__name');
const profileSubtitleText = document.querySelector('.profile__subtitle');
const formElement = popup.querySelector('.form');
const popupCards = document.querySelector('.popup-cards');
const addButton = document.querySelector(".profile__add-button");
const closeCardsButton = document.querySelector('.menu__card-close');
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'
}
];
const container = document.querySelector('.elements')
const cardTemplate = document.querySelector('.card-template').content
const formButton = document.querySelector('.card_create')
// const popupImageTemplate = document.querySelector ('.popup-image-template').content
initialCards.forEach(function (value) { renderItem(value.name, value.link) });
// функция рендеренга
function renderItem(text, link) {
const newCard = cardTemplate.cloneNode(true) //Клоним кароточку
const cardTitle = newCard.querySelector('.card__title')
const cardImage = newCard.querySelector('.card__image')
cardImage.src = link
cardImage.alt = text
cardTitle.textContent = text;
//Добавить обработччик
setListenersForButtons(newCard);
//Добаить карточку
container.prepend(newCard);
}
// Создать обработчики для кнопок
function setListenersForButtons(element) {
const deleteCardButton = element.querySelector('.card__button-delete')
deleteCardButton.addEventListener('click', handleDelete)
const cardLikeButton = element.querySelector('.card__button-like')
cardLikeButton.addEventListener('click', handleLike)
const cardAddButton = popupCards.querySelector('.menu-cards__buttonCreate')
cardAddButton.addEventListener('click', handleSubmit)
const cardScreen = element.querySelector('.card__image')
cardScreen.addEventListener('click', imagePopup)
}
//Добавление модального изображения
function imagePopup(event) {
const currentImage = event.target.closest('.card__image')
const imageSrc = currentImage.src
}
//Удаление карточки
function handleDelete(event) {
const currentCard = event.target.closest('.card')
currentCard.remove()
}
// кнопка лайка
function handleLike(event) {
const currentLike = event.target.closest('.card__button-like')
currentLike.classList.toggle('card__button-like_active')
}
//Добавление карточки
function handleSubmit() {
const mesto = document.querySelector('.form-cards__input_type_text')
const mestoLink = document.querySelector('.form__input_type_link')
renderItem(mesto.value, mestoLink.value)
closeEditCardsPopup()
}
function openEditProfilePopup() {
popup.classList.add('popup_active');
textName.value = profileNameText.textContent;
textSubtitle.value = profileSubtitleText.textContent;
}
function openEditCardsPopup() {
popupCards.classList.add('popup-cards_active');
}
function closeEditProfilePopup() {
popup.classList.remove('popup_active');
}
function closeEditCardsPopup() {
popupCards.classList.remove('popup-cards_active');
}
function formSubmitHandler(evt) {
evt.preventDefault();
profileNameText.textContent = textName.value;
profileSubtitleText.textContent = textSubtitle.value;
closeEditProfilePopup();
}
closeCardsButton.addEventListener('click', closeEditCardsPopup)
closeButton.addEventListener('click', closeEditProfilePopup);
editButton.addEventListener('click', openEditProfilePopup);
formElement.addEventListener('submit', formSubmitHandler);
addButton.addEventListener('click', openEditCardsPopup);
Всем здравствуйте. Хочу создать при клике на карточку модальное окно(увеличенная версия изображения, открывающаяся поверх других окон), то есть src карточки берет из выбранного изображения и вставляет в popup-image. Получилось написать функцию, которая создает переменную и получает ссылку при клике на на выбранную карточку. Теперь не знаю, как написать функцию, которая примет на себя это значение и подставит его в open-image. Всем спасибо!
