jQuery и другое... » фотогалерея

Галерея LightBox и ее клоны

Gennady — Fri, 27 Nov 2009 06:37:29 +0000

Почему решил написать этот обзор? Во-первых, предыдущая статья про LightBox безнадежно устарела. Во-вторых, мне LightBox нравится. Правда было время, когда разработчики плагина убирали оттуда поддержку ie6, но потом, видимо одумавшись, вернули ее. В общем, всем хорош плагин LightBox, но вот заточен он только под фото. А если приперло вывести видео с YouTube или вообще какой-нибудь контент в iframe? Да, да, знаю, есть галерея FancyBox, сам пользуюсь, но LightBox все равно больше нравится. Поэтому и было решено покопаться среди многочисленных клонов галереи LightBox.

Галерея LightBox

Начинаем, так сказать, с первоисточника и сразу же смотрим демо, замечая при этом нюансы, чтобы потом сравнить с другими галереями.

Ясно, что для использования плагина нужно подключить к веб-странице файл библиотеки jquery-1.3.2.js, файл плагина jquery.lightbox.js и файл стилевого оформления плагина jquery.lightbox.css. Не забудьте, что в папке images полученного архива, хранятся изображения элементов управления, необходимые для работы плагина.

Теперь о том, как собственно организовать галерею. Естественно понадобятся изображения из которых будет состоять галерея – миниатюры и соответствующие им полноразмерные изображения. Общая конструкция такая:

Картинка-миниатюра заключена в тэг а, атрибут href которого указывает на соответствующее полноразмерное изображение. В атрибуте rel содержится ключевое слово – lightbox. Такого кода достаточно, чтобы при клике по миниатюре в отдельном слое открылось большое (именно большое, потому что по умолчанию оно масштабируется, если не помещается в области просмотра) изображение. Текст, содержащийся в атрибуте title тэга a станет комментарием к открывшемуся изображению.

В рассмотренном примере функциональность плагина применена к отдельному изображению, а нам нужно сделать тоже самое для группы. Смотрим следующую разметку:

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

Если по каким-то причинам Вам нежелательно использовать атрибут rel, можно обойтись и без него. Создать галерею можно используя простой jQuery-код.

$(function(){
  $('a.gallery').lightbox();
});

Если этот код использовать с приведенной ниже разметкой, то все элементы а, имеющие класс gallery, получат функциональность плагина, и атрибут rel тут не потребуется.

Плагин LightBox имеет некоторое количество пользовательских настроек, с помощью которых можно переопределить поведение по умолчанию. Обычно jQuery-плагины принимают такие настройки в виде объекта, передаваемого методу в качестве аргумента. Здесь дело обстоит несколько иначе – для настройки вызывается отдельный метод. Ниже приведен пример кода, который создаст галерею из изображений, заключенных в тэг а с классом gallery и передаст плагину некоторые настройки.

$(function(){
  $("a.gallery").lightbox();
  $.Lightbox.construct({
    text: {
      image: "Фото",
      of: "из"
    },
    download_link: false,
    opacity: 0.5,
    show_linkback: false
  });
});

Кстати, помимо использования $.Lightbox.construct(); есть другая возможность передать настройки – в строке запроса. Примерно так:

ПРИМЕЧАНИЕ: В плагине подразумевается поддержка IE6 и она включена по умолчанию. Для IE6 передача параметров возможна только в строке запроса (остальные браузеры тоже понимают такой способ). Если попытаться использовать $.Lightbox.construct(); то в IE плагин перестает работать. По крайней мере у меня не получилось.

Ну а теперь немного о возможных опциях, которые можно использовать для настройки LightBox.

