www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание фотогалереи на сайте
• Создание простой фотогалереи на сайте
• Создание фотогалереи в Photoshop
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея Lightbox с библиотекой Prototype
• Изображения для сайта - размещение, эффекты, прозрачность
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Увеличение изображений. Программа Highslide JS
• Создание слайд-шоу для сайта
>> смотреть все статьи о jQuery
Фотогалерея Photopile - установка и настройка
При создании фотогалереи на сайте обычно сначала решают вопрос размещения миниатюр на странице и их оформления. Чаще всего - это последовательные ряды изображений (таблица) в рамках. Между тем, иногда есть смысл разбросать миниатюры на странице в произвольном положении, с разными поворотами вокруг оси и наложением друг на друга. Для этого можно воспользоваться простой фотогалереей Photopile (Фото-куча), бесплатного плагина jQuery. Приятная особенность этой галереи состоит в том, что картинки каждый раз при открытии страницы разбрасываются по-новому, что, несомненно, вносит "оживляж" в фотогалерею. Кроме того, программа позволяет просматривать изображения в режиме слайд-шоу, что также не может не радовать.
Плагин Photopile разработан в 2014 году Брайаном Хоуэлом (Brian W. Howell), программистом из Флориды (США). Действующий пример работы фотогалереи Photopile показан на рисунке.
Установка фотогалереи Photopile
Для установки фотогалереи Photopile сначала создадим на сайте новую папку и назовём её, как не трудно догадаться, photopile. Эта папка должна находиться в том же каталоге, что и страница с фотогалереей. Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней два скрипта (*.js), вспомогательные картинки (загрузка и кнопки навигации) и файл CSS (*.css). Далее вставим в заголовок страницы с будущей фотогалереей внутрь тега <head>...</head> следующую строчку, указывающую путь к CSS файлу:
<link href="photopile/css/photopile.css" rel="stylesheet" type="text/css" />
Пути к файлам скриптов (внимание!) указываем в самом конце страницы перед закрывающим тегом </body>:
<script type="text/javascript" src="photopile/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="photopile/js/photopile.js"></script>
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>.
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Теперь необходимо разместить на странице сайта нужные изображения. Как обычно, каждое должно быть представлено в виде миниатюры (small) и полноразмерной картинки (big), на которую указывает ссылка с миниатюры. Изображения размещаем с помощью простого неупорядоченного списка:
<div class="photopile-wrapper">
<ul class="photopile">
<li> <a href="big_01.jpg"> <img src="small_01.jpg" alt="Надпись 1" width="160" height="107" /> </a></li>
<li> <a href="big_02.jpg"> <img src="small_02.jpg" alt="Надпись 2" width="100" height="70" /> </a> </li>
. . . . . . . . . . . . . . . . . . . .
<li> <a href="big_NN.jpg"> <img src="small_NN.jpg" alt="Надпись NN" width="" height="" /> </a> </li>
</ul>
</div>.
Если необходимо сделать надписи к изображениям, то размещаем их в атрибуте alt изображений.
Важное замечание: если размер основного изображения (big.jpg) больше размера экрана в браузере пользователя, то Photopile автоматически подгоняет (уменьшает) его под размер экрана. При этом увеличенная картинка всегда вписывается в экран, независимо от того, какое устройство используется для просмотра: смартфон, планшет или монитор высокого разрешения.
Поэтому желательно, чтобы большие изображения имели запас по разрешению, например, не менее 800 пиксел по вертикали для стандартного экрана Full HD - 1920х1080. В нашем примере, это картинка "Субботник".
Настройка фотогалереи Photopile
Для настройки фотогалереи откройте файл photopile.js в любом HTML- или текстовом редакторе, например, в Блокноте. В самом начале файла увидите доступные настройки:
var thumbOverlap = 10; // перекрытие (наложение) изображений (px)
var thumbRotation = 45; // поворот миниатюр (град)
var thumbBorderWidth = 2; // ширина границы миниатюр (px)
var thumbBorderColor = 'white'; // цвет границы
var thumbBorderHover = '#EAEAEA'; // цвет границы изображений активной ссылки
и т.д.
Основные пункты снабжены комментариями на русском языке. Изменяйте значения параметров, и после сохранения файла photopile.js можете наблюдать результат, открыв страницу с вашей фотогалереей в браузере.
Некоторые параметры окна галереи Photopile, например, ширина, отступы и другие, как обычно, задаются в CSS-файле photopile.css. и также снабжены комментариями на русском языке.
И под конец, ложка дегтя. Фотогалерея Photopile не работает в браузере IE ниже IE8 (must die). Надеюсь, что вы уже давно не используете это безобразное старьё!
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
27.10.2014г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru