Бесплатная библиотека Fotorama для создания красивых галерей и слайдеров на сайте

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

Пример использования Fotorama в HTML-коде:

html





  
  
  
  
  

В данном примере мы подключаем библиотеку Fotorama и создаем блок с классом "fotorama", в котором перечисляем изображения для галереи. В атрибутах data-* мы указываем настройки для галереи, такие как тип навигации (thumbs), возможность развернуть на весь экран (data-allowfullscreen) и т.д.

Теперь рассмотрим пример написания кода на JavaScript с использованием Fotorama:

javascript
// Инициализация галереи Fotorama
$('.fotorama').fotorama({
  width: '100%',
  height: '400px',
  nav: 'thumbs',
  allowfullscreen: true,
  captions: true
});

В данном примере мы инициализируем галерею Fotorama с помощью метода fotorama() на объекте jQuery. В параметрах мы указываем настройки для галереи, такие как ширина, высота, тип навигации (thumbs), возможность развернуть на весь экран (allowfullscreen) и т.д. Также мы включаем отображение подписей к изображениям (captions).

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