show_linkback – по умолчанию true, показывает ссылку на страницу плагина на сайте plugins.jquery.com в правом верхнем углу. Передаем false, чтобы скрыть ссылку.
show_helper_text – по умолчанию true, показывает текст (Click to close) в правом верхнем углу и всплывающую подсказку (Hover to interact) при наведении указателя мыши на этот текст. Используем false, чтобы убрать текст (и подсказку естественно тоже).
show_info – по умолчанию ‘auto’, показывает информацию (текст, содержащийся в атрибуте title) под открывшимся изображением только в том случае, если указатель мыши находится над изображением. Чтобы показывать эту информацию независимо от положения указателя мыши используем значение true.
show_extended_info – по умолчанию ‘auto’, показывает дополнительную информацию (Image 1 of nn) при указатель мыши прошел над область, где показывается основная информация (текст, содержащийся в атрибуте title). Чтобы показывать эту информацию независимо от положения указателя мыши используем значение true.
download_link – по умолчанию true, предоставляет возможность открыть полноразмерное изображение в новом окне (вкладке) браузера, воспользовавшись ссылкой, которой является текст комментария к изображению (текст, содержащийся в атрибуте title). Чтобы запретить использование этой возможности, надо передать false.
auto_resize – по умолчанию true, автоматически изменяет размеры картинки, если она слишком большая и не вписывается в область просмотра. Необходимо передать false, чтобы отменить это поведение.
ie6_support – по умолчанию true, включена поддержка IE6. Чтобы отключить ее, надо передать false.
ie6_upgrade – по умолчанию true, показывает сообщение, призывающее пользователей IE6 проапгрейдить свое ПО (у меня почему-то не сработало).
speed – число, определяющее количество миллисекунд, которые отводятся на переход между двумя изображениями. По умолчанию установлено 400.
baseurl – по умолчанию null, но можно указать url для автоматического подключения файлов, которые использует скрипт (стили, картинки).
files – объект, в свойствах которого можно передать местоположение требуемых файлов (используется, если названия файлов менялись). Можно использовать следующие свойства: js.lightbox, js.colorBlend, css.lightbox, images.prev, images.next, images.blank, images.loading.
text – объект, в свойствах которого можно передать текст частей интерфейса. Используется для перевода на нужный язык. Можно использовать следующие свойства: image, of, close, closeInfo, download, help.close, help.interact, about.text, about.title, about.link.
keys – объект, в свойствах которого можно определить «горячие клавиши» для перемещения по галерее вперед и назад, а также для закрытия галереи. Используются свойства close, prev, next.
opacity – прозрачность слоя, который появляется при просмотре галереи между большими изображениями и основным содержимым страницы. Значение может изменяться от 0 до 1. По умолчанию используется значение 0.9.
padding – по умолчанию null, но можно указать число, которое будет определять отступы вокруг просматриваемого изображения.
rel – по умолчанию ‘lightbox’, определяет значение в атрибуте rel тега а (см. пример html-разметки), исходя из которого плагин автоматически формирует галереи. Можно передать строку, в которой определить любое удобное значение.
auto_relify – по умолчанию true, плагин должен автоматически искать и формировать галереи. Чтобы отменить такое поведение следует передать значение false.

Выводы: Плюсы – неплохое оформление, большинство опций действительно полезны. Минусы – сложности с настройкой плагина с учетом поддержки IE6, не все опции удается использовать так, как заявлено разработчиком, не работает ни с каким другим контентом, кроме фото. Имхо, минусов больше, причем перечислены еще не все.

Галерея NFLightBox

По сравнению с обычным LightBox не имеет таких заморочек с настройкой под все основные браузеры, но точно также работает только с фото. Однако имеет возможность автоматической смены изображений – слайдшоу.

Смотрим демо, замечаем отличия от LightBox…

Подключается просто:

В разделе HEAD надо указать пути к файлу стилевого оформления, файлу библиотеки jQuery и файлу плагина. Требования к разметке точно такие же, как и у LightBox.

Создается галерея с помощью следующего jQuery-кода:

$('a').lightBox({
  overlayBgColor: '#363',
  txtImage: 'Фото',
  txtOf: 'из',
  txtPrev: ' Назад',
  txtNext: ' Вперед',
  keyToClose: 'q',
  keyToPrev: 'z',
  keyToNext: 'c'
});

Этот плагин тоже имеет приличное количество настроек. Использование некоторых показано в приведенном выше коде. Довольно полезная опция overlayBgColor – позволяет менять цвет промежуточного слоя между просматриваемым изображением и содержимым веб-страницы. В LightBox для этого пришлось бы править css-файл.

Чуть подробнее про опции, которые можно использовать для настройки.

