Фотогалерея на CSS Предыдущий пример хоть и прост в реализации, но слишком тяжел. И больше похож на « костяк » простого сайта. Поэтому, чтобы не использовать в реализации фотогалереи несколько взаимосвязанных веб-документов, для обработки события ( нажатия на превью картинки ) можно воспользоваться возможностями Javascript . Но пока мы воздержимся от программирования, и в следующем примере реализуем фотографию на основе CSS : Нажатие на превьюшку фотографии приведет к увеличению масштаба. Кроме этого фотогалерея « умеет » подстраиваться под размеры окна браузера, пропорционально изменяя длину и ширину превью ( уменьшая или увеличивая ). И все это лишь с помощью CSS и легкой html структуры: Html код примера, как создать фотогалерею на сайте: #gall < position: relative; padding-top: 50%; -moz-user-select: none; user-select: none; >#gall img < position: absolute; top: 25%; left: 12.5%; max-width: 24.5%; max-height: 49.5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: zoom-in; transition: .2s; >#gall img:nth-child(4n-2) #gall img:nth-child(4n-1) #gall img:nth-child(4n) #gall img:nth-child(n+5) #gall img:focus < position: absolute; top: 50%; left: 50%; z-index: 1; max-width: 100%; max-height: 100%; outline: none; pointer-events: none; >#gall img:focus ~ div Фотогалерея на основе Jquery Кроме « непрограммных » образцов на сайте можно использовать фотогалереи, написанные на Jquery . Самостоятельное создание галереи на основе этой библиотеки потребует специальных знаний и навыков. Легче найти уже готовый вариант в интернете и установить его на свой сайт. Мы советуем Galleria . Она обладает широким набором параметров для настройки. И корректно отображается на большинстве мобильных устройств, работающих под управлением популярных операционных систем: Скрипт фотогалереи для сайта представляет собой архив, из которого нужно извлечь программные файлы и разместить у себя на сайте. Рассмотрим пошагово пример подключения Galleria к обычному html сайту: Для проверки подключения библиотеки в тело страницы поместим проверочный скрипт: Если подключение произведено корректно, то при запуске веб-страницы в браузере будет отображен соответствующий текст: Установка Galleria – на данном этапе следует скачать архив с фотогалереей для сайта и распаковать его в директорию, где находятся наш html файл. Для подключения плагина размещаем следующий код сразу под строкой, с помощью которой мы в предыдущем шаге включили поддержку Jquery : А для проверки работоспособности плагина вместо предыдущего отладочного кода поместим этот: Если галерея подключена правильно, то в браузере отобразится надпись « Galleria works »: Устанавливаем параметры галереи и добавляем в нее изображения – сначала с помощью класса CSS установим длину, ширину и цвет галереи. Для этого пропишем значение соответствующих стилевых свойств. Затем добавляем изображения для показа: Активируем плагин и устанавливаем тему фотогалереи для сайта – чтобы сделать это, сразу под слоем изображений размещаем следующие строки кода: В примере мы устанавливаем классическую тему. На сайте плагина доступны для скачивания и другие темы оформления , но все они платные: Приведем весь код примера страницы с подключенным плагином: .galleria