Skip to content

Commit a428c88

Browse files
iiio2iiio2
committed
feat: add lightbox effect
1 parent 6ac3c66 commit a428c88

File tree

4 files changed

+591
-10
lines changed

4 files changed

+591
-10
lines changed

‎css/lightbox.min.css

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
.lb-loader,
2+
.lightbox {
3+
text-align: center;
4+
line-height: 0;
5+
position: absolute;
6+
left: 0;
7+
}
8+
body.lb-disable-scrolling {
9+
overflow: hidden;
10+
}
11+
.lightboxOverlay {
12+
position: absolute;
13+
top: 0;
14+
left: 0;
15+
z-index: 9999;
16+
background-color: #000;
17+
filter: alpha(Opacity=80);
18+
opacity: 0.8;
19+
display: none;
20+
}
21+
.lightbox {
22+
width: 100%;
23+
z-index: 10000;
24+
font-weight: 400;
25+
outline: 0;
26+
}
27+
.lightbox .lb-image {
28+
display: block;
29+
height: auto;
30+
max-width: inherit;
31+
max-height: none;
32+
border-radius: 3px;
33+
border: 4px solid #fff;
34+
}
35+
.lightbox a img {
36+
border: none;
37+
}
38+
.lb-outerContainer {
39+
position: relative;
40+
width: 250px;
41+
height: 250px;
42+
margin: 0 auto;
43+
border-radius: 4px;
44+
background-color: #fff;
45+
}
46+
.lb-outerContainer:after {
47+
content: '';
48+
display: table;
49+
clear: both;
50+
}
51+
.lb-loader {
52+
top: 43%;
53+
height: 25%;
54+
width: 100%;
55+
}
56+
.lb-cancel {
57+
display: block;
58+
width: 32px;
59+
height: 32px;
60+
margin: 0 auto;
61+
}
62+
.lb-nav {
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
height: 100%;
67+
width: 100%;
68+
z-index: 10;
69+
}
70+
.lb-container > .nav {
71+
left: 0;
72+
}
73+
.lb-nav a {
74+
outline: 0;
75+
background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
76+
}
77+
.lb-next,
78+
.lb-prev {
79+
height: 100%;
80+
cursor: pointer;
81+
display: block;
82+
}
83+
.lb-nav a.lb-prev {
84+
width: 34%;
85+
left: 0;
86+
float: left;
87+
filter: alpha(Opacity=0);
88+
opacity: 0;
89+
-webkit-transition: opacity 0.6s;
90+
-moz-transition: opacity 0.6s;
91+
-o-transition: opacity 0.6s;
92+
transition: opacity 0.6s;
93+
}
94+
.lb-nav a.lb-prev:hover {
95+
filter: alpha(Opacity=100);
96+
opacity: 1;
97+
}
98+
.lb-nav a.lb-next {
99+
width: 64%;
100+
right: 0;
101+
float: right;
102+
filter: alpha(Opacity=0);
103+
opacity: 0;
104+
-webkit-transition: opacity 0.6s;
105+
-moz-transition: opacity 0.6s;
106+
-o-transition: opacity 0.6s;
107+
transition: opacity 0.6s;
108+
}
109+
.lb-nav a.lb-next:hover {
110+
filter: alpha(Opacity=100);
111+
opacity: 1;
112+
}
113+
.lb-dataContainer {
114+
margin: 0 auto;
115+
padding-top: 5px;
116+
width: 100%;
117+
border-bottom-left-radius: 4px;
118+
border-bottom-right-radius: 4px;
119+
}
120+
.lb-dataContainer:after {
121+
content: '';
122+
display: table;
123+
clear: both;
124+
}
125+
.lb-data {
126+
padding: 0 4px;
127+
color: #ccc;
128+
}
129+
.lb-data .lb-details {
130+
width: 85%;
131+
float: left;
132+
text-align: left;
133+
line-height: 1.1em;
134+
}
135+
.lb-data .lb-caption {
136+
font-size: 13px;
137+
font-weight: 700;
138+
line-height: 1em;
139+
}
140+
.lb-data .lb-caption a {
141+
color: #4ae;
142+
}
143+
.lb-data .lb-number {
144+
display: block;
145+
clear: left;
146+
padding-bottom: 1em;
147+
font-size: 12px;
148+
color: #999;
149+
}
150+
.lb-data .lb-close {
151+
display: block;
152+
float: right;
153+
width: 30px;
154+
height: 30px;
155+
text-align: right;
156+
outline: 0;
157+
filter: alpha(Opacity=70);
158+
opacity: 0.7;
159+
-webkit-transition: opacity 0.2s;
160+
-moz-transition: opacity 0.2s;
161+
-o-transition: opacity 0.2s;
162+
transition: opacity 0.2s;
163+
}
164+
.lb-data .lb-close:hover {
165+
cursor: pointer;
166+
filter: alpha(Opacity=100);
167+
opacity: 1;
168+
}

