Простая фотогалерея (CSS) без использования java скриптов

Интересное решение для простой фотогалереи, в которой не используются java-скрипты – всё работает на простых трюках со стилями блоков (CSS).

Простая галерея фотографий без Java-скриптов

В основе работы такой галереи лежит принцип замены изображения, которое показано в определенной части страницы. Здесь применяется небольшой трюк с анкором («якорем») в свойствах тега ссылки <a>.

Собственно галерея состоит из двух блоков: слева эскизы все картинок галереи, справа – изображение, которые «активно» в данный момент и показано в полном размере.

Пример, который описывается в этом посте, можно посмотреть по ссылке. Также там в исходном коде всё прописано понятно и без чего-то лишнего.

Фотогалерея без использования java-скрипта будет работать, когда прописаны уникальные имена <name> для каждого якоря, который указывает на определенную картинку (типа, <pic1>, <pic2> и так далее).

Создание галереи фотографий на CSS

Нам надо подготовить эскизы (preview) для каждой фотографии, которая будет размещена в галереи без java-cкриптов. Собственно HTML-код блоков с картинками выглядит примерно так:

Названия блоков: gallery – галерея, nav – навигация, images – полноразмерные фото, остальные атрибуты уникальны для каждой картинки и ее эскизу (картинки – image1…5.jpg, эскизы – preview1…5.jpg).

Это интересно:  Оригинальные тексты Яндекса принимают статьи только от сайтов с тИЦ от 10. Новичков можно грабить

Чтобы галерея фотографий без java-скриптов работала, нужны правильные параметры каскадных стилей (CSS). Для нашего примера это выглядит примерно так.

Правый блок с большими картинками должен иметь ширину самой большой картинки, понятное дело. Для него устанавливаются атрибут overflow:hidden. Фотографии-ссылки находятся внутри этого блока (см. выше).

Маленькие картинки являются ссылками на соответствующие им большие фотографии.

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

CSS-код для фотогалереи

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Самое интересное в блоге

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

четырнадцать + четырнадцать =