Плагин 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С:Битрикс.
