Скрипты галерей изображений на CSS

Скрипты галерей изображений на CSS

В продолжение статьи о скриптах галерей на JS, сегодняшняя статья посвящена скриптам галерей, которые сделаны исключительно средствами CSS.

Их естественный плюс в том, что они могут работать даже в том случае, если у пользователя отключен JavaScript.

Галерея фотографа

Очень простая и легкая в эксплуатации галерея. Можно добавлять примечания к каждой из картинок. Вам нужен красивый и удобный фотоальбом? Значит это ваш выбор.

галерея фотографа

Простенький CSS фотоальбом

Весьма незамысловатая галерея. Показывается номер картинки и соответственно сама картинка. Но, ни номер, ни рисунок не помечены больше ничем. Одна из самых простых галерей.

Простенький css-фотоальбом

Многостраничная галерея фотографа

Основано на Suckerfish HoverLightbox. Картинки могут быть разбросаны по темам, что, несомненно, очень удобно для посетителей ваших галерей. А, следовательно, посетителей будет больше… Рисунки, при наведении на них курсоом мышки, увеличиваются.

Многостраничная галерея фотографа

CSS-ная картинная галерея

Основанная на CSS галерея. Картинки представлены в маленьком размере, но опять же при наведении на курсором мышки, они отображаются на экране увеличенными. И опять же довольно простая в обращении.

СSS-ная картинная галерея

СSS-ная фото-витрина

Использует CSS. Никаких особых наворотов в этой галерее нет. Самая обычная галерея. Всё просто – а простота ещё никому не мешала.

СSS-ная фото-витрина

Галерея Hoverbox

По сути, это фото галерея, которой ничего не нужно, кроме CSS. И притом весит всего 8КБ!

Галерея Hoverbox

Галерея Photo-scroll

Комбинация некоторых предыдущих галерей. Ничем особенным она не отличается от предыдущих, представленных на нашем сайте. Такая же простая и лёгкая в обращении.

Галерея Photo-scroll

«Раздвижная» галерея фотографа

Эта галерея сразу бросается в глаза своей непохожестью на все остальные. Смотрится очень оригинально: картинки сжаты по вертикали (между прочим сокращение 8:1) и, проводя курсором над одной из картинок, та увеличивается до своих нормальных размеров. Также может быть уменьшено не только по вертикали, но и по горизонтали.

Раздвижная галеря фотографа

Перевод с сайта Smashing Magazine.

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 21

Сергей
А я сделал себе галерею на 4images уже http://gallery.8school.org.ua/ А так бы использовал один из ваших примеров, спасибо!
#
Сергей
Alexpts
Отличная статья, давно хотел сделать галерею на CSS для WordPress блога.
#
Alexpts
Alexpts
А можете рассказать как сделать такое же добавление комментариев (на аяксе)?
sda
Нашел что искал, не думал что на css можно создать галерею. Хотя я ток начинаю.... еще раз спасибо
#
sda
newzna
вот искал php или java скрипт похожий на "«Раздвижная» галерея фотографа". короче эта удовлетворила больше.
Clone89
Спасибо, очень много примеров, доходчивое описание.
В закладки.
#
Clone89
Олег
А самые интересные галереи все таки остались на smashingmagazine:
http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/

Советую эти две:
http://smoothgallery.jondesign.net/showcase/gallery/
http://slideshow.triptracker.net/

Очень красивые!
#
Олег
Владимир
Очень хороший сайтик!)
огромное спасибо!
#
Владимир
Саша
Отличная галерея...Попробую её поюзать!
Алексей
Спасибо огромное, нашел то что нужно! А главное, что работает просто и быстро, без примудростей.
Роман
Спасибо, парочку скачал)
Алёна
А у меня при загрузки плагинов пишется - нет корректного заголовка у плагина ..., это что значить может?
FOXMAN
Спасибо, я всё сделал на своём сайте)) Огромное СПС
Сергей
Спасибо! То что искал на CSS. Просто и со вкусом!
Stepa
Классные скрипты галерей!!!
#
Stepa
Андрей
Подскажите как скачать, одну скачал, хотел еще парочку, но чет не получается...
#
Андрей
Валерий
А как вам такая? - http://lecaw.ru/index.php/categories/css/item/286-kak-sozdat-animirovannuyu-gallereyu-izobrazheniy
#
Валерий
Андрей
Большое спасибо за ваш классный продукт
Андрей
да да - спасибо
Андрей
Классные скрипты!
ого
И ниодного архива :( как юзать?
#
ого

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler