jQuery.Popeye 2.1 - строим фотогалерею, используя встроенный альтернативный лайтбокс со слайдшоу
А теперь всё по порядку.
Пример 1
Наиболее эффектный, на мой взгляд вариант: в начальном виде изображение оформленное в рамку с закруглёнными углами, при наведении курсора мыши на изображение, поверх изображения всплывает полупрозрачный блок навигации, а под самим изображением отображается в отдельном блоке информация о нём: описание и нумерация.
Установка:
1. Первым делом подключим между тегами
Code
<head> ... </head>
файлы CSS стилей и скрипты библиотеки jQuery и лайтбокса (все необходимые файлы вы найдёте в архиве с исходниками)
Code
<link rel="stylesheet" type="text/css" href="/css/jquery.popeye.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/jquery.popeye.style1.css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.popeye-2.1.js"></script>
2. Теперь, в том месте страницы сайта, где нужно разместить фотогалерею, вставляем её код:
Code
<div class="ppy" id="ppy1">
<ul class="ppy-imglist">
<li>
<a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Здесь заголовок изображения</strong>
А здесь какой-нибудь текст описания
<a href="http://ps-studio.info">Любая ссылка</a>
</span>
</li>
<li>
<a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Здесь заголовок изображения</strong>
А здесь какой-нибудь текст описания
<a href="http://ps-studio.info">Любая ссылка</a>
</span>
</li>
<li>
<a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Здесь заголовок изображения</strong>
А здесь какой-нибудь текст описания
<a href="http://ps-studio.info">Любая ссылка</a>
</span>
</li>
<li>
<a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Здесь заголовок изображения</strong>
А здесь какой-нибудь текст описания
<a href="http://ps-studio.info">Любая ссылка</a>
</span>
</li>
<li>
<a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a>
<span class="ppy-extcaption">
<strong>Здесь заголовок изображения</strong>
А здесь какой-нибудь текст описания
<a href="http://ps-studio.info">Любая ссылка</a>
</span>
</li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-nav">
<a class="ppy-prev" title="Предыдущее фото">Предыдущее фото</a>
<a class="ppy-switch-enlarge" title="Увеличить">Увеличить</a>
<a class="ppy-switch-compact" title="Закрыть">Закрыть</a>
<a class="ppy-next" title="Следующее фото">Следующее фото</a>
</div>
</div>
</div>
<div class="ppy-caption">
<div class="ppy-counter">
Фото <strong class="ppy-current"></strong> из <strong class="ppy-total"></strong>
</div>
<span class="ppy-text"></span>
</div>
</div>
В демо-примере все мини-изображения имеют ширину в 240 пикселов, а высота различна. Ширина полноразмерных изображений ограничена 500 пикселами.
3. Последним шагом необходимо в самом низу кода страницы, перед закрывающим тегом
Code
</body>
подключить скрипт
Code
<script type="text/javascript">
<!--//<![CDATA[
$(document).ready(function () {
var options1 = {
}
$('#ppy1').popeye(options1);
});
//]]>-->
</script>
Фотогалерея с встроенным лайтбоксом готова к работе.
Пример 2
Второй пример представляет из себя еще более компактный, нежели первый, вариант фотогалереи, в котором изначально видны элементы навигации, но описание для изображения отсутствует.
Установка:
1. По аналогии с предыдущим примером, подключим между тегами
Code
<head> ... </head>
файлы CSS стилей и скрипты библиотеки jQuery и лайтбокса (все необходимые файлы вы найдёте в архиве с исходниками)
Code
<link rel="stylesheet" type="text/css" href="/css/jquery.popeye.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/jquery.popeye.style2.css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.popeye-2.1.js"></script>
2. Теперь, в том месте страницы сайта, где нужно разместить фотогалерею, вставляем её код:
Code
<div class="ppy" id="ppy2">
<ul class="ppy-imglist">
<li> <a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a></li>
<li> <a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a></li>
<li> <a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a></li>
<li> <a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a></li>
<li> <a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a></li>
<li> <a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a></li>
<li> <a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a></li>
<li> <a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a></li>
<li> <a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="" />
</a></li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-counter">
<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>
</div>
</div>
<div class="ppy-nav">
<div class="nav-wrap">
<a class="ppy-next" title="Следующее фото">Следующее фото</a>
<a class="ppy-prev" title="Предыдущее фото">Предыдущее фото</a>
</div>
</div>
</div>
</div>
3. Последним шагом необходимо в самом низу кода страницы, перед закрывающим тегом
Code
</body>
подключить скрипт
Code
<script type="text/javascript">
<!--//<![CDATA[
$(document).ready(function () {
var options2 = {
caption: false,
navigation: 'permanent',
direction: 'right'
}
$('#ppy2').popeye(options2);
});
//]]>-->
</script>
В данном случае при открытии полноразмерное изображение будет смещаться право, благодаря настройке в скрипте:
Code
direction: 'right'
Если нужно, чтобы окно лайтбокса смещалось влево, установите в скрипте, указанном выше, для direction значение left
Code
direction: 'left'
По умолчанию, в демо-примере у фотогалереи видны стрелки навигации, можно сделать так, чтобы они появлялись при наведении курсора мыши на изображение, для этого в скрипте выше нужно для параметра navigation заменить значение permanent на hover.
С этим примером закончили.
Пример 3
Несмотря на кажущееся с виду весьма аскетичное оформление, данный пример наиболее функциональный, поскольку помимо всплывающей навигации и имеющегося описания к изображению, содержит встроенное слайдшоу на фоне полупрозрачного градиента.
Изначально навигация не видна, но при наведении курсора мыши на изображение, появляется полупрозрачный тёмный градиент и на его фоне навигация, сотоящая из стрелок перемотки изображений и кнопки, запускающей слайдшоу.
Причём, режим слайдшоу работает как для превью, так и для полноразмерных изображений фотогалереи, выводимых в окне лайтбокса.
Установка:
1. Как всегда, подключим между тегами
Code
<head> ... </head>
файлы CSS стилей и скрипты библиотеки jQuery и лайтбокса (все необходимые файлы вы найдёте в архиве с исходниками)
Code
<link rel="stylesheet" type="text/css" href="/css/jquery.popeye.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/jquery.popeye.style3.css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.popeye-2.1.js"></script>
2. В том месте страницы сайта, где нужно разместить фотогалерею, вставляем её код:
Code
<div class="ppy" id="ppy3">
<ul class="ppy-imglist">
<li><a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="Здесь описание изображения" />
</a></li>
<li><a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="Здесь описание изображения" />
</a></li>
<li><a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="Здесь описание изображения" />
</a></li>
<li><a href="Здесь вставляем ссылку на полноразмерное изображение">
<img src="Здесь вставляем ссылку на мини-изображение" alt="Здесь описание изображения" />
</a></li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-nav">
<div class="nav-wrap">
<a class="ppy-prev" title="Предыдущее фото">Предыдущее фото</a>
<a class="ppy-play" title="Запустить слайдшоу">Запустить слайдшоу</a>
<a class="ppy-pause" title="Остановить слайдшоу">Остановить слайдшоу</a>
<a class="ppy-next" title="Next image">Следующее фото</a>
</div>
</div>
<div class="ppy-counter">
<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>
</div>
</div>
<div class="ppy-caption">
<span class="ppy-text"></span>
</div>
</div>
</div>
3. И конечно же, в самом низу кода страницы помещаем скрипт
Code
<script type="text/javascript">
<!--//<![CDATA[
$(document).ready(function () {
var options3 = {
caption: 'permanent',
opacity: 1
}
$('#ppy3').popeye(options3);
});
//]]>-->
</script>
Если в скрипте выше для параметра caption заменить значение permanent на hover, то описания изображения изначально видно не будет, оно появится при наведении курсора мыши на фото.
Изменение параметра opacity даст изменение прозрачности фонового слоя под всплывающей навигацией.
Добавление в скрипт параметра duration позволит регулировать плавность открытия - закрытия окна лайтбокса с полноразмерным изображением фотогалереи.
Например, код вышеприведённого скрипта с новым параметром будет выглядеть так:
Code
<script type="text/javascript">
<!--//<![CDATA[
$(document).ready(function () {
var options3 = {
caption: 'permanent',
duration: 3000,
opacity: 1
}
$('#ppy3').popeye(options3);
});
//]]>-->
</script>
Чем большее значение для параметра duration вы выставите, тем медленнее (плавнее) будет открываться - закрываться полноразмерное изображение, и наоборот.
Добавление параметра slidespeed позволит регулировать скорость, с которой будут сменяться изображения.
Например:
Code
<script type="text/javascript">
<!--//<![CDATA[
$(document).ready(function () {
var options3 = {
caption: 'permanent',
duration: 3000,
slidespeed: 2000,
opacity: 1
}
$('#ppy3').popeye(options3);
});
//]]>-->
</script>
само собой, чем больше этот параметр, тем будут более длинными промежутки времени в миллисекундах, через которые изображение будет меняться на другое.
Ну и, конечно же, можно настроить показ слайдшоу на автоматический режим. Для этого в скрипт нужно добавить строку:
Code
autoslide: true
В итоге скрипт со всеми приведёнными выше параметрами будет выглядеть так:
Code
<script type="text/javascript">
<!--//<![CDATA[
$(document).ready(function () {
var options3 = {
caption: 'permanent',
autoslide: true,
duration: 3000,
slidespeed: 2000,
opacity: 1
}
$('#ppy3').popeye(options3);
});
//]]>-->
</script>
На этом всё, мы познакомились с тремя весьма эффективными способами компактного размещения фотогалереи на сайте, с возможностью просмотра в лайтбоксе слайдшоу всех изображений.
Всего комментариев: 0
Оставь комментарий первым!
Оставь комментарий первым!
