Доброго времени суток. Сегодня хотел поделиться тем, как сделать на своем сайте красивую и шуструю фото галерею. Поговорим сегодня о «Фотораме». Простая и легкая галерея. Ее важным плюсом является то, что ее можно «прикрутить» на абсолютно любой хостинг и на любую платформу CMS.

Итак, жмем «читать далее» и смотрим, как ее настроить.

Для того, чтобы подключить этот скрипт нам нужно:

файл jquery

fotorama.css

fotorama.js

html файл =)

также необходимо поставить картинки в блок (div) и задействовать саму Фотораму такой простой конструкцией $(%block-selector%).fotorama()

Смотрим, как это выглядит и что из этого получается:

<span style="color: #339966;"><strong>&lt;script src="jquery-1.7.min.js" type="text/javascript"&gt;&lt;/script&gt;</strong></span> <span style="color: #339966;"> <strong>&lt;link href="fotorama.css" type="text/css" rel="stylesheet"&gt;</strong></span> <span style="color: #339966;"> <strong>&lt;script src="fotorama.js" type="text/javascript"&gt;&lt;/script&gt;</strong></span> <span style="color: #339966;"> <strong>&lt;div id="fotorama"&gt; &lt;img src="1.jpg"&gt; &lt;img src="2.jpg"&gt; &lt;img src="3.jpg"&gt; &lt;/div&gt;</strong></span> <span style="color: #339966;"> <strong>&lt;script type="text/javascript"&gt;</strong></span> <span style="color: #339966;"> <strong> $(function() { $('#fotorama').fotorama(); }</strong></span> <span style="color: #339966;"> <strong>); </strong></span> <span style="color: #339966;"> <strong>&lt;/script&gt;</strong></span> <strong><span style="color: #000000;">Вот так просто подключается данная галерея.</span></strong>

Чтобы отключить ленту превью нужно следующее (прямо на этапе ициализации)

$('#fotorama').fotorama({thumbsPreview: false});

Вот так будет выглядеть эта галерея у Вас на сайте или в блоге:

Также можете о ней почитать на сайте https://fotoramajs.com/
Приятного использования.