Простейшая галерея для сайта

Приветствую всех посетителей сайта! Не так давно мне попалась на глаза настолько простая галерея (прямо мечта всех новичков), что я не удержалась поделиться ею с вами. У многих начинающих вебмастеров с галереями зачастую возникают проблемы, одни не знают, как правильно скрипт подключить, другие не умеют править стили, третьим с превьюшками некогда заморачиваться...

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

Галерея, которую я вам предложу, не требует подключения скриптов, настройки стилей или создания превью, всё намного проще:)) От вас лишь потребуется вставить готовый код на страницу, в котором прописать названия своих картинок и загрузить страницу на хостинг. Конечно, какого-то особого функционала от такой галереи ждать не стоит, но функцию просмотра полноразмерных изображений она исправно выполняет.

Картинки для этой галереи можно загружать любые, не обязательно, чтобы они все были одинакового размера. Хотя при одинаковом размере галерея смотрится намного аккуратнее. Я для примера взяла восемь картинок разного размера, в итоге они равномерно распределились по всей ширине страницы.

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

На скриншоте ниже показано изображение в режиме полноэкранного просмотра.
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
Проект для новичков
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
2010 - 2017 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
ПОДРОБНЕЕ

Не забудь заглянуть в свою почту и подтвердить подписку!
Как установить такую галерею на свою страницу. Весь процесс можно разделить на три простых шага.

Шаг 1. Скачать код галереи и вставить его на свою страницу в том месте, где вы хотите видеть галерею. Для продвинутых: стили галереи можно закинуть в общие стили сайта, предварительно при желании подкорректировав под себя.

Шаг 2. В html-коде исходные названия картинок заменить на свои. Загрузить используемые картинки на сервер в папку images.

Шаг 3. Опубликовать страницу с галереей и проверить ее на работоспособность. Всё! В результате должны получить примерно следующее:
Для того, чтобы добавить в галерею больше картинок, скопируйте нужное количество строк кода (см. скриншот 2) и вставьте их ниже до первого закрывающего тега div, заменив названия на новые. Добавить в галерею можно любое количество изображений, ограничений нет.

Рамочку вокруг картинок можно изменить либо убрать вовсе. За рамочку отвечает вот этот фрагмент кода: border: solid 4px gray. В нем мы задаем обводку, в примере это сплошная линия (solid) толщиной 4px и серого цвета (gray). Чтобы убрать рамочку, просто вырежьте этот участок кода напротив каждого изображения.

Вот такая простейшая галерея с установкой в несколько минут:)) Никаких скриптов, возни с превью, работает исключительно на CSS. Возможно, кому-то пригодится...

Посмотреть демо

Скачать код


Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).


P.S. Подписчики в этом выпуске рассылки бесплатно получат отличную подборку бесшовных фонов на новогоднюю тематику. В архиве 60 фонов высокого разрешения с одного из стоков стоимостью 9 баксов.

Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!