NoScript photo album

Already, many sites can not do without JavaScript, and often have to turn off NoScript in order to see what we wanted to show. And now I wondered about making a lightweight compact photo album on one page without JavaScript. Only HTML and CSS were used.

Task:
1 Large image completely occupies the available space.
2 Miniatures also fill it up as much as possible.
3 No mouse clicks (but you can and so) and scrolling to view the next image (well, except if the thumbnails more than the screen).
4 View using the keyboard and mouse.
5 Without scripts.
6 Preserving backward compatibility.


')
To implement were chosen: hover and: focus pseudo-classes

The workpiece is simple (at the beginning it was a bit more complicated):

<! 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 >
< span class = "cover" > < / span >
< span class = "hide" >
<a href = "http://kirpich.example.com/imgs/rust/rust_vid-1.jpg" id = "lnk0" class = "lnk">
< span class = "img" > < img src = "http://kirpich.example.com/thmb/rust/rust_vid-1.jpg" alt = "" > < / span >
< / a >

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

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

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

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

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

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

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

Such an album without CSS works “in the old way” and looks decent.

Let's slightly change the look:

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 ;
}

Prepare surfaces for display:

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

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

Stretch layers to full window:

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

Hide images while maintaining “responsiveness”:

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

Covering .hide so that: hover only works on images:

.cover {
z-index : 2 ;
}

We take out the .lnk to the top so that it covers other images:

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

Hide the thumbnail:

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

And show the following:

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

We remove the transparency from it:

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

Hide the large image if the thumbnail is in focus next to it:

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

Well, in a separate file we upload images:

# 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' ) ;
}

Unfortunately, only: hover can influence a parent, and for a neighbor to an element, too, nothing invented looks like it.

So, did we do it?

When you “touch” the thumbnail image displays its full version, the thumbnails become transparent. When focusing on a thumbnail, .lnk covers the thumbnails and displays a large image.

The mouse simply moves from thumbnail to thumbnail.
Keyboard using Tab or Shift + Tab (Opera: Ctrl + Up or Ctrl + Down).

The reference was htmlbook.ru .

PS Internet Explorer does not fully support the functionality of this example.

PPS Softened the disappearance of the predy with the 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 ;
}