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

🤔 Что дела­ем: под­клю­ча­ем к сай­ту адап­тив­ную гале­рею изоб­ра­же­ний, кото­рую мож­но настро­ить под свои зада­чи.

🕔 Вре­мя: 6 минут.

Пона­до­бит­ся: jQuery.

👉 Корот­ко суть. Есть биб­лио­те­ка Fotorama, кото­рая одним про­стым дви­же­ни­ем пре­вра­ща­ет гру­ду фото­гра­фий в акку­рат­ный фото­аль­бом с листа­ни­ем. Это полез­но, если вам нуж­но пока­зать на стра­ни­це очень мно­го фото­гра­фий. Под­клю­ча­ет­ся лег­ко, рабо­та­ет быст­ро, есть не про­сит. Сей­час мы её под­клю­чим.

Fotorama — не самая новая биб­лио­те­ка, но зато очень про­стая и хоро­шо рабо­та­ет как в ста­рых, так и новых бра­у­зе­рах. Сно­бы ска­жут, что есть мно­го более све­жих биб­лио­тек, но мы и не про­тив. Посте­пен­но добе­рем­ся и до них.

1. Подключаем jQuery

Фото­ра­ма рабо­та­ет через jQuery, поэто­му в раз­де­ле стра­ни­цы <head> добав­ля­ем строч­ку:

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

Этот код нуж­но вста­вить внутрь вашей HTML-страницы где-то меж­ду тега­ми <head> и </head>. Где имен­но — неприн­ци­пи­аль­но, пото­му что скрипт в любом слу­чае загру­зит­ся рань­ше, чем осталь­ная стра­ни­ца.

2. Подключаем плагин галереи

В том же раз­де­ле <head> добав­ля­ем такой код:

<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

Пер­вая стро­ка отве­ча­ет за внеш­ний вид гале­реи, а вто­рая — за её рабо­ту.

⚠️ Этот код луч­ше вста­вить после того, как вы под­клю­чи­ли jQuery. 

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

Добавь­те в нуж­но место внут­ри раз­де­ла <body> блок с сами­ми кар­тин­ка­ми:

<div class="fotorama">
  <img src="1.jpeg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
</div>

Вме­сто 1.jpg и осталь­ных про­пи­ши­те пра­виль­ные пути к сво­им изоб­ра­же­ни­ям для гале­реи, напри­мер, так:

<div class="fotorama">
  <img src="https://thecode.media/wp-content/uploads/2020/08/photo_2020-08-26-15.27.21-1080x718.jpeg">
  <img src="https://thecode.media/wp-content/uploads/2020/08/photo_2020-08-25-16.31.58-1080x718.jpeg">
  <img src="https://thecode.media/wp-content/uploads/2020/08/photo_2020-08-24-15.10.42-1080x718.jpeg">
  <img src="https://thecode.media/wp-content/uploads/2020/08/photo_2020-08-17-12.17.13-1080x718.jpeg">
</div>

✅ Гото­во! Теперь на вашей стра­ни­це рабо­та­ет Фото­ра­ма. См. стра­ни­цу с гото­вым кодом.

Бонус. Настраиваем галерею

Все настрой­ки дела­ют­ся внут­ри откры­ва­ю­ще­го тега <div>. Вот при­мер настрой­ки Фото­ра­мы, кото­рая зай­мет 75% шири­ны роди­тель­ско­го бло­ка, будет иметь мини­маль­ную высо­ту в 500 пик­се­лей и при необ­хо­ди­мо­сти будет рас­па­хи­вать­ся на весь мони­тор. Так­же она будет вос­про­из­во­дить­ся авто­ма­ти­че­ски.

<div class="fotorama"
 data-width="75%"
 data-minheight="500"
 data-allowfullscreen="native"
data-autoplay="true"
>
  <img src="1.jpeg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
</div>

Еще мож­но почи­тать доку­мен­та­цию и уви­деть все воз­мож­ные пара­мет­ры

Текст:
Миша Поля­нин

Редак­ту­ра:
Мак­сим Илья­хов

Кор­рек­ту­ра:
Ира Михе­е­ва

Вёрст­ка:
Маша Дро­но­ва

Иллю­стра­ция:
Даня Бер­ков­ский

Соц­се­ти:
Олег Веш­кур­цев