Используем jQuery Lightbox для фотогалереи

Скрипты

Рисунок Используем jQuery Lightbox для фотогалереи
Используем jQuery Lightbox для фотогалереи Используем jQuery Lightbox для фотогалереи
оценка: 4.0 из 5
оценок: 53, отзывов: 38

Займемся созданием фотогалереи на основе плагина к jQuery называемого Lightbox. В результате у нас должно получится красивое отображение увеличенных изображений в отдельном Ajax окне со средствами навигации на следующее изображение или предыдущее.

Для начала обзаведемся самим скриптом плагина. Скачать весь архив можно по этой ссылке.

Как только скачали архив, залейте на свой хост следующие файлы сборки lightbox:

  • jquery.lightbox.js
  • lightbox.css

Теперь нужно подключить lightbox к странице. Для этого пропишите в теле HEAD (для пользователей UCOZ после тега ) следующий код, предварительно заменив адреса на то местоположение, куда вы залили файлы:

Code
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<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-х изображений:

Code
<a href="/images/lightbox/image-0.jpg" class="lightbox-gal-1" title="Рисунок 1" rel="gallery1"><img src="/images/lightbox/thumb-0.jpg" width="100" height="40" alt="Рисунок 1"></a>
<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 пишем следующий код:

Code
<script type="text/javascript">
  $(document).ready(function(){
    $(".lightbox-gal-1").lightbox({
      fitToScreen: true
    });
  });
</script>

Для работы lightbox этого достаточно. Все стилевое оформление делается через файл lightbox.css, который залили ранее. Там же можете изменить изображение перехода к следующему и предыдущему изображению (параметр #prevLink и #nextLink, соответственно).

И немного о параметрах, которые можно использовать при вызове lightbox. Эти параметры помогут изменить функционал вашей галереи.

Параметры прописываются через запятую внутри функции вызова lightbox. В примере использован один параметр. Это - fitToScreen. Существуют еще следующие параметры:

ПараметрТипПояснение
fileLoadingImageСтрокаИзображение, которое будет показано, пока рисунок грузится (бегунок).
fileBottomNavCloseImageСтрокаИзображение закрытия галереи.
overlayOpacity0-1Прозрачность фона.
borderSizeЧислоРазмер бордюра окна, которое будет разделять край окна и рисунок.
resizeSpeedЧислоСкорость изменения размера окна.
widthCurrentЧислоРазмер окна по ширине до изменения размера.
heightCurrentЧислоРазмер окна по высоте до изменения размера.
displayTitleЛогическоеОтображение заголовка изображения.
navBarSlideSpeedЧислоСкорость смены изображения.
displayHelpЛогическоеПоказывать помощь по использованию.
fitToScreenЛогическоеИзменять размер окна под изображение.
disableNavbarLinksЛогическоеПоказывать ссылки навигации.
loopImagesЛогическоеЦиклическое прокручивание.
imageClickCloseЛогическоеЗакрывать галерею при клике на картинке.
stringsОбъектСтроки. Используется для перевода текста в окне на родной язык.

Объект strings имеет следуюшие параметры:

ПараметрТипПояснение
prevLinkTitleСтрокаПодсказка к кнопке перехода к предыдущему рисунку.
nextLinkTitleСтрокаПодсказка к кнопке перехода к следующему рисунку.
prevLinkTextСтрокаТекст ссылки перехода на предыдущий рисунок.
nextLinkTextСтрокаТекст ссылки перехода на следующий рисунок.
closeTitleСтрокаПодсказка к кнопке закрытия галереи.
imageСтрокаТекст, который отображается между ссылками перехода. По умолчанию, Image.
ofСтрокаТекст, который отображается между номером текущего рисунка и количеством. По умолчанию, of.

Если вам непонятно, как прописать эти параметры в скрипт lightbox, то вот пример:

Code
<script type="text/javascript">
  $(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: '&laquo; Назад',
        nextLinkText: 'Вперед &raquo;',
        closeTitle: 'Закрыть галерею',
        image: 'Рисунок ',
        of: ' из '
      }
    });
  });
</script>

На этом все. Удачного всем дня!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Используем jQuery Lightbox для фотогалереи
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:31372
Рейтинг:4.0/53
Дата добавления:2009-11-25 18:00, Среда
Добавил:Szen
Теги:jQuery

Мини-форум

№ 02009-11-25 18:00
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Используем jQuery Lightbox для фотогалереи".
Гость
№ 1
2009-11-28 13:07 Спам
Szen
Аватар участника Szen
Ко мне обратился ROLF со следующим вопросом: "Здравствуйте, у Вас получилось подключить этот скрипт, посмотрел Код страницы, поправил свой, всё равно не работает и пояснения по установке найти не могу, если Вы создали тему, пожалуйста дайте ссылку. Спасибо".
ROLF, дайте ссылку на страницу, куда вы установили лайтбокс. Я гляну.
Szen · WWW
№ 2
2009-12-10 16:48 Спам
wangog
Аватар участника wangog
Можно сделать так чтоб он открывал ту или иную страницу ?!
Алексей · WWW
№ 3
2009-12-10 17:01 Спам
Szen
Аватар участника Szen
wangog, лайтбокс предназначен только для фотографий и картинок. Для открытия ссылок придется сильно извращаться. Ищите в нете тему "карусель". Это вам больше подойдет. У нас такой темы пока нет, но мы сейчас над этим работаем.
Szen · WWW
№ 4
2009-12-10 17:04 Спам
wangog
Аватар участника wangog
СпС ! За ответ ! Будем ждать !
Алексей · WWW
№ 5
2010-01-12 11:30 Спам
plise
Аватар участника plise
Извените конечно, но не могли бы вы помочь с этим кодом в icq#838-88-75 (заранее спасибо)... Если что вообше не могу поставить! просто тупо не идет! напишите в icq! прошу
Alexandr
№ 6
2010-05-02 18:13 Спам
leooonardo
Аватар участника leooonardo
Спасибо большое за урок. Но всё же есть один вопрос. В Опере всё работает как надо, а в explorer не хочет работать. В чём может быть причина? Кстати в скачаном архиве в примере странички такая же ерунда с фотографиями цветов. Или это у меня explorer такой?
Алексей
№ 7
2010-05-02 19:32 Спам
Szen
Аватар участника Szen
leooonardo, в эксплорере выполнение ява скриптов включено?
Szen · WWW
№ 8
2010-05-03 08:00 Спам
leooonardo
Аватар участника leooonardo
Да, квлючено. Првоерил в Мазиле всё прекрасно работает. А этом омжет быть из-за того что сайт на жёстком диске и не имеет интернет адреса?
Алексей
№ 9
2010-05-03 08:33 Спам
Szen
Аватар участника 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
Аватар участника SergLI
Добрый день.
Большое спасибо за ваши труды и помощь!
Может подскажите, как подключить лайтбокс в Виртуемарт ВМ (именно как галерею, а не по одной фотке) на флай странице товара? А вообще, Вы были бы открывателями (что привело бы к вам огромное кол-во посетителей т.к этого я нигде не нашел в нэте) и большими умницами, если бы для виртумарт категорий товара придумали, как подключить этот модуль для просмотра дополнительных фото, не заходя на флай страницу. Многий товар не имеет больших описаний, но требует дополнительных фото не заходя на флай страницу с товаром. И этот пробел в ВМ, похоже еще никто не решил... С надеждой и уважением!
Сергей
Учавствовать в обсуждении "Используем jQuery Lightbox для фотогалереи" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Как вы используете файл-хостинги?
Всего ответов: 170
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 4
Гостей: 4
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz