Фотогалерея

Фотогалерея

C сайта Вадима Дунаева dunaevv1.narod.ru

Как сделать фотогалерею на сайте

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

В данной фотогалерее лента с миниатюрами прокручивается, а щелчок на миниатюре приводит к отображению соответствующей картинки в области экспозиции (так будем называть область отображения выбранной картинки). Выбор отображаемой картинки в области экспозиции возможен также и посредством навигационных клавиш. По умолчанию графическое изображение масштабируется так, чтобы оно вписалось в заданную область экспозиции с сохранением оригинальной пропорции между шириной и высотой. Вместе с тем, можно показать его и в оригинальных размерах (1:1), указанных во всплывающих подсказках миниатюр, а также увеличить (+) или уменьшить (-) с соблюдением оригинальной пропорции. Следует отметить, что сама область экспозиции никак не выделяется: вы видите только картинку, вписанную в нее с сохранением оригинальной пропорции.

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

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

Примечание

В Firefox 4 - 7, в отличие от Opera, Chrome и Safari, проявляется дефект отображения картинки, если она была сначала перемещена, а затем масштабирована: остается след тени. Однако в Firefox 3.x этот дефект отсутствовал. В Firefox 8.0 он наконец-то был устранен, но появился в последующих версиях до 18-ой. В 18-ой версии указанный недостаток наконец-то устранён.

Фотогалерея встраивается на страницу посредством сценария, вызывающего функцию:

 photogallery(images,left,top,width,height,countlenta,isshadow)
   Параметры:
   images - массив адресов файлов с картинками;
   left, top - координаты (числа) верхнего левого угла фотогалереи
                      относительно верхнего левого угла страницы
                      (по умолчанию 0);
   width, height - ширина и высота (числа) области экспозиции
                          выбранной картинки (по умолчанию 320, 240);
   countlenta - количество миниатюр, одновременно видимых на
                       ленте;если null (не указан), то выбирается
                       минимум из 5 и количества всех картинок;
                       если 0, то лента с миниатюрами не отображается;
   isshadow - определяет, требуется ли затемнять фон;
                     если null (не указан), то фон не затемняется;
   comments -  массив текстовых комментариев к картинке,
                      показываемой в области экспозиции (не обязательно).
 

Другие параметры определяются с помощью CSS, а также в коде функции. Например, чтобы изменить продолжительность экспозиции картинки в режиме слайдшоу, достаточно установить соответствующее значение параметра pG[xid].duration (по умолчанию оно равно 1000 мс). Среди стилевых параметров я использовал некоторые свойства CSS3 (закругленные углы, тени), которые воспринимаются всеми основными браузерами (Firefox, Opera, Chrome, Safari) за исключением IE 8 и более ранних версий. Таким образом, внешний вид элементов фотогалереи в Internet Explorer и других браузерах немного различается.

Инструкция по применению

Фотогалерея определена в двух файлах: photogallery.css и photogallery.js. Архив (photogallery.zip) с этими файлами можно скачать.
Чтобы встроить фотогалерею в документ, необходимо выполнить следующее: