www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание фотогалереи на сайте
• Создание простой фотогалереи на сайте
• Создание фотогалереи в Photoshop
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея Lightbox с библиотекой Prototype
• Изображения для сайта - размещение, эффекты, прозрачность
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Увеличение изображений. Программа Highslide JS
• Создание слайд-шоу для сайта
>> смотреть все статьи о jQuery
Фотогалерея Fancybox - установка и настройка
Фотогалерея Fancybox (Фантастический бокс, коробка) - популярный плагин для бесплатной библиотеки скриптов jQuery, один из самых удачных клонов фотогалереи LightBox (см. статью Фотогалерея jQuery - просто и красиво!). Разработчик - латвийский программист Janis Skarnelis. В настоящее время (май 2013 г.) предлагается уже третья версия этого плагина, а также вариант для мобильных устройств. Если вы планируете коммерческое использование плагина Fancybox, то учтите, что это удовольствие платное (цена от 600 руб.).
Fancybox позволяет выводить в окне не только изображения, но и самый разнообразный контент: видео, iframe, HTML и др. Картинки можно прокручивать как кнопками вперед/назад, так и колесом мыши. Программа имеет несколько настроек режима вывода картинок, скорости перелистывания, вида надписей под картинками и др. Пример использования Fancybox для фотогалереи на сайте показан на рисунке (версия V.1.3.3 2010 года). Пример рабочий, кликайте на здоровье!
 |
 |
 |
|---|
Установка фотогалереи Fancybox
Для установки фотогалереи Fancybox сначала создадим на сайте новую папку, назвав её, чтобы не путаться, fancybox. Эта папка должна находиться в том же каталоге, что и страница с фотогалереей. Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней четыре скрипта (*.js), вспомогательные картинки (images) и таблица CSS (*.css). Далее вставим в заголовок страницы с будущей фотогалереей внутрь тега <head>...</head> следующие строчки, указывающие пути к нашим новым файлам, и небольшой JavaScript для инициализации фотогалереи Fancybox:
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.3.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".gallery a").fancybox(); // выбор всех ссылок с классом gallery
});
</script>
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>.
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Теперь необходимо разместить на странице сайта нужные изображения. Как обычно, каждое должно быть представлено в виде миниатюры (small) и полноразмерной картинки (big), на которую указывает ссылка с миниатюры. Размещаем их в соответствие с дизайном сайта, например, в нашем случае - это контейнер <table>...</table>.
Для него указываем класс class="gallery". Если необходимо выводить несколько изображений в одной галерее, надо в каждую ссылку добавить атрибут rel="group_1". Его значение может быть любым, но одинаковым для всех элементов одной галереи. Таким образом можно создать на странице несколько фотогалерей, давая им разные имена в атрибуте rel, например, group_1, group_2 и т.д. Для вывода одиночных изображений rel не нужен.
Важное замечание: если размер основного изображения (big.jpg) больше размера экрана в браузере пользователя, то Fancybox автоматически подгоняет (уменьшает) его под размер экрана. При этом увеличенная картинка всегда вписывается в экран, независимо от того, какое устройство используется для просмотра: смартфон, планшет или монитор высокого разрешения.
Поэтому желательно, чтобы большое изображение имело запас по разрешению, например, не менее 1000 пиксел по вертикали для стандартного экрана Full HD - 1920х1080. В нашем примере, это картинка "Субботник".
Следовательно, для показанной вверху фотогалереи имеем следующий HTML-код:
<table width="90%" border="1" align="center" cellpadding="3" cellspacing="0" bgcolor="#FFCC99" class="gallery">
<tr >
<th width="33%" ><a href="big_01.jpg" rel="group_1" title="Субботник"><img src="small_01.jpg" alt="Фотогалерея" width="160" height="107" /></a></th>
<th width="34%" ><a href="big_02.jpg" rel="group_1" title="Выездная торговля"><img src="small_02.jpg" alt="Фотогалерея" width="160" height="107" /></a></th>
<th width="33%" ><a href="big_03.jpg" rel="group_1" title="Гена и Чебурашка"><img src="small_03.jpg" alt="Фотогалерея" width="160" height="107" /></a></th>
</tr>
</table>
Настройка фотогалереи Fancybox
Для настройки фотогалереи Fancybox откройте файл jquery.fancybox-1.3.3.js в любом HTML- или текстовом редакторе, например, в Блокноте. В самом его конце увидите доступные настройки, например:
overlayShow : true, //затемнение основной страницы (фон) true/false
overlayOpacity : 0.8, //прозрачность фона
overlayColor : '#777', //цвет фона
titleShow : true, //вывод надписей под изображениями
width : 560, //ширина окна
height : 340 //высота окна
и так далее...
Основные из них снабжены комментариями на русском языке. Изменяйте значения параметров и после сохранения файла jquery.fancybox-1.3.3.js можете наблюдать результат, открыв страницу с вашей фотогалереей в браузере.
Вспомогательные картинки (вперед, назад, загрузка, выход и др.) расположены в папке images, и их также можно менять на ваше усмотрение.
Как сказано выше, кроме изображений, Fancybox может выводить в окне и другой контент, например, видео, iframe, HTML и др. Так как наша тема - создание фотогалереи на сайте, то подробно этот вопрос рассматривать не будем. При необходимости, вы легко найдете соответствующие инструкции в интернете, например, в статье Евгения Попова "FancyBox - фотогалерея + модальные окна". Замечу только, что вывод другого контента также реализуется очень просто, и для примера, посмотрим, как c помощью Fancybox вывести содержимое любой HTML-страницы.
Для этого необходимо добавить несколько строк в размещенный вверху страницы код инициализации Fancybox:
<script type="text/javascript">
$(document).ready(function() {
$(".gallery a").fancybox(); // выбор всех ссылок с классом gallery
$("a.iframe").fancybox({ // выбор всех ссылок с классом iframe
width : 560,
height : 340
});
});
</script>
Для вывода HTML-страницы следует использовать следующую конструкцию ссылки:
<a class="iframe" href="URL страницы" title="Текст подписи в окне">Текст или картинка</a>.
Размеры окна, в котором будет выведена страница, устанавливаются в коде инициализации (параметры width и height), или аналогично в файле jquery.fancybox-1.3.3.js также параметрами width и height (см. выше).
Один из примеров использования Fancybox для вывода HTML-страницы рассмотрен в статье "Применение Jquery для формы обратной связи".
Подводя итог, скажу, что фотогалерея FancyBox пользуется популярностью у разработчиков сайтов из-за простоты установки, приятного дизайна вывода галереи изображений, а также возможности работы с разнообразным контентом и поддержки большинством браузеров. Из недостатков отмечу отсутствие вывода номера изображения типа "Изображение X из N", но возможно, в новых версиях эта функция будет добавлена.
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
19.05.2013 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru