www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание фотогалереи на сайте
• Создание простой фотогалереи на сайте
• Создание фотогалереи в Photoshop
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея Lightbox с библиотекой Prototype
• Изображения для сайта - размещение, эффекты, прозрачность
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Увеличение изображений. Программа Highslide JS
• Создание слайд-шоу для сайта
>> смотреть все статьи о jQuery
Swipebox - фотогалерея для мобильной версии сайта.
Установка и настройка
При разработке мобильной версии сайтов одним из важных моментов является выбор программы фотогалереи. Классические фотогалереи обычно имеют навигацию с помощью кнопок, что не очень удобно на маленьком экране смартфона. Основные требования мобильного варианта - автоматическое масштабирование изображений под экран смартфона (планшета) и возможность прокрутки картинок движением пальца. Также желательно, чтобы фотогалерея хорошо смотрелась и при просмотре сайта на обычном десктопе.
Плагин Swipebox французского дизайнера Constantin Saguin хорошо адаптирован под мобильные устройства. Это один из вариантов популярной бесплатной фотогалереи Lightbox, созданной на основе jQuery. Плагин Swipebox легко встраивается в сайт, корректно выводит изображения на любых компьютерных мониторах, планшетах и смартфонах, сжимая их в соответствие с размером экрана пользователя, имеет привлекательный дизайн и работает во всех современных браузерах: Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, Windows Phone.
В настоящее время (2016 год) доступна версия Swipebox v1.4.4, на примере которой и рассмотрим установку плагина на сайт. Результат работы по разворачиванию одиночного изображения c помощью Swipebox показан на рисунке справа.
Установка фотогалереи Swipebox
Для установки фотогалереи Swipebox сначала создадим на сайте новую папку, назвав её, как не трудно догадаться, swipebox. Эту папку желательно для простоты разместить в том же каталоге, что и страница с фотогалереей. Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней три скрипта (*.js), вспомогательные картинки (папка img) и файл CSS (*.css). Далее вставим в заголовок страницы с будущей фотогалереей внутрь тега <head>...</head> следующие строчки, указывающие пути к нашим новым файлам, и скрипт инициализации плагина.
<link rel="stylesheet" href="swipebox/lib/swipebox.css"/>.
<script src="swipebox/lib/ios-orientationchange-fix.js" type="text/javascript"></script>
<script src="swipebox/lib/js/jquery-2.1.0.min.js" type="text/javascript" ></script>
<script src="swipebox/lib/js/jquery.swipebox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$( ".swipebox" ).swipebox();
});
</script>
Размещение изображений на странице сайта не имеет каких-либо особенностей. Нужные изображения, как обычно, представлены в виде миниатюры (small) и полноразмерной картинки (big), на которую указывает ссылка с миниатюры. В теге ссылки дополнительно указываем class="swipebox".. Если хотим объединить в галерею несколько картинок, то необходимо добавить атрибут rel, одинаковый для всех картинок, например, rel="gallery-1".
<a href="big_01.jpg" class="swipebox" rel="gallery-1" title="Надпись"><img src="small_01.jpg" alt=" " width=" " height=" " /></a>
<a href="big_02.jpg" class="swipebox" rel="gallery-1" title="Надпись"><img src="small_02.jpg" alt=" " width=" " height=" " /></a>
и так далее.
Если необходимо сделать надписи к изображениям, то размещаем их в title ссылок.
Пример простой фотогалереи из трех изображений показан на рисунке:
|
 |
 |
|---|
Замечание: если размер основного изображения (big.jpg) больше размера экрана в браузере пользователя, то Swipebox автоматически подгоняет (уменьшает) его под размер экрана. При этом увеличенная картинка всегда вписывается в экран, независимо от того, какое устройство используется для просмотра: смартфон, планшет или монитор высокого разрешения.
Поэтому желательно, чтобы большое изображение имело запас по разрешению, например, не менее 1000 пиксел по вертикали для стандартного экрана Full HD - 1920х1080. В нашем примере, это картинка "Субботник".
Настройка фотогалереи Swipebox
Для настройки фотогалереи откройте файл jquery.swipebox.js в любом HTML- или текстовом редакторе, например, в Блокноте. В самом начале файла увидите доступные настройки:
removeBarsOnMobile : false, // true - скрывать кнопки навигации вперед/назад на мобильных устройствах
hideCloseButtonOnMobile : false, // true - скрывать кнопку закрытия на мобильных устройствах
hideBarsDelay : 3000, // длительность показа кнопок навигации (задержка скрытия в мсек)
videoMaxWidth : 1140, // максимальная ширина видео (пиксели)
loopAtEnd: false, // true - возврат с последнего изображения на первое
и т.д.
Основные из них снабжены комментариями на русском языке. Изменяйте значения параметров, и после сохранения файла jquery.swipebox.js можете наблюдать результат, открыв страницу с вашей фотогалереей на компьютере или смартфоне (планшете).
Некоторые параметры окна галереи, например, цвет фона и его прозрачность, цвет надписи и др. задаются в CSS-файле swipebox.css. Вспомогательные картинки (вперед, назад, загрузка, выход) расположены в папке img, и их также можно менять на ваше усмотрение.
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
8.07.2016г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru