Используем jQuery Lightbox для фотогалереи
Скрипты
Используем jQuery Lightbox для фотогалереи
Займемся созданием фотогалереи на основе плагина к jQuery называемого Lightbox. В результате у нас должно получится красивое отображение увеличенных изображений в отдельном Ajax окне со средствами навигации на следующее изображение или предыдущее.
Для начала обзаведемся самим скриптом плагина. Скачать весь архив можно по этой ссылке.
Как только скачали архив, залейте на свой хост следующие файлы сборки lightbox:
- jquery.lightbox.js
- lightbox.css
Теперь нужно подключить lightbox к странице. Для этого пропишите в теле HEAD (для пользователей UCOZ после тега
) следующий код, предварительно заменив адреса на то местоположение, куда вы залили файлы:<script src="http://szenprogs.ru/scripts/lightbox/jquery.lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://szenprogs.ru/scripts/lightbox/lightbox.css" type="text/css">
Если ваш сайт создан на базе UCOZ, то первую строку кода писать не надо. jQuery на UCOZ подключен по умолчанию.
Теперь подготовим изображения. В примере 1 альбом из 4-х изображений:
<a href="/images/lightbox/image-1.jpg" class="lightbox-gal-1" title="Рисунок 2" rel="gallery1"><img src="/images/lightbox/thumb-1.jpg" width="100" height="40" alt="Рисунок 2"></a>
<a href="/images/lightbox/image-2.jpg" class="lightbox-gal-1" title="Рисунок 3" rel="gallery1"><img src="/images/lightbox/thumb-2.jpg" width="100" height="40" alt="Рисунок 3"></a>
<a href="/images/lightbox/image-3.jpg" class="lightbox-gal-1" title="Рисунок 4" rel="gallery1"><img src="/images/lightbox/thumb-3.jpg" width="100" height="40" alt="Рисунок 4"></a>
Изображения нужно обернуть в ссылку с определенным классом (в примере - lightbox-gal-1). Если это галерея, а не отдельное изображение, то для этих ссылок нужно установить атрибут REL (в примере - gallery1). Если на странице несколько галерей, то свойство REL для каждой галереи должен быть свой. Скажем, для первой галереи свойство REL имеет значение gallery1, а для второй галереи - gallery2.
Теперь lightbox нужно запустить. Для этого в теле HEAD пишем следующий код:
$(document).ready(function(){
$(".lightbox-gal-1").lightbox({
fitToScreen: true
});
});
</script>
Для работы lightbox этого достаточно. Все стилевое оформление делается через файл lightbox.css, который залили ранее. Там же можете изменить изображение перехода к следующему и предыдущему изображению (параметр #prevLink и #nextLink, соответственно).
И немного о параметрах, которые можно использовать при вызове lightbox. Эти параметры помогут изменить функционал вашей галереи.
Параметры прописываются через запятую внутри функции вызова lightbox. В примере использован один параметр. Это - fitToScreen. Существуют еще следующие параметры:
| Параметр | Тип | Пояснение |
| fileLoadingImage | Строка | Изображение, которое будет показано, пока рисунок грузится (бегунок). |
| fileBottomNavCloseImage | Строка | Изображение закрытия галереи. |
| overlayOpacity | 0-1 | Прозрачность фона. |
| borderSize | Число | Размер бордюра окна, которое будет разделять край окна и рисунок. |
| resizeSpeed | Число | Скорость изменения размера окна. |
| widthCurrent | Число | Размер окна по ширине до изменения размера. |
| heightCurrent | Число | Размер окна по высоте до изменения размера. |
| displayTitle | Логическое | Отображение заголовка изображения. |
| navBarSlideSpeed | Число | Скорость смены изображения. |
| displayHelp | Логическое | Показывать помощь по использованию. |
| fitToScreen | Логическое | Изменять размер окна под изображение. |
| disableNavbarLinks | Логическое | Показывать ссылки навигации. |
| loopImages | Логическое | Циклическое прокручивание. |
| imageClickClose | Логическое | Закрывать галерею при клике на картинке. |
| strings | Объект | Строки. Используется для перевода текста в окне на родной язык. |
Объект strings имеет следуюшие параметры:
| Параметр | Тип | Пояснение |
| prevLinkTitle | Строка | Подсказка к кнопке перехода к предыдущему рисунку. |
| nextLinkTitle | Строка | Подсказка к кнопке перехода к следующему рисунку. |
| prevLinkText | Строка | Текст ссылки перехода на предыдущий рисунок. |
| nextLinkText | Строка | Текст ссылки перехода на следующий рисунок. |
| closeTitle | Строка | Подсказка к кнопке закрытия галереи. |
| image | Строка | Текст, который отображается между ссылками перехода. По умолчанию, Image. |
| of | Строка | Текст, который отображается между номером текущего рисунка и количеством. По умолчанию, of. |
Если вам непонятно, как прописать эти параметры в скрипт lightbox, то вот пример:
$(document).ready(function(){
$(".lightbox-gal-1").lightbox({
fitToScreen: true,
imageClickClose: false,
fileLoadingImage: '/images/lightbox/loading.gif',
fileBottomNavCloseImage: '/images/lightbox/closelabel.gif',
strings:{
prevLinkTitle: 'Предыдущий рисунок',
nextLinkTitle: 'Следующий рисунок',
prevLinkText: '« Назад',
nextLinkText: 'Вперед »',
closeTitle: 'Закрыть галерею',
image: 'Рисунок ',
of: ' из '
}
});
});
</script>
На этом все. Удачного всем дня!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Используем jQuery Lightbox для фотогалереи
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 52371 |
| Рейтинг: | 4.0/53 |
| Дата добавления: | 2009-11-25 18:00, Среда |
| Добавил: | Szen |
| Теги: | jquery |
Рекомендуем
Дополнительно к Используем jQuery Lightbox для фотогалереи
Мини-форум
| № 0 | 2009-11-25 18:00 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Используем jQuery Lightbox для фотогалереи". |
| Гость |
| № 1 | 2009-11-28 13:07 |
Szen | Ко мне обратился ROLF со следующим вопросом: "Здравствуйте, у Вас получилось подключить этот скрипт, посмотрел Код страницы, поправил свой, всё равно не работает и пояснения по установке найти не могу, если Вы создали тему, пожалуйста дайте ссылку. Спасибо". ROLF, дайте ссылку на страницу, куда вы установили лайтбокс. Я гляну. |
| Szen · WWW |
| № 3 | 2009-12-10 17:01 |
| Szen | wangog, лайтбокс предназначен только для фотографий и картинок. Для открытия ссылок придется сильно извращаться. Ищите в нете тему "карусель". Это вам больше подойдет. У нас такой темы пока нет, но мы сейчас над этим работаем. |
| Szen · WWW |
| № 5 | 2010-01-12 11:30 |
| plise | Извените конечно, но не могли бы вы помочь с этим кодом в icq#838-88-75 (заранее спасибо)... Если что вообше не могу поставить! просто тупо не идет! напишите в icq! прошу |
| Alexandr |
| № 6 | 2010-05-02 18:13 |
| leooonardo | Спасибо большое за урок. Но всё же есть один вопрос. В Опере всё работает как надо, а в explorer не хочет работать. В чём может быть причина? Кстати в скачаном архиве в примере странички такая же ерунда с фотографиями цветов. Или это у меня explorer такой? |
| Алексей |
| № 8 | 2010-05-03 08:00 |
| leooonardo | Да, квлючено. Првоерил в Мазиле всё прекрасно работает. А этом омжет быть из-за того что сайт на жёстком диске и не имеет интернет адреса? |
| Алексей |
| № 9 | 2010-05-03 08:33 |
| Szen | leooonardo, если тестишь на диске, то ссылку на скрипт лайтбокса нужно делать абсолютную (есть такой глюк у ИЕ). Тоесть, вместо Code <script src="jquery.lightbox.js" type="text/javascript"></script> нужно сделать что-то типа этого: Code <script src="file://localhost/C:/test/1/jquery.lightbox.js" type="text/javascript"></script> Может этот баг ИЕ виноват. з.ы.: Я сам тестил скрипт на диске. Все работало прекрасно. |
| Szen · WWW |
| № 10 | 2010-08-25 14:43 |
| SergLI | Добрый день. Большое спасибо за ваши труды и помощь! Может подскажите, как подключить лайтбокс в Виртуемарт ВМ (именно как галерею, а не по одной фотке) на флай странице товара? А вообще, Вы были бы открывателями (что привело бы к вам огромное кол-во посетителей т.к этого я нигде не нашел в нэте) и большими умницами, если бы для виртумарт категорий товара придумали, как подключить этот модуль для просмотра дополнительных фото, не заходя на флай страницу. Многий товар не имеет больших описаний, но требует дополнительных фото не заходя на флай страницу с товаром. И этот пробел в ВМ, похоже еще никто не решил... С надеждой и уважением! |
| Сергей |