overlayBgColor – по умолчанию #000 (черный), используется для задания цвета промежуточного слоя.
overlayOpacity – по умолчанию 0.8, задает прозрачность промежуточного слоя. Можно использовать значения от 0 до 1.
imageLoading, imageBtnPrev, imageBtnNext, imageBtnClose, imageBlank, imageBtnBottomPrev, imageBtnBottomNext, imageBtnPlay, imageBtnStop – во всех этих опциях можно передать строку, содержащую путь к файлу изображения соответствующего элемента управления.
containerBorderSize – по умолчанию 10, определяет ширину рамки вокруг просматриваемого изображения.
containerResizeSpeed – по умолчанию 500, время в миллисекундах, за которое будет изменяться размеры области просмотра изображения при переходе от одного изображения к другому.
txtImage, txtOf, txtPrev, txtNext – вполне понятные опции. Например задав значения txtImage: ‘Фото’ и txtOf:’из’ Вы уже будете видеть не Image 1 of 8, а Фото 1 из 8.
keyToClose, keyToPrev, keyToNext – с помощью этих опций можно задать «горячие» клавиши. Например keyToClose:’q’ – при нажатии клавиши ‘q’ просмотр будет прекращен.
slideShowTimer – по умолчанию 5000, т.е.если Вы запустите слайдшоу, то изображения будут меняться каждые 5 секунд.

Выводы: Плюсы – неплохое оформление, большинство опций действительно полезны, есть автоматическая смена фото при просмотре, нет сложностей с настройкой. Минусы – png-файлы для элементов управления не очень здорово выглядят в IE6 (и к сожалению jquery.pngfix.js тут не поможет), не работает ни с каким другим контентом, кроме фото. Имхо, лучше, чем стандартный LightBox, но все же не то, что хочется.

Галерея PrettyPhoto

Так и хочется написать – PrettyPhoto мой выбор! Во-первых, этот плагин позволяет работать не только с фото. В области просмотра можно выводить видео с YouTube, ролики в формате .mov (Apple QuickTime), содержимое во flash-формате и наконец вообще любой контент через iframe. Во-вторых, этот плагин имеет свой API, чего нет в рассмотренных ранее плагинах.
Смотрим демо, отмечаем отличия от других галерей и начинаем разговор про PrettyPhoto.

Сначала необходимо подключить к веб-страницы файл библиотеки jquery-1.3.2.js, файл плагина jquery.prettyPhoto.js и файл стилевого оформления плагина prettyPhoto.css.

Организация галереи (или галерей) почти не отличается от того, как это делается в LightBox.

Картинка-миниатюра заключена в тэг а, атрибут href которого указывает на соответствующее полноразмерное изображение. В атрибуте rel содержится ключевое слово – prettyPhoto. Чтобы создать несколько различных галерей на обной веб-странице, в атрибуте rel следует указать например – prettyPhoto[gallery_easy] для условной первой галереи, prettyPhoto[other_gallery] – для другой и так далее…

С помощью jQuery-кода создаем галерею. Используем настройки, установленные по умолчанию.

$(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto();
});

Опции, которые можно использовать для настройки prettyPhoto:
animationSpeed – по умолчанию ‘normal’. Другие возможные значения – ‘fast’ и ’slow’. Скорость анимации изменения размеров окна просмотра при переходе от одного изображения к другому.
padding – по умолчанию 40. Число, опредяляющее отступы вокруг изображения.
opacity – по умолчанию 0.80, прозрачность промежуточного слоя. Изменяется от 0 до 1.
showTitle – по умолчанию true. Заголовок (содержимое атрибута title тэга а), который отображается в левом верхнем углу над областью просмотра. Чтобы отключить надо использовать значение false.
allowresize – по умолчанию true. По умолчанию полноразмерное изображение масштабируется, если ему не хватает места для отображения в полном размере. Можно отменить это поведение, передав false.
counter_separator_label – по умолчанию ‘/’. Разделитель в счетчика изображений галереи.
theme – по умолчанию ‘light_rounded’. Да! Плагин поддерживает несколько тем оформления. Кроме light_rounded возможны также dark_rounded, light_square, dark_square. Вот только для IE6 принудительно используется тема light_square (светлый фон и нескругленные углы).
hideflash – по умолчанию false. Скрывает все flash-объекты на странице при просмотре галереи, чтобы они не отображались поверх. Если этого не требуется, можно установить значение true.
modal – по умолчанию false. Если установить true, будет использоваться модальный режим, т.е. завершить просмотр галереи можно будет только нажатием на картинку ‘close’.

Еще две полезные опции, в которых можно определить callback-функции, вызываемые при наступлении определенного события.
changepicturecallback – функция, определенная в этой опции, будет вызываться каждый раз при смене изображения галереи.
callback – функция, определенная в этой опции, будет вызываться при завершении просмотра.