‎index.html

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
rel="stylesheet"
1313
href="./fontawesome-free-5.12.1-web/css/all.min.css"
1414
/>
15-
<!-- styles css -->
15+
<!-- css -->
16+
<link rel="stylesheet" href="./css//lightbox.min.css" />
1617
<link rel="stylesheet" href="./css/styles.css" />
1718
</head>
1819
<body>
@@ -301,56 +302,88 @@ <h3>want lastest tour info & updates</h3>
301302
<div class="gallery-center">
302303
<article class="gallery-img-container">
303304
<img src="./images/tour-1.jpeg" class="galery-img" alt="" />
304-
<a href="" class="gallery-icon">
305+
<a
306+
href="./images/tour-1.jpeg"
307+
class="gallery-icon"
308+
data-lightbox="image-1"
309+
>
305310
<i class="fas fa-search"></i>
306311
</a>
307312
</article>
308313

309314
<article class="gallery-img-container">
310315
<img src="./images/tour-2.jpeg" class="galery-img" alt="" />
311-
<a href="" class="gallery-icon">
316+
<a
317+
href="./images/tour-2.jpeg"
318+
class="gallery-icon"
319+
data-lightbox="image-2"
320+
>
312321
<i class="fas fa-search"></i>
313322
</a>
314323
</article>
315324

316325
<article class="gallery-img-container">
317326
<img src="./images/tour-3.jpeg" class="galery-img" alt="" />
318-
<a href="" class="gallery-icon">
327+
<a
328+
href="./images/tour-3.jpeg"
329+
class="gallery-icon"
330+
data-lightbox="image-3"
331+
>
319332
<i class="fas fa-search"></i>
320333
</a>
321334
</article>
322335

323336
<article class="gallery-img-container">
324337
<img src="./images/tour-4.jpeg" class="galery-img" alt="" />
325-
<a href="" class="gallery-icon">
338+
<a
339+
href="./images/tour-4.jpeg"
340+
class="gallery-icon"
341+
data-lightbox="image-4"
342+
>
326343
<i class="fas fa-search"></i>
327344
</a>
328345
</article>
329346

330347
<article class="gallery-img-container">
331348
<img src="./images/tour-6.jpeg" class="galery-img" alt="" />
332-
<a href="" class="gallery-icon">
349+
<a
350+
href="./images/tour-6.jpeg"
351+
class="gallery-icon"
352+
data-lightbox="image-5"
353+
>
333354
<i class="fas fa-search"></i>
334355
</a>
335356
</article>
336357

337358
<article class="gallery-img-container">
338359
<img src="./images/tour-5.jpeg" class="galery-img" alt="" />
339-
<a href="" class="gallery-icon">
360+
<a
361+
href="./images/tour-5.jpeg"
362+
class="gallery-icon"
363+
data-lightbox="image-6"
364+
>
340365
<i class="fas fa-search"></i>
341366
</a>
342367
</article>
343368

344369
<article class="gallery-img-container">
345370
<img src="./images/tour-1.jpeg" class="galery-img" alt="" />
346-
<a href="" class="gallery-icon">
371+
<a
372+
href="./images/tour-1.jpeg"
373+
class="gallery-icon"
374+
data-lightbox="image-7"
375+
>
347376
<i class="fas fa-search"></i>
348377
</a>
349378
</article>
350379

351380
<article class="gallery-img-container">
352381
<img src="./images/tour-2.jpeg" class="galery-img" alt="" />
353-
<a href="" class="gallery-icon">
382+
<a
383+
href="./images/tour-2.jpeg"
384+
class="gallery-icon"
385+
data-lightbox="image-8"
386+
>
354387
<i class="fas fa-search"></i>
355388
</a>
356389
</article>
@@ -404,6 +437,8 @@ <h3>want lastest tour info & updates</h3>
404437
</footer>
405438

406439
<!-- js -->
407-
<script src="./js/app.js"></script>
440+
<script type="module" src="./js/jquery.min.js"></script>
441+
<script type="module" src="./js/lightbox.min.js"></script>
442+
<script type="module" src="./js/app.js"></script>
408443
</body>
409444
</html>

‎js/jquery.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)