Данная фотогалерея интересна тем, что позволяет выводить фотографии общим списком, например в виде миниатюр, при нажатии на которые происходит открытие полноценного слайдера, где все фотографии можно посмотреть подробнее.
Эта галерея работает на основе библиотеки touchTouch.jquery.js и jQuery v1.9.1. В ссылках ниже вы сможете просмотреть ее работу и скачать все исходники. Как говорилось ранее, основной список задается миниатюрами (если нет времени их создавать, то просто грузите за место них полные версии картинок, как я в своем примере). Каждой миниатюре можно задать подпись если это необходимо. При нажатии на картинку откроется слайдер с соответствующей позиции, где будут стрелки навигации, с помощью которых можно будет перелистовать изображения в обе стороны.
Чтобы вставить картинку пишите в внутри тега с классом container_12 следующее:
<div class=”grid_3″><a href=”images/main.jpg” class=”gal”><img src=”images/sl.jpg”><span>Атмосфера</span></a></div>
Здесь images/main.jpg – ссылка на полную версию картинки, images/sl.jpg – ссылка на миниатюру картинки, Атмосфера – подпись к картинке.
Кстати, галерея использует bootstrap верстку, поэтому у кого она подключена результаты внешнего вида могут сильно различаться на разных сайтах. Но, думаю, не стоит напоминать, что внешний вид можно менять как угодно, используя правила css верстки.
(Пока оценок нет)
Загрузка...