Для инициализации галереи изображений с использованием библиотеки blueimp.Gallery, вы должны сначала подключить необходимые скрипты и стили в вашем HTML-документе. Библиотека Blueimp Gallery обычно требует подключения JavaScript и CSS файлов. Путь к этим файлам может изменяться в зависимости от структуры вашего проекта или того, как вы подключаете библиотеки (например, через CDN или локально).
Ниже приведена примерная структура кода для инициализации галереи с изображениями, сделанными в период с 1985 по 1990 год, с использованием blueimp.Gallery.
### Пример HTML-кода
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Галерея изображений</title>
<!-- Подключение стилей библиотеки -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/css/blueimp-gallery.min.css">
<style>
/* Дополнительные стили для галереи */
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
width: 150px; /* Установка ширины изображений */
cursor: pointer;
}
</style>
</head>
<body>
<div id="links" class="gallery">
<a href="images/1985-1.jpg" title="Фото 1 (1985)" data-gallery>
<img src="images/1985-1_thumb.jpg" alt="Фото 1 (1985)">
</a>
<a href="images/1986-1.jpg" title="Фото 2 (1986)" data-gallery>
<img src="images/1986-1_thumb.jpg" alt="Фото 2 (1986)">
</a>
<a href="images/1987-1.jpg" title="Фото 3 (1987)" data-gallery>
<img src="images/1987-1_thumb.jpg" alt="Фото 3 (1987)">
</a>
<a href="images/1989-1.jpg" title="Фото 4 (1989)" data-gallery>
<img src="images/1989-1_thumb.jpg" alt="Фото 4 (1989)">
</a>
<a href="images/1990-1.jpg" title="Фото 5 (1990)" data-gallery>
<img src="images/1990-1_thumb.jpg" alt="Фото 5 (1990)">
</a>
</div>
<!-- Подключение библиотек jQuery и blueimp Gallery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.33.0/js/jquery.blueimp-gallery.min.js"></script>
<script>
$(document).ready(function () {
// Инициализация галереи
$('#links').blueimpGallery({
indicatorContainerClass: 'blueimp-gallery-indicator-container', // Настройки по желанию
// Другие параметры можно добавить здесь
});
});
</script>
</body>
</html>
```
### Объяснение кода:
1. **Подключение библиотек**: В `head` подключаются стили и скрипты библиотеки blueimp.Gallery через CDN.
2. **HTML-разметка**: Внутри `div` с id `links` размещены элементы ссылок, которые содержат изображения. Каждое изображение имеет атрибут `data-gallery`, который сигнализирует библиотеке о том, что оно должно быть частью галереи.
3. **Инициализация галереи**: В конце скрипта используется jQuery для инициализации галереи при загрузке документа.
Обязательно замените пути к изображениям на свои реальные пути к файлам изображения. Вы также можете настроить дополнительные параметры галереи, если потребуется, которые заданы в документации blueimp.Gallery.