Галерея Фоторама


Доброго времени суток. Сегодня хотел поделиться тем, как сделать на своем сайте красивую и шуструю фото галерею. Поговорим сегодня о «Фотораме». Простая и легкая галерея. Ее важным плюсом является то, что ее можно «прикрутить» на абсолютно любой хостинг и на любую платформу 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/
Приятного использования.


← Старые Новые →