GalleryView предлагает Вам гибкую, привлекательную галерею, которую
легко внедрить в любой дизайн и просто модифицировать под Ваши
потребности.
Демо версия данной галереи находится здесь. Скачать все файлы можно тут.
Внешний вид галереи
Все
содержимое находится здесь. Можете вставлять сюда картинки для создания
галерей или HTML для контента. Также можно использовать iframes и AJAX
для просмотра страничек с других сайтов
Необязательный элемент, который позволяет предоставить больше информации о содержимом панели
Миниатюры всех панелей находятся здесь. При движении от панели к панели появляются дополнительные миниатюры
Вид миниатюры
Необязательный
элемент, чтобы дать название каждой миниатюре. Если данная функция
включена, названия берутся из атрибута 'title' каждой картинки
Установка и использование галереи
После
скачивания архива (по ссылке в начале урока) у Вас уже будет готовый
html файл, в котором Вы сможете увидеть данную галерею в действии. Для
того, чтобы галерея работала без ошибок необходимо:
1)
Подключить все необходимые javascript файлы и таблицу стилей
(style.css) между тегами <head></head> (помните про
правильный путь к файлам, если поменяете их месторасположение)
Code
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery-galleryview-1.0.1/jquery.galleryview-1.0.1-pack.js"></script>
<script type="text/javascript" src="js/jquery-galleryview-1.0.1/jquery.timers-1.1.2.js"></script>
2) Также между тегами подключить еще скрипт с параметрами галереи
Code
<script type="text/javascript">
$(document).ready(function(){
$('#photos').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 38,
transition_speed: 1200,
background_color: '#222',
border: 'none',
easing: 'easeInOutBack',
pause_on_hover: true,
nav_theme: 'custom'
});
});
</script>
3) Также обязательным являются три структурных элемента галереи:
3.1 Непосредственно слой галереи "galleryview"
Code
<div id="photos" class="galleryview">
...
</div>
3.2 Серия картинок
с описанием путей и дополнительных полей
Code
...
<div class="panel">
<img src="img/01.jpg" />
<div class="panel-overlay">
<h2>Effet du soleil sur le paysage</h2>
Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>. View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p>
</div>
...
3.3 И неупорядоченый список картинок миниатюр
Code
...
<ul class="filmstrip">
<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
<li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
<li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
<li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
<li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
<li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
<li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
</ul>
Вот и все! Галерея готова. Данный плагин очень функциональный, и на его основе будут подготовлены еще уроки по созданию красивых и полезных решений для Ваших сайтов. Следите за нашими уроками!
Данный урок подготовлен для Вас командой сайта www.ruseller.com
Источник урока: www.spaceforaname.com
