ivan386 7 окт 2011 в 16:51

NoScript фотоальбом

4 мин

6.2K

Сейчас уже многие сайты не обходятся без JavaScript, и частенько приходится выключать NoScript для того чтобы, увидеть что же нам хотели показать. И вот я задался мыслью сделать легкий компактный фотоальбом на одной странице без JavaScript. Был использован лишь HTML и CSS.

Задача:
1 Большое изображение полностью занимает доступное пространство.
2 Миниатюры также максимально заполняют его.
3 Никаких кликов мышью (но можно и так) и прокручивания для просмотра следующего изображения (ну разве что если миниатюр больше чем на экран).
4 Просмотр с помощью клавиатуры и мыши.
5 Без скриптов.
6 С сохранением обратной совместимости.

Для реализации были выбраны псевдоклассы :hover и :focus

Заготовка простая (в начале была немного сложней):

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NoScript Album</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
<link rel="stylesheet" type="text/css" href="imgs.css" />
<base target="_blank" />
</head>
<body>


<a href="http://kirpich.example.com/imgs/rust/rust_vid-1.jpg" id="lnk0" class="lnk">
<img src="http://kirpich.example.com/thmb/rust/rust_vid-1.jpg" alt=" ">
</a>

<a href="http://kirpich.example.com/imgs/fjord/fjord_vid-1.jpg" id="lnk1" class="lnk">
<img src="http://kirpich.example.com/thmb/fjord/fjord_vid-1.jpg" alt=" ">
</a>

<a href="http://kirpich.example.com/imgs/shater/shater_enter.jpg" id="lnk2" class="lnk">
<img src="http://kirpich.example.com/thmb/shater/shater_enter.jpg" alt="" >
</a>

<a href="http://kirpich.example.com/imgs/osenniy_list/vid1.jpg" id="lnk3" class="lnk">
<img src="http://kirpich.example.com/thmb/osenniy_list/vid1.jpg" alt=" ">
</a>

<a href="http://kirpich.example.com/imgs/vsevologsk1.jpg" id="lnk4" class="lnk">
<img src="http://kirpich.example.com/thmb/vsevologsk1.jpg" alt=" ">
</a>

<a href="http://kirpich.example.com/imgs/luch/Sertolovo.jpg" id="lnk5" class="lnk">
<img src="http://kirpich.example.com/thmb/luch/Sertolovo.jpg" alt=" ">
</a>

<a href="http://kirpich.example.com/921-1_.jpg" id="lnk6" class="lnk">
<img src="http://kirpich.example.com/thmb/921-1_.jpg" alt=" ">
</a>

<a href="http://kirpich.example.com/917-1.jpg" id="lnk7" class="lnk">
<img src="http://kirpich.example.com/thmb/917-1.jpg" alt=" ">
</a>

</body>
</html>

Такой альбом без CSS работает «по старому» и выглядит прилично.

Немного изменим вид:

body{
background-color: #555555;
color: white;
height: 100%;
}

.lnk{
display: block;
float: left;
margin-bottom: 10px;
margin-left: 10px;
overflow: hidden;
}

.lnk .img{
position: relative;
z-index: 3;
margin-bottom: 10px;
border: 1px solid black;
overflow: hidden;
display: table-cell;
height: 100px;
vertical-align: middle;
background-color: #555555;
}

img{
vertical-align: middle;
border: 0px;
width: 100px;
}

Подготовим поверхности для отображения:

.lnk:hover:after{
content: " ";
}

.lnk:focus, .lnk:hover:after{
background-color: #555555;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
cursor: crosshair;
}

Растягиваем слои на все окно:

.cover, .lnk:hover:after, .lnk:focus{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
margin: 0px;
}

Скрываем изображения сохраняя «отзывчивость»:

.hide:hover .img{
opacity: 0.01;
filter: alpha(opacity = 1);
cursor: crosshair;
}

Укрываем .hide чтобы :hover срабатывал только на изображениях:

.cover{
z-index: 2;
}

Выносим .lnk наверх, чтобы тот собой укрыл другие изображения:

.lnk:focus{
z-index: 4;
}

Скрываем миниатюру:

.lnk:focus .img{
display: none;
}

И показываем следующую:

.lnk:focus + .lnk {
position: fixed;
bottom: 20px;
right: 0px;
z-index: 4;
}

Убираем с неё прозрачность:

.lnk:focus + .lnk .img{
opacity: 1;
filter: alpha(opacity = 100);
border: 1px solid black;
}

Скрываем большое изображение, если рядом миниатюра в фокусе:

.lnk:focus + .lnk:after{
display: none;
}

Ну и в отдельном файле загружаем изображения:

#lnk0:focus, #lnk0:hover:after{
background-image: url('http://kirpich.example.com/imgs/rust/rust_vid-1.jpg');
}
#lnk1:focus, #lnk1:hover:after{
background-image: url('http://kirpich.example.com/imgs/fjord/fjord_vid-1.jpg');
}
#lnk2:focus, #lnk2:hover:after{
background-image: url('http://kirpich.example.com/imgs/shater/shater_enter.jpg');
}
#lnk3:focus, #lnk3:hover:after{
background-image: url('http://kirpich.example.com/imgs/osenniy_list/vid1.jpg');
}
#lnk4:focus, #lnk4:hover:after{
background-image: url('http://kirpich.example.com/imgs/vsevologsk1.jpg');
}
#lnk5:focus, #lnk5:hover:after{
background-image: url('http://kirpich.example.com/imgs/luch/Sertolovo.jpg');
}
#lnk6:focus, #lnk6:hover:after{
background-image: url('http://kirpich.example.com/921-1_.jpg');
}
#lnk7:focus, #lnk7:hover:after{
background-image: url('http://kirpich.example.com/917-1.jpg');
}

К сожалению влиять на родителя может только :hover, и для соседа до элемента тоже ничего не придуманно похоже.

Итак, чтож у нас получилось?

При «касании» миниатюры изображения отображается его полная версия, миниатюры становятся прозрачными. При фокусе на миниатюре .lnk укрывает собой миниатюры и отображает большое изображение.

Мышью просто перемещаемся с миниатюры на миниатюу.
Клавиатурой при помощи Tab или Shift+Tab (Opera: Ctrl+Up или Ctrl+Down).

Справочником служил htmlbook.ru.

P.S. Internet Explorer не полностью поддерживает функциональность данного примера.

P.P.S. Смягчил исчезание привью при помощи transition:

.img{
/* Firefox */
-moz-transition-property: opacity;
-moz-transition-duration: 2s;

/* WebKit */
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;

/* Opera */
-o-transition-property: opacity;
-o-transition-duration: 2s;

/* Standard */
transition-property: opacity;
transition-duration: 2s;
}

Теги:

Хабы:

Веб-разработка

NoScript фотоальбом

Публикации

Истории

Ближайшие события