Плагин jQuery LightBox. Легкая фотогалерея.

Плагин jQuery Lightbox пользуется все большей популярностью. Легкость в использовании, гибкие настройки выделяют его среди других галерей.

Ниже приведен пример работы галереи с использованием плагина jQuery Lightbox. Кликните мышкой на фотографии и посмотрите этот плагин в действии.

Lightbox презентацияНажмите на первую картинку чтобы начать просмотр.

Итак, что же нужно, чтобы использовать такую галерею на своем сайте?

Нам понадобится библиотека jQuery, конечно же сам плагин jquery.lightbox.js, файл стилевого оформления, несколько картинок (вперед, назад, загрузка...) и фотографии для Вашей галереи, представленные в двух вариантах: миниатюра и полноразмерное изображение. Нужные файлы (включая демонстрационные фото), Вы сможете найти в этом архиве.

Для начала скопируем нужные файлы на сервер, сохраняя структуру папок (css, js, images). Далее подключим нужные файлы в код нашей HTML-страницы. Лучше использовать упакованную версию скриптов (jquery-1.2.6.pack.js и jquery.lightbox.packed.js). Это позволит уменьшить время загрузки страницы.

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.packed.js"></script>

Затем разместим в теле HTML-страницы наши картинки. Здесь уже можно применить свою фантазию, ограничений почти нет.
Самое главное правило - заключить маленькую картинку в тег A, который ссылается на большое изображение и имеет атрибут rel со значением lightbox* (* - означает произвольное значение, рассмотрим это ниже). Cодержимое атрибута title - это описание, прилагаемое при просмотре к полноразмерной фотографии.

Например:

<ul>
<li><a rel="lightbox-myGroup" href="sample/lost-large.jpg" title="1-я"><img src="sample/lost-small.jpg" alt="" /></a></li>
<li><a rel="lightbox-myGroup" href="sample/beach-large.jpg" title="2-я"><img src="sample/beach-small.jpg" alt="" /></a></li>
<li><a rel="lightbox-myGroup" href="sample/bamboo-large.jpg" title="3-я"><img src="sample/bamboo-small.jpg" alt="" /></a></li>
</ul>

Рассмотрим несколько вариантов расположения картинок.

Общее использование: Автоматическое создание группы элементов lightbox <a rel="lightbox-myGroup" href="sample/mountain-large.jpg" >

В данном случае у всех ссылок атрибут rel имеет значение lightbox-myGroup ("-myGroup" выбрано для примера, можно использовать любое другое название). Наличие приставки к значению "lightbox" и одинаковые значения атрибутов rel у нескольких ссылок означает, что эти картники должны быть показаны как группа.

Общее использование: Автоматическое создание отдельных элементов lightbox <a rel="lightbox" href="sample/mountain-large.jpg" >

Теперь у всех ссылок атрибут rel имеет значение lightbox и это означает что каждый элемент будет показан отдельно.

Если по каким-то причинам вы не хотите использовать атрибут rel - можно обойтись и без него. Для этого нам нужно указать lightbox, какие ссылки он должен искать. Делается это следующим образом:

<script type="text/javascript">
$(document).ready(function(){
$('#ourManualGallery a').lightbox();
});
</script>

Ручное использование: Ручное создание группы элементов lightbox <script type="text/javascript"> $(document).ready(function(){ $('#ourManualGallery a').lightbox(); }); </script>

Если необходимо подключить lightbox только в одной картинке и атрибут rel не желателен, целесообразно возложить функцию инициализации lightbox на событие onclick тега A.

Ручное использование: Ручное создание отдельного элемента lightbox<a class="lightbox-enabled" onclick="$(this).lightbox({start:true,events:false}); return false;" href="sample/mountain-large.jpg" >

Как мы видим, плагин jQuery LightBox действительно легко использовать! Теперь я приведу полное описание и способы определения настроек, которые позволяют сделать наш LightBox более гибким.

Как применить настройки LightBox?

Существует два способа применения настроек LightBox:

  • путем задания параметров ссылки
    <script type="text/javascript" src="js/jquery.lightbox.packed.js?show_linkback=false&text.image=Photo"></script>
  • путем определения конструктора LightBox
    <script type="text/javascript" src="js/jquery.lightbox.packed.js"></script>
    <script type="text/javascript">$(function(){
    $.Lightbox.construct({
    show_linkback: false,
    text: {
    image: 'Photo'
    }
    });
    });</script>

Полный список настроек плагина jQuery LightBox

show_info
Нужно ли принудительно показывать информацию о картинке?
"auto" (default)показывать автоматически при наведении мыши
trueпринудительно показывать
 
