Фотогалерея

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

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

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

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

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

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

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