This time I will share jQuery Plugin and tutorial about Responsive Fullscreen Image Viewer With jQuery And CSS3, hope it will help you in programming stack.
| File Size: | 2.65 KB |
|---|---|
| Views Total: | 2365 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
This is a responsive, jQuery & CSS3 based image viewer where you’re able to fade through a set of images in fullscreen mode just like a slider. Responsiveness based on CSS3 flexbox model.
How to use it:
1. Add image together with next/prev navigation and fullscreen toggle into the image viewer.
01 |
<div id="slider"> |
02 |
<div id="images"> |
03 |
<img src="1.jpg" id="1"/> |
04 |
<img src="2.jpg" id="2"/> |
05 |
<img src="3.jpg" id="3"/> |
06 |
</div> |
07 |
<div id="controls"> |
08 |
<div> |
09 |
<button id="previous"><</button> |
10 |
<button id="next">></button> |
11 |
</div> |
12 |
<button id="toggle-fullscreen"> |
13 |
F |
14 |
</button> |
15 |
</div> |
16 |
</div> |
2. The core CSS to style the image viewer.
01 |
#slider { |
02 |
width: 50%; |
03 |
height: 350px; |
04 |
margin: 0 auto; |
05 |
display: -webkit-box; |
06 |
display: -ms-flexbox; |
07 |
display: -webkit-flex; |
08 |
display: flex; |
09 |
-webkit-flex-flow: column nowrap; |
10 |
-ms-flex-flow: column nowrap; |
11 |
flex-flow: column nowrap; |
12 |
} |
13 |
14 |
#slider.full { |
15 |
position: fixed; |
16 |
top: 0; |
17 |
left: 0; |
18 |
width: 100vw; |
19 |
height: 100vh; |
20 |
} |
21 |
22 |
#slider.full #images img { |
23 |
height: 100%; |
24 |
width: auto; |
25 |
vertical-align: center; |
26 |
} |
27 |
@media (max-width: 840px) { |
28 |
29 |
#slider.full #images img { |
30 |
width: 100%; |
31 |
height: auto; |
32 |
} |
33 |
} |
34 |
35 |
#slider #images { |
36 |
height: 90%; |
37 |
text-align: center; |
38 |
background: #292929; |
39 |
display: -webkit-box; |
40 |
display: -ms-flexbox; |
41 |
display: -webkit-flex; |
42 |
display: flex; |
43 |
-webkit-box-pack: center; |
44 |
-webkit-justify-content: center; |
45 |
-ms-flex-pack: center; |
46 |
justify-content: center; |
47 |
-webkit-box-align: center; |
48 |
-webkit-align-items: center; |
49 |
-ms-flex-align: center; |
50 |
align-items: center; |
51 |
-webkit-align-content: center; |
52 |
-ms-flex-line-pack: center; |
53 |
align-content: center; |
54 |
} |
55 |
56 |
#slider #images img { height: 100%; } |
57 |
58 |
@media (max-width: 840px) { |
59 |
60 |
#slider #images img { |
61 |
height: auto; |
62 |
width: auto; |
63 |
max-height: 100%; |
64 |
max-width: 100%; |
65 |
} |
66 |
} |
3. The required CSS styles for the controls.
01 |
#slider #controls { |
02 |
height: 10%; |
03 |
background: #f0f0f0; |
04 |
display: -webkit-box; |
05 |
display: -ms-flexbox; |
06 |
display: -webkit-flex; |
07 |
display: flex; |
08 |
-webkit-flex-flow: row nowrap; |
09 |
-ms-flex-flow: row nowrap; |
10 |
flex-flow: row nowrap; |
11 |
-webkit-box-pack: justify; |
12 |
-webkit-justify-content: space-between; |
13 |
-ms-flex-pack: justify; |
14 |
justify-content: space-between; |
15 |
} |
16 |
17 |
#slider #controls div { |
18 |
height: 100%; |
19 |
display: -webkit-box; |
20 |
display: -ms
|
