Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги: ,

Категории

Рубрики

Настройка и сопровождение рекламного кабинета во Вконтакте.

от 14000 

Подходит для небольших стартапов и тех, кто еще не рекламировал свой бизнес в интернете. Разработка сайта (до 5 страниц) + Яндекс Директ / ВК реклама.

от 69000 

Данный набор подходит всем, кто хочет уверенно продавать товары и услуги в интернете. Стоимость набора варьируется в зависимости от конкуренции рынка. Разработка сайта компании/каталог/магазин + Яндекс Директ / ВК реклама + СЕО продвижение.

от 119000 

Как сделать галерею в html и css

Создание галереи на HTML и CSS можно разбить на несколько шагов:

  1. Начните с HTML-разметки, где вам нужно создать контейнер для галереи, заголовок и элементы фотографии. Например:
<div class="gallery-container">
  <h2>Галерея</h2>
  <div class="gallery-images">
    <img src="img1.jpg" alt="Image 1">
    <img src="img2.jpg" alt="Image 2">
    <img src="img3.jpg" alt="Image 3">
    <img src="img4.jpg" alt="Image 4">
  </div>
</div>
  1. Добавьте стили CSS для вашей галереи, определите размер контейнера и стили фотографий. Например:
.gallery-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.gallery-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.gallery-images img {
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.gallery-images img:hover {
  transform: scale(1.1);
}
  1. Добавьте логику JavaScript для масштабирования изображений. Например:
const images = document.querySelectorAll('.gallery-images img');
const modal = document.createElement('div');
modal.classList.add('modal');

let currentImage;

images.forEach((image, index) => {
  image.addEventListener('click', () => {
    currentImage = index + 1;
    modal.innerHTML = `
      <div class="modal-background"></div>
      <div class="modal-image">
        <img src="${image.src}" alt="${image.alt}">
        <button class="modal-close">&times;</button>
        <div class="modal-counter">${currentImage}/${images.length}</div>
      </div>
    `;

    document.body.appendChild(modal);

    modal.querySelector('.modal-background').addEventListener('click', closeModal);
    modal.querySelector('.modal-close').addEventListener('click', closeModal);
  });
});

function closeModal() {
  modal.style.display = 'none';
}

window.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    closeModal();
  }
});

Основой этого кода является функция для масштабирования фотографий, которая добавляет в DOM элемент модального окна (элемент div с классом ‘modal’) и устанавливает значения для его содержимого. Обратите внимание на использование клавиши Esc для закрытия модального окна.

  1. Добавьте стили CSS для модального окна. Например:
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.modal-image {
  position: relative;
  z-index: 2;
}

.modal-image img {
  max-width: 100%;
  max-height: 100vh;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

.modal-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
}
  1. Настройте адаптивность своей галереи с помощью медиа-запросов в CSS, чтобы обеспечить ее оптимальное отображение на разных устройствах.

В результате, вам следует отобразится галерея, где фотографии масштабируются при клике на них, и появится модальное окно с выбранной фотографией. Если у вас есть другие требования и пожелания по дизайну и функциональности галереи, то вы можете варьировать ее настройку в соответствии с собственными потребностями.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.