Плюс ко всем этим полезным опциям, плагин предоставляет четыре метода.

$.prettyPhoto.open(‘path/to/image’,'Title’,'Description’) – метод позволяет открыть нужную галерею. Пример будет чуть позже.
$.prettyPhoto.changePage(‘next’) – с помощью этого метода можно осуществить переход к следующему изображению галереи.
$.prettyPhoto.changePage(‘previous’) – с помощью этого метода можно осуществить переход к предыдущему изображению галереи.
$.prettyPhoto.close() – с помощью этого метода можно закрыть галерею.

Самый большой интерес наверняка вызовет метод, с помощью которого можно открыть галерею практически как угодно и откуда угодно. Поэтому смотрим демо. Код там настолько несложный и понятный даже интуитивно, что не стоит его и комментировать.

В общем эта галерея может удовлетворить наверное все потребности веб-мастеров. Кроме одной – слайд-шоу. Чтобы не было обидно, давайте попробуем немного доработать предыдущий пример. Мы дополнительно подключим плагин jquery.timers.js и воспользуемся тем фактом, что в опциях changepicturecallback и callback можно определить функции. В html-разметке добавим select, откуда можно будет выбирать значения задержки при смене изображений. Что из этого получилось, смотрите демо, там же можно посмотреть и исходный код.

В опции changepicturecallback, пользуясь возможностями плагина jQuery Timers, при смене изображений каждый раз запускаем одноразовый таймер со значением, полученным из выбранной опции в селекте. По срабатыванию таймера вызываем метод $.prettyPhoto.changePage(‘next’) заставляя плагин показывать следующее изображение. В опции callback определяем функцию, которая останавливает таймер, если галерея была закрыта и заодно, с помощью alert благодарим за просмотр.

На самом деле такое решение небезгрешно, но зато сделано «на колене в 5 секунд», поэтому кто имеет желание, может в комментариях предлагать свои идеи по этому поводу.

Все примеры, использованные в этой статье, лежат в этом архиве.

Для тех, кто хочет самостоятельно изучить первоисточники, пожалуйста, ссылки: LightBox, NFLightBox, PrettyPhoto.

Выводы: для себя выбрал именно PrettyPhoto…. по крайней мере пока не появилось что-нибудь еще лучше.

Мини фотогалерея из 11 строк кода

Gennady — Thu, 19 Mar 2009 07:00:11 +0000

Собственно я не собирался делать вообще никаких галерей. Просто как обычно отметил для себя довольно часто повторяющийся вопрос – как заставить картинку плавно появиться после ее окончательной загрузки? В общем это не очень сложно, но чтобы придать примеру какую-то практическую пользу я покажу как сделать из этого простенькую мини фотогалерею. Основное ее достоинство в том, что она реализована всего одиннадцатью строками кода, но думаю многим сможет пригодиться, поскольку не всегда бывает нужна мощная функциональность таких галерей как LightBox или FancyBox.

Начинаем с само собой разумеющегося – подключаем библиотеку jQuery:

Постараемся не вносить в HTML-разметку лишних идентификаторов, имен классов, попробуем обойтись минимумом. Для выстраивания миниатюр используем ненумерованный список ul, в каждом элементе li которого и будет содержаться миниатюра. Миниатюре – тэгу img, добавим атрибут alt, в который напишем комментарий к фотографии. Картинку-миниатюру заключим в тэг a, атрибут href которого будет указывать на полноразмерную фотографию. С миниатюрами все. Добавим в HTML-разметку элемент div, в который будем загружать полноразмерные изображения при клике на соответствующую миниатюру и вот ему пожалуй придется присвоить идентификатор #imgHolder. Получилась вот такая простенькая разметка:


  
    
      
    
  
  .......

С помощью CSS оформляем разметку так, как нам понравится.

img { border:none; }
ul { margin:0; padding:0; list-style:none; }
ul li { display:inline; }
#imgHolder {
  position:relative;
  width:800px; height:600px;
  overflow:hidden;
}
#imgHolder em {
  position:absolute;
  left:10px; bottom:10px;
  margin:2px 10px; padding:2px 10px;
  background-color:#000;   color:#fff;
}