show_extended_info
Нужно ли принудительно показывать дополнительную информацию о картинке?
"auto" (default)показывать автоматически при наведении мыши
trueпринудительно показывать
 
download_link
Нужно ли показывать ссылку на скачивание картинки?
true (default)нужно
falseне нужно
 
auto_resize
Нужно ли масштабировать картинку если она слишком большая?
true (default)да
falseнет
 
colorBlend
Нужно ли поддерживать colorBlend?
null (default)включить если colorBlend установлен
trueустановить colorBlend и включить
falseне поддерживать colorBlend
 
ie6_support
Нужно ли поддерживать IE6?
true (default)поддерживать IE6
falseигнорировать IE6
 
ie6_upgrade
Нужно ли показывать сообщение о обновлении IE для пользователей IE6?
true (default)да
falseнет
 
show_linkback
Показать или скрыть обратную ссылку в верхнем правом углу?
true (default)показать обратную ссылку
falseскрыть обратную ссылку
 
auto_scroll
Как управлять прокручиванием?
"follow" (default)прокручивать вместе с окном
"disabled"не разрешать прокручивать
"ignore"не обращать внимание на прокручивание (оставить lightbox в изначальной позиции)
 
speed
Общее количество милисекунд на перелистывание картинок
400 (default)400 милисекунд
integerколичество милисекунд
 
baseurl
Путь, относительно которого следует подключать необходимые файлы
null (default)автоопределение
stringстрока, описывающая путь
 
files
Объект javascript, который содержит расположение необходимых файлов. Используется если файлы были переименованы или была нарушена структура папок
Элементы
js.lightboxпуть к скрипту jquery.lightbox.js, по умолчанию "js/jquery.lightbox.js"
js.colorBlendпуть к скрипту jquery.color.js, по умолчанию "js/jquery.color.js"
css.lightboxпуть к файлу стилей jquery.lightbox.css, по умолчанию "css/jquery.lightbox.css"
images.prevпуть к картинке, обозначающей ссылку на предыдущий файл, по умолчанию "images/prev.gif"
images.nextпуть к картинке, обозначающей ссылку на следующий файл, по умолчанию "images/next.gif"
images.blankпуть к картинке затемнения фона, по умолчанию "images/blank.gif"
images.loadingпуть к картинке, обозначающей загрузку файла, по умолчанию "images/loading.gif"
 
text
Объект javascript, который содержит тексты различных частей интерфейса, используется для перевода на другой язык
Элементы
imageСлово "картинка" в фразе "картинка № из №", по умолчанию "Image"
ofСлово "из" в фразе "картинка № из №", по умолчанию "of"
closeФраза ссылки закрытия окна, по умолчанию "Close X"
closeInfoВсплывающая подсказка ссылки закрытия окна, по умолчанию "You can also click anywhere outside the image to close."
downloadФраза ссылки на скачивание картинки, по умолчанию "Direct link to download the image."
help.closeФраза ссылки закрытия окна в правом верхнем углу, по умолчанию "Click to close"
help.interactВсплывающая подсказка ссылки закрытия окна в правом верхнем углу, по умолчанию "Hover to interact"
about.textФраза ссылки описания в правом верхнем углу, по умолчанию "jQuery Lightbox Plugin (balupton edition)"
about.titleВсплывающая подсказка ссылки описания в правом верхнем углу, по умолчанию "Licenced under the GNU Affero General Public License."
about.linkСсылки описания в правом верхнем углу, по умолчанию "http://jquery.com/plugins/project/jquerylightbox_bal"
 
keys
Объект javascript, который содержит клавиши клавиатуры для перемещения по картинкам. Используйте если вы хотите переопределить клавиши.
Элементы
closeклавиша закрытия окна, по умолчанию "с"
prevклавиша для перемещения на предыдущую картинку, по умолчанию "p"
nextклавиша для перемещения на следующую картинку, по умолчанию "n"
 
opacity
Прозрачность затемнения фона
0.9 (default)90% прозрачности
decimal valueпроцент прозрачности в десятичной форме
 
padding
Отступ вокруг картинки
null (default)автоопределение
integerотступ, целое число
 
rel
Какое значение искать в атрибуте rel ссылок и картинок, чтобы определить необходимость использования lightbox
"lightbox" (default)искать rel="lightbox", по умолчанию
stringкакое значение искать
 
auto_relify
Нужно ли искать значения атрибута rel чтобы автоматически инициировать lightbox?
true (default)нужно
falseне нужно

inchik.com - Портфолио, в котором представлены работы по верстке, интеграции и разработке сайтов на CMS 1С:Битрикс.


Возврат к списку

113
4.02