Pikachoose - очень легкий плагин Jquery, с помощью которого можно очень легко создать галерею фотографий с разными опциями. Pikachoose разработан таким образом, чтобы все операции были предельно просты и понятны любому.

jQuery и CSS

<link type="text/css" href="bottom.css" rel="stylesheet" />
  
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/pikachoose-min.js"></script>
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();
});
-->
</script>

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

HTML

<ul id="pikame">
<li><img src="1.jpg"/><span><a href="http://www.pikachoose.com">Now you can have links!</a></span></li>
<li><img src="2.jpg"/><span>Or any html you want inside of captions!</span></li>
<li><img src="3.jpg"/><span> Donec in ante. Donec pretium. </span></li>

<li><img src="4.jpg"/><span> Integer id dolor a erat sagittis volutpat. </span></li>
<li><img src="5.jpg"/><span> Aliquam erat volutpat. </span></li>
<li><img src="6.jpg"/><span> In ornare, neque ut malesuada hendrerit.</span></li>
<li><img src="7.jpg"/><span> Aliquam condimentum dolor sed elit. </span></li>
<li><img src="8.jpg"/><span> Ut non magna at purus cursus facilisis. </span></li>

<li><img src="9.jpg"/><span> Nunc semper dapibus erat. Nulla hendrerit.</span></li>
<li><img src="10.jpg"/><span> Aliquam condimentum dolor sed elit.</span></li>
<li><img src="11.jpg"/><span> Ut non magna at purus cursus facilisis.</span></li>
<li><img src="12.jpg"/><span> Nunc semper dapibus erat. Nulla hendrerit.</span></li>
<li><img src="13.jpg"/><span> Nunc semper dapibus erat. Nulla hendrerit.</span></li>
</ul>

Как Вы видите, структура галереи очень проста. Используется неупорядоченный список с id="pikame". В каждом элементе списка прописывается путь к изображению, а также текст описание. Данный текст может быть отформатирован по правилам HTML, в том числе может быть ссылкой.

Вот и все готово! Простая галерея готова за несколько минут.

Спасибо за внимание!

Добавлено: 24 Апреля 2018 19:03:12 Добавил: Андрей Ковальчук Нравится 0

Добавить