В примере – не показываем рамку у изображений, для списка задаем нулевые значения полей и отступов, для элементов li устанавливаем свойству display значение inline, вытягивая таким образом список в строку. Зададим блоку #imgHolder ширину, высоту и на всякий случай свойству overflow присвоим значение hidden. Позиционируем элемент em внутри div‘а абсолютно (сюда будем выводить комментарии к фотографиям) и оформим его соответствующим образом.

Осталось самое главное – эти одиннадцать строк кода, которые заставят работать эту конструкцию. Вот эти строки:

$('ul img').click(function(){
  var path = $(this).parent().attr('href');
  var alt = $(this).attr('alt');
  $('#imgHolder').animate({opacity: 0},1000,function(){
    $(this).html('').find('img').bind('load',function(){
      $(this).parent().append('' + alt + '').animate({opacity: 1},1000);
    });
  });
  return false;
});
$('ul img:first').click();

Давайте подробно, строка за строкой разберемся, что мы тут наделали.

При загрузке страницы, вернее при наступлении момента готовности DOM (кусок кода с $(document).ready() опущен) мы выбираем все элементы img, которые являются потомками элементов ul. Есть у нас такие? Да, есть – это картинки-миниатюры. Связываем с этим набором элементов событие click, при наступлении которого выполним некоторую функцию.

Что же будет делать эта функция? Для начала определяем пару переменных. path – здесь мы запомним значение атрибута href элемента, который является предком картинки-миниатюры, т.е. элемента a. alt – сюда поместим содержимое атрибута alt самой картинки-миниатюры, чтобы впоследствии вывести его в качестве комментария к полноразмерному изображению.

Дальше начинается самое интересное – с помощью метода animate() мы в течение 1000 мс плавно скроем элемент div с идентификатором #imgHolder через задание значения 0 его CSS-свойству opacity. И как только это произойдет начнем действовать дальше, указав в третьем параметре метода animate() callback-функцию, которая будет вызвана в этот момент.

Внутри этой функции this ссылается на элемент div с идентификатором #imgHolder. Помня это обстоятельство, помещаем в этот элемент div фрагмент html-кода, описывающий элемент img – полноразмерную картинку. В атрибуте src которой указываем путь, сохраненный ранее в переменной path. Следуя далее по цепочке вызовов, отыскиваем только что добавленный элемент с помощью метода find() и используя метод bind(), связываем еще одну callback-функцию c событием load – с моментом загрузки полноразмерного изображения.

