 |
|
Займемся созданием фотогалереи на основе плагина к jQuery называемого Lightbox. В результате у нас должно получится красивое отображение увеличенных изображений в отдельном Ajax окне со средствами навигации на следующее изображение или предыдущее.
Для начала обзаведемся самим скриптом плагина. Скачать весь архив можно по этой ссылке.
Как только скачали архив, залейте на свой хост следующие файлы сборки lightbox:
Теперь нужно подключить lightbox к странице. Для этого пропишите в теле HEAD следующий код, предварительно заменив адреса на то местоположение, куда вы залили файлы:
Если ваш сайт создан на базе UCOZ, то первую строку кода писать не надо. jQuery на UCOZ подключен по умолчанию.
Теперь подготовим изображения. В примере 1 альбом из 4-х изображений:
Изображения нужно обернуть в ссылку с определенным классом (в примере - lightbox-gal-1). Если это галерея, а не отдельное изображение, то для этих ссылок нужно установить атрибут REL (в примере - gallery1). Если на странице несколько галерей, то свойство REL для каждой галереи должен быть свой. Скажем, для первой галереи свойство REL имеет значение gallery1, а для второй галереи - gallery2.
Теперь lightbox нужно запустить. Для этого в теле HEAD пишем следующий код:
Для работы 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, то вот пример:
На этом все. Удачного всем дня!
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 1884 |
| Рейтинг: | 4.0/6 |
| Дата добавления: | 25.11.2009 18:42, Среда |
| Добавил: | Szen |
| Теги: | jQuery |
Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.
Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.
| № 0 | Среда, 25.11.2009 18:42 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Используем jQuery Lightbox для фотогалереи". |
| Профиль |
| № 1 | Суббота, 28.11.2009 13:07 |
| Szen | Ко мне обратился ROLF со следующим вопросом: "Здравствуйте, у Вас получилось подключить этот скрипт, посмотрел Код страницы, поправил свой, всё равно не работает и пояснения по установке найти не могу, если Вы создали тему, пожалуйста дайте ссылку. Спасибо". ROLF, дайте ссылку на страницу, куда вы установили лайтбокс. Я гляну. |
| ПрофильWWW |
| № 2 | Четверг, 10.12.2009 16:48 |
wangog | Можно сделать так чтоб он открывал ту или иную страницу ?! |
| ПрофильWWW |
| № 3 | Четверг, 10.12.2009 17:01 |
| Szen | wangog, лайтбокс предназначен только для фотографий и картинок. Для открытия ссылок придется сильно извращаться. Ищите в нете тему "карусель". Это вам больше подойдет. У нас такой темы пока нет, но мы сейчас над этим работаем. |
| ПрофильWWW |
| № 5 | Вторник, 12.01.2010 11:30 |
| plise | Извените конечно, но не могли бы вы помочь с этим кодом в icq#838-88-75 (заранее спасибо)... Если что вообше не могу поставить! просто тупо не идет! напишите в icq! прошу |
| Профиль |
