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

В этой статье мы рассмотрим, как создать простую галерею изображений с помощью HTML и JavaScript. Вы узнаете, как добавить изображения и заголовки, установить размеры и просмотреть их в виде простой галереи.

Для того, чтобы создать галерею изображений в HTML с помощью JavaScript, нам понадобится такое простое приложение: выбор изображения и просмотр его большого вида. Для начала нам необходимо иметь список изображений, которые мы хотим отображать в галерее. Для этого мы можем использовать тег <img> в своем HTML-документе:

<img src="image1.jpg" id="1">
<img src="image2.jpg" id="2">
<img src="image3.jpg" id="3">
<img src="image4.jpg" id="4">
<img src="image5.jpg" id="5">
<img src="image6.jpg" id="6">

Здесь изображения имеют идентификаторы, чтобы мы могли обратиться к ним позже из JavaScript. Теперь мы можем начать писать код JavaScript, который будет реагировать на наши изображения. Начнем с создания массива объектов, каждый из которых содержит информацию об изображении:

const images = [
  {
    id: 1,
    src: 'image1.jpg',
    title: 'Image 1',
    description: 'This is image 1'
  },
  {
    id: 2,
    src: 'image2.jpg',
    title: 'Image 2',
    description: 'This is image 2'
  },
  {
    id: 3,
    src: 'image3.jpg',
    title: 'Image 3',
    description: 'This is image 3'
  },
  {
    id: 4,
    src: 'image4.jpg',
    title: 'Image 4',
    description: 'This is image 4'
  },
  {
    id: 5,
    src: 'image5.jpg',
    title: 'Image 5',
    description: 'This is image 5'
  },
  {
    id: 6,
    src: 'image6.jpg',
    title: 'Image 6',
    description: 'This is image 6'
  }
];

Теперь мы можем написать функцию, которая будет принимать в качестве аргумента идентификатор изображения и возвращать объект, соответствующий данному идентификатору:

function getImage(id) {
  return images.find(image => image.id === id);
}

Теперь мы можем использовать эту функцию, чтобы получить объект изображения по его идентификатору и вывести его на экран:

const image = getImage(1);
document.getElementById('gallery').innerHTML = `
  <img src="${image.src}">
  <h2>${image.title}</h2>
  <p>${image.description}</p>
`;

Теперь нам нужно создать список изображений, который позволит пользователю выбрать какое-либо изображение для просмотра. Для этого мы можем использовать тег <ul>, чтобы создать список, и тег <li>, чтобы создать пункты списка:

const imageList = document.getElementById('list');

for (let image of images) {
  const listItem = document.createElement('li');
  listItem.innerHTML = `
    <a href="#" id="${image.id}">${image.title}</a>
  `;
  imageList.appendChild(listItem);
}

Теперь нам нужно добавить обработчик события на все эти пункты списка, чтобы при клике на пункт списка отображалось соответствующее изображение:

imageList.addEventListener('click', event => {
  const imageId = event.target.id;
  const image = getImage(imageId);
  
  document.getElementById('gallery').innerHTML = `
    <img src="${image.src}">
    <h2>${image.title}</h2>
    <p>${image.description}</p>
  `;
});

Теперь мы можем запустить наше приложение и просматривать изображения в галерее. Это простое приложение галереи изображений на JavaScript и HTML. Следующим шагом мы можем добавить больше интерактивности, например, больше информации об изображении или поддержку навигации по изображениям с помощью кнопок «Назад» и «Вперед».