Внутри этой функции this указывает уже на большую картинку, поэтому мы отыскиваем ее родителя (элемент div #imgHolder) и используя append() добавляем туда em с комментарием, который предусмотрительно сохранили в переменной alt. После этого вновь используем метод animate(), но уже для того, чтобы плавно, в течение 1 секунды показать элемент div #imgHolder с уже загруженной полноразмерной фотографией, устанавливая CSS-свойству opacity значение 1.

return false служит для того, чтобы предотвратить стандартные действия браузера (т.е. переход по ссылке) при клике на элементе a.

Осталась только самая последняя строка кода, которая служит для того, чтобы при загрузке страницы подгрузить в #imgHolder полноразмерную фотографию с помощью эмуляции события click на первой картинке-миниатюре.

Проверил и убедился, что все работает в в FF2 и 3, Opera9, IE6 и 7, Google Chrome.

Вы можете открыть пример в новом окне, испытать его и посмотреть полный исходный код. Вы можете скачать архив, который содержит все файлы примера.

Предупреждая вопросы насчет всяких стрелочек вперед – назад и прочих штучек, хочу сразу напомнить, что это всего лишь пример, с помощью которого я стараюсь объяснить, как плавно скрыть и не менее плавно показать большую картинку только после ее окончательной загрузки.

jQuery FancyBox – отличная фотогалерея

Gennady — Tue, 19 Aug 2008 01:00:54 +0000

Сегодня расскажу о еще одной великолепной галерее – jQuery FancyBox. Тем более, что в последней версии фотогалереи LightBox разработчики вырезали поддержку IE6 (с чем я в общем полностью согласен – надо жалеть разработчиков и обновлять программное обеспечение). Но поскольку не всем это понравится, я обещал подробно рассказать о какой-нибудь другой фотогалерее для jQuery, что с удовольствием и делаю.
Как всегда, сначала пример работы, который на этот раз придется продемонстрировать в новом окне. Надеюсь, что многие оценят возможность отображать не только картинки, но и какой-либо контент, находящийся на странице – например видеоролики с YouTube. А как Вам возможность выводить вообще любой контент в iframe? Или спрятать за одной миниатюрой целую галерею фотографий? Смотрите, испытывайте, а потом будем разбираться как заставить все это работать на своем сайте.

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

Итак приступим: для начала нам потребуется подключить к нашей HTML-странице как минимум два js-файла: jquery-1.2.6.js (библиотека jQuery) и jquery.fancybox.js (плагин FancyBox). Или четыре – jquery.pngFix.js позволит устранить проблему использования png-файлов в IE, а jquery.metadata.js позволит Вам использовать атрибуты class для передачи параметров плагину (впрочем можно обойтись и без этого файла). Сделаем это в разделе HEAD. Не забудем и про файл стилевого оформления, как и про то, что пути у Вас могут отличаться от приведенных в примере…

Теперь о HTML-разметке. Начнем с традиционного варианта использования фотогалереи – отобразим все миниатюры, при клике на которых будет открываться полноразмерное изображение и к нему добавятся элементы управления для перемещения назад и вперед. Я приведу пример, но Вы можете использовать такую разметку, которая нравится Вам.

Картинка-миниатюра заключена в тэг А, который ссылается на полноразмерное изображение. Обратите внимание на атрибут rel тэга А – одинаковые значения означают принадлежность в одной группе изображений, ведь на одной странице Вы можете расположить их и не одну… А значение тэга title используется для вывода комментария к картинке.
В своем примере я использую несколько CSS-правил, чтобы вытянуть список по горизонтали и убрать рамки картинок.

ul {
  list-style:none;
}
ul li {
  display:inline;
}
a img {
  border:none;
}

Теперь о js-коде. Если использовать все значения по умолчанию, то проще не бывает:

$(document).ready(function(){
  $("#gallery a").fancybox();
});

Т.е. мы просто отбираем все нужные нам элементы А и передаем этот набор плагину jQuery FancyBox, который проделывает всю остальную работу. Но можно использовать и дополнительные опции, например вот так:

$(document).ready(function(){
  $("#gallery a").fancybox({
    	overlayShow: true,
    	overlayOpacity: 0.5,
    	zoomSpeedIn: 1500,
    	zoomSpeedOut:600
    });
});

Ниже я привожу весь список доступных опций.
hideOnContentClick – скрывать контент по клику на полноразмерном изображении. Может принимать значения true или false. По умолчанию false.
zoomSpeedIn – указывается скорость эффекта (в миллисекундах) при открытии полноразмерного изображения. По умолчанию – 0, т.е. без эффекта.
zoomSpeedOut – указывается скорость эффекта (в миллисекундах) при закрытии полноразмерного изображения. По умолчанию – 0, т.е. без эффекта.
overlayShow – показывать или нет дополнительный слой, который «затемняет» основное содержимое страницы. Может принимать значения true или false. По умолчанию false.
overlayOpacity – прозрачность для overlayShow, если конечно он true. Изменяется от 0 до 1.
frameWidth – определяет ширину контейнера, если выводится iframe и inline содержимое (см. примеры).
frameHeight – определяет высоту контейнера, если выводится iframe и inline содержимое (см. примеры).
itemLoadCallback – определяет пользовательскую функцию, которая выбирает группу фотографий для отображения (см. пример).

А теперь попробуем «спрятать» за одной миниатюрой целый набор полноразмерных изображений. Вот HTML-разметка для одной миниатюры.

var imageList = [
  {
    url: "/example_jquery/fancybox_img/05.jpg",
    title: "Первая картинка"
  },
  {
    url: "/example_jquery/fancybox_img/05-1.jpg",
    title: "Вторая картинка"
  },
  {
    url: "/example_jquery/fancybox_img/05-2.jpg",
    title: "Третья картинка"
  },
  {
    url: "/example_jquery/fancybox_img/05-3.jpg",
    title: "Четвертая картинка"
  }
];

Мы создаем массив imageList, каждым элементом которого является объект, состоящий из пар ключ/значение. Конечно все уже поняли, что url указывает на размещение полноразмерного изображения, а title – конечно же содержит комментарий к нему. В этом массиве и «прячутся» все большие фотографии.

Теперь определим функцию, которая будет получать эту группу фотографий:

function getGroupItems(opts) {
  jQuery.each(imageList, function(i, val) {
    opts.itemArray.push(val);
  });
}

Нам осталось только передать плагину fancybox необходимый параметр:

$("#custom").fancybox({
  itemLoadCallback: getGroupItems
});

Разберем как вывести в галерею некий контент, находящийся на странице и до поры скрытый, а в качестве примера используем видеоролики с YouTube.

Обратите внимание, чтобы картинка-крестик, по щелчку на котором закрывается галерея, была «выше» собственно содержимого, в код надо внести небольшие изменения добавив параметр wmode со значением transparent.
Осталось показать только js-код:

$("#video").fancybox({
  zoomSpeedIn: 0,
  zoomSpeedOut:0,
  frameWidth: 425,
  frameHeight: 344
});

Ну, и напоследок – вывод в галерею вообще любого содержимого через iframe. Вот простенький HTML:

и javascript-код:

$("#frame").fancybox({
  zoomSpeedIn: 0,
  zoomSpeedOut:0,
  frameWidth: 800,
  frameHeight: 600
});

Согласитесь, действительно хорошая галерея, правда?

jQuery LightBox – отличная фотогалерея.

Gennady — Mon, 11 Aug 2008 01:24:18 +0000

Давно собирался рассказать об этом плагине к библиотеке jQuery, но вот наконец-то собрался ликвидировать этот пробел. Плагин jQuery LightBox пользуется популярностью, и надо сказать вполне заслуженно. Легкий в использовании, гибкий в настройках, что еще нужно организации изящной галереи на сайте?
Давайте, как обычно, начнем с демонстрации работы плагина. Кликните мышкой на первой картинке и посмотрите как работает jQuery LightBox.
Внимание! Эта статья устарела. Новая статья по этой теме: «Галерея LightBox и ее клоны«.

Откройте пример в отдельном окне и посмотрите исходный код.

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

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

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

Для начала подключим в разделе HEAD нашей HTML-страницы нужные файлы, конечно же соблюдая пути к ним (у Вас они могут отличаться):

Затем займемся размещением в теле HTML-страницы миниатюр. Тут простор для творчества – размещайте как, где и сколько хотите миниатюр. Вот например:

Довольно просто: мы разместили миниатюры в списке (Вы можете избрать другой вариант). Самое главное здесь не список, а то, что мы заключили картинку-миниатюру в тэг А, который ссылается на полноразмерное изображение и имеет атрибут rel со значением lightbox-tour. Вот это действительно важно. Собственно Вы могли бы задать значение lightbox-petya или lightbox-1 для всех фотографий галереи. Здесь важно присутствие ключевого слова lightbox, а разные «окончания» всего лишь идентификатор одной группы фотографий – ведь Вы можете разместить на странице и несколько независимых наборов, которые могут включать в себя от 1 до N (сколько влезет) фотографий. И еще – содержимое атрибута title – это описание, прилагаемое при просмотре к полноразмерной фотографии.

Это самый простой и легкий способ использования плагина jQuery LightBox. Есть и еще один, более гибкий способ. Посмотрите код, приведенный ниже. В jQuery-селекторе мы отбираем все элементы А, которые нас интересуют. Но преимущество этого способа даже не в этом, а в том, что тут можно использовать кое-какие опции, которые мы разберем ниже…

Набор опций передается в $.Lightbox.construct({});. В общем-то все опции имеют говорящие названия, но раз обещал их пояснить…
speed – скорость перехода от одной картинки к другой, указывается в миллисекундах.
show_linkback – показывать или не показывать ссылку при просмотре. Принимает значения true/false. По умолчанию true – показывать.
opacity – прозрачность общего фона при просмотре. Изменяется от 0 до 1. По умолчанию установлено 0.9.
keys – тут можно определить клавиши управления при просмотре. Принимает набор из пар ключ/значение. close – ясное дело закрыть, prev – предыдущая картинка, next – следующая. По умолчанию close:c, prev:p, next:n.
text – тут уж совсем пояснять нечего. Просто посмотрите пример…

Я привел не все опции – остальные Вы сможете обнаружить, если откроете файл jquery.lightbox.js и найдете строки 455 – 520.

Что еще можно натворить с jQuery LightBox, чтобы Ваш экземпляр немного отличался от своих собратьев? Пожалуй немного поковырять стилевое оформление в файле lightbox.css. Ну например, чтобы изменить цвет фона с установленного по умолчанию черного на какой-нибудь зеленый, найдите #lightbox-overlay и поменяйте background-color:#0000; на background-color:#00ff00; и так далее…