October 18, 2023

Как подключить фотогалерею к сайту

Для подключения фотогалереи, будем использовать библеотеку Fotorama.

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

Подключается быстро и легко.

Шаг 1: Подключаем jQuery

В HTML документе в теге <head> вставляем строчку:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Шаг 2: Подключаем плагин Fotorama

Так же в теге <head> вставляем этот код:

<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

Шаг 3: Создаём галерею на странице

Теперь в <body> создаём галерею и добавляем туда ваши изображения

<div class="fotorama">
  <img src="image.jpg">
  <img src="image.jpg">
  <img src="image.jpg">
  <img src="image.jpg">
</div>

Шаг 4: Стилизация

Далее вы сами должны стилизовать галерею под ваши требования(размер, расположение и тд.)

Вот вам пример стилизации:

.fotorama{ 
width: 75%; 
min-height: 500px;
}

Всё готово, пользуйтесь =)