Удобный просмотр изображений на сайте

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

Фотографии, картинки и прочие изображения являются немаловажной частью любого информационного ресурса, а их просмотр должен быть удобным и непринужденным, а не превращаться в изнурительное перелистывание страниц пагинации и ожидании загрузки интернет страницы с изображением. Для просмотра фотографий в фотогалерее удобнее всего использовать специальные javascript скрипты / приложения, которые интегрируются в интернет страницы. Существует множество решений по реализации этой функции, вот некоторые из них: Lightbox, Pretty photo или High slide, но они в силу разных причин меня не устраивают. Как веб разработчик, я рекомендую использовать скрипт просмотра изображений с сайта pgood.ru, который называется Viewbox. Из преимуществ этого скрипта могу отметить следующие:

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

Для работы скрипта понадобится библиотека jQuery. Утановка скрипта на HTML страницу предельно простое и сводится к подключению файла стилей (CSS), подключению javascript файла с основным функционалом и вызову функции для инициализации механизма просмотра изображений на сайте.

Viewbox можно скачать на Github.

1 thought on “Удобный просмотр изображений на сайте”

  1. Интересный скрипт. Есть возможность сделать варианты изображений в миниатюре на рамке изображений с возможностью переходить к просмотру их?

Leave a Reply

Your email address will not be published. Required fields are marked *