Skip to content

Commit 82d0a8a

Browse files
hakimelhakimel
committed
add docs for lightbox feature
1 parent 8be0090 commit 82d0a8a

File tree

6 files changed

+251
-23
lines changed

6 files changed

+251
-23
lines changed

‎css/content.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@
195195
}
196196

197197
a {
198-
@apply no-underline border-none;
198+
@apply no-underline border-none text-pink-400;
199199
}
200200
}
201201

‎src/_data/i18n/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ module.exports = {
4949
'zh-Hant': '媒體',
5050
en: 'Media',
5151
},
52+
Lightbox: {
53+
'zh-Hant': 'Lightbox',
54+
en: 'Lightbox',
55+
},
5256
Code: {
5357
'zh-Hant': '代碼',
5458
en: 'Code',

‎src/_data/navigation.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,11 @@
5151
"label": "Media",
5252
"url": "/media/"
5353
},
54+
{
55+
"label": "Lightbox",
56+
"url": "/lightbox/",
57+
"new": true
58+
},
5459
{
5560
"label": "Code",
5661
"url": "/code/"
@@ -128,8 +133,7 @@
128133
},
129134
{
130135
"label": "Jump to Slide",
131-
"url": "/jump-to-slide/",
132-
"new": true
136+
"url": "/jump-to-slide/"
133137
},
134138
{
135139
"label": "Touch Navigation",

‎src/lightbox.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
id: lightbox
3+
title: Lightbox
4+
layout: default
5+
---
6+
7+
# Lightbox
8+
9+
A lightbox is a modal that displays an image or video in a full-screen overlay. It's great for things like clicking on thumbnails to view a larger [image](#image-lightbox) or [video](#video-lightbox).
10+
11+
## Image Lightbox
12+
13+
The simplest way to trigger a lightbox in reveal.js is to add the `data-preview-image` attribute to an `img` tag. Clicking on the image below, will open the same image in an overlay.
14+
15+
```html
16+
<img src="reveal.png" data-preview-image>
17+
```
18+
19+
<div class="reveal reveal-example">
20+
<div class="slides">
21+
<section>
22+
<img src="/images/logo/reveal-black-text-sticker.png" data-preview-image width="400px">
23+
</section>
24+
</div>
25+
</div>
26+
27+
Lightboxes aren't limited to opening the image src. You can open any image you like by assigning a value to the `data-preview-image` attribute.
28+
29+
```html
30+
<img src="reveal.png" data-preview-image="mastering.svg">
31+
```
32+
33+
<div class="reveal reveal-example">
34+
<div class="slides">
35+
<section>
36+
<img src="/images/logo/reveal-black-text-sticker.png" data-preview-image="/images/docs/mastering.svg" width="400px">
37+
</section>
38+
</div>
39+
</div>
40+
41+
42+
## Video Lightbox
43+
44+
Video lightboxes work the same way as image lightboxes except you use the `data-preview-video` attribute instead.
45+
46+
```html
47+
<video src="video.mp4" data-preview-video></video>
48+
<img src="reveal.png" data-preview-video="video.mp4">
49+
```
50+
51+
<div class="reveal reveal-example">
52+
<div class="slides">
53+
<section>
54+
<div class="r-hstack" style="gap: 40px;">
55+
<video src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-preview-video width="400px"></video>
56+
<img src="/images/logo/reveal-black-text-sticker.png" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" width="400px">
57+
</div>
58+
</section>
59+
</div>
60+
</div>
61+
62+
## Lightbox Media Size
63+
The sizing of media in the lightbox can be controlled using the `data-preview-fit` attribute. The following fit modes are supported:
64+
65+
| Value | Effect |
66+
| :------------------- | :----------------------------------------------------------------------- |
67+
| scale-down (default) | Scale media down if needed to fit in the lightbox. |
68+
| contain | Scale media up and down to fit the lightbox without cropping. |
69+
| cover | Scale media to cover the entire lightbox, even if some of it is cut off. |
70+
```html
71+
<img src="reveal.png" data-preview-image data-preview-fit="cover">
72+
```
73+
74+
<div class="reveal reveal-example">
75+
<div class="slides">
76+
<section>
77+
<img src="/images/logo/reveal-white-text.svg" data-preview-image data-preview-fit="cover" width="400px">
78+
</section>
79+
</div>
80+
</div>
81+
82+
## Works on Any Element
83+
84+
Note that the lightbox feature works on any element, not just images and videos. For example, you can trigger an image or video lightbox from clicking a button or link.
85+
86+
```html
87+
<a data-preview-image="image.png">📸 Open Logo</a>
88+
<button data-preview-video="video.mp4">🎥 Open Video</button>
89+
```
90+
91+
<div class="reveal reveal-example">
92+
<div class="slides">
93+
<section>
94+
<a data-preview-image="/images/logo/reveal-black-text-sticker.png">📸 Open Logo</a>
95+
<br/>
96+
<br/>
97+
<button data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">🎥 Open Video</button>
98+
</section>
99+
</div>
100+
</div>
101+
102+
## Iframe Lightbox
103+
104+
It's also possible to preview links in iframe lightboxes. The syntax for this is slightly different from how image and video lightboxes work. To enable a link preview, you'll need to add the `data-preview-link` attribute to an anchor tag. It does not accept any value and will always use the anchor's `href` attribute as the source for the iframe.
105+
106+
```html
107+
<a href="https://hakim.se" data-preview-link>Open Hakim's Website</a>
108+
```
109+
110+
<div class="reveal reveal-example">
111+
<div class="slides">
112+
<section>
113+
<a href="https://hakim.se" data-preview-link>Open Hakim's Website</a>
114+
</section>
115+
</div>
116+
</div>
117+
118+
Note that this will only work if the link allows for embedding. Many domains prevent embedding via `x-frame-options` or `Content-Security-Policy`.

‎src/zh-Hant/lightbox.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
id: lightbox
3+
title: Lightbox
4+
layout: default
5+
---
6+
7+
# Lightbox
8+
9+
A lightbox is a modal that displays an image or video in a full-screen overlay. It's great for things like clicking on thumbnails to view a larger [image](#image-lightbox) or [video](#video-lightbox).
10+
11+
## Image Lightbox
12+
13+
The simplest way to trigger a lightbox in reveal.js is to add the `data-preview-image` attribute to an `img` tag. Clicking on the image below, will open the same image in an overlay.
14+
15+
```html
16+
<img src="reveal.png" data-preview-image>
17+
```
18+
19+
<div class="reveal reveal-example">
20+
<div class="slides">
21+
<section>
22+
<img src="/images/logo/reveal-black-text-sticker.png" data-preview-image width="400px">
23+
</section>
24+
</div>
25+
</div>
26+
27+
Lightboxes aren't limited to opening the image src. You can open any image you like by assigning a value to the `data-preview-image` attribute.
28+
29+
```html
30+
<img src="reveal.png" data-preview-image="mastering.svg">
31+
```
32+
33+
<div class="reveal reveal-example">
34+
<div class="slides">
35+
<section>
36+
<img src="/images/logo/reveal-black-text-sticker.png" data-preview-image="/images/docs/mastering.svg" width="400px">
37+
</section>
38+
</div>
39+
</div>
40+
41+
42+
## Video Lightbox
43+
44+
Video lightboxes work the same way as image lightboxes except you use the `data-preview-video` attribute instead.
45+
46+
```html
47+
<video src="video.mp4" data-preview-video></video>
48+
<img src="reveal.png" data-preview-video="video.mp4">
49+
```
50+
51+
<div class="reveal reveal-example">
52+
<div class="slides">
53+
<section>
54+
<div class="r-hstack" style="gap: 40px;">
55+
<video src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-preview-video width="400px"></video>
56+
<img src="/images/logo/reveal-black-text-sticker.png" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" width="400px">
57+
</div>
58+
</section>
59+
</div>
60+
</div>
61+
62+
## Lightbox Media Size
63+
The sizing of media in the lightbox can be controlled using the `data-preview-fit` attribute. The following fit modes are supported:
64+
65+
| Value | Effect |
66+
| :------------------- | :----------------------------------------------------------------------- |
67+
| scale-down (default) | Scale media down if needed to fit in the lightbox. |
68+
| contain | Scale media up and down to fit the lightbox without cropping. |
69+
| cover | Scale media to cover the entire lightbox, even if some of it is cut off. |
70+
```html
71+
<img src="reveal.png" data-preview-image data-preview-fit="cover">
72+
```
73+
74+
<div class="reveal reveal-example">
75+
<div class="slides">
76+
<section>
77+
<img src="/images/logo/reveal-white-text.svg" data-preview-image data-preview-fit="cover" width="400px">
78+
</section>
79+
</div>
80+
</div>
81+
82+
## Works on Any Element
83+
84+
Note that the lightbox feature works on any element, not just images and videos. For example, you can trigger an image or video lightbox from clicking a button or link.
85+
86+
```html
87+
<a data-preview-image="image.png">📸 Open Logo</a>
88+
<button data-preview-video="video.mp4">🎥 Open Video</button>
89+
```
90+
91+
<div class="reveal reveal-example">
92+
<div class="slides">
93+
<section>
94+
<a data-preview-image="/images/logo/reveal-black-text-sticker.png">📸 Open Logo</a>
95+
<br/>
96+
<br/>
97+
<button data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">🎥 Open Video</button>
98+
</section>
99+
</div>
100+
</div>
101+
102+
## Iframe Lightbox
103+
104+
It's also possible to preview links in iframe lightboxes. The syntax for this is slightly different from how image and video lightboxes work. To enable a link preview, you'll need to add the `data-preview-link` attribute to an anchor tag. It does not accept any value and will always use the anchor's `href` attribute as the source for the iframe.
105+
106+
```html
107+
<a href="https://hakim.se" data-preview-link>Open Hakim's Website</a>
108+
```
109+
110+
<div class="reveal reveal-example">
111+
<div class="slides">
112+
<section>
113+
<a href="https://hakim.se" data-preview-link>Open Hakim's Website</a>
114+
</section>
115+
</div>
116+
</div>
117+
118+
Note that this will only work if the link allows for embedding. Many domains prevent embedding via `x-frame-options` or `Content-Security-Policy`.

‎yarn.lock‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5426,8 +5426,8 @@ reusify@^1.0.4:
54265426
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
54275427

54285428
"reveal.js@github:hakimel/reveal.js#master":
5429-
version "5.1.0"
5430-
resolved "https://codeload.github.com/hakimel/reveal.js/tar.gz/472535065c7525abf0cc9df51c66f19fd2d2204f"
5429+
version "5.2.0"
5430+
resolved "https://codeload.github.com/hakimel/reveal.js/tar.gz/edb69c840cf3073f98f7bdd7a3148a7e1b176f5f"
54315431

54325432
rimraf@^2.7.1:
54335433
version "2.7.1"
@@ -5757,7 +5757,7 @@ stream-shift@^1.0.0:
57575757
resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.3.tgz#85b8fab4d71010fc3ba8772e8046cc49b8a3864b"
57585758
integrity sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==
57595759

5760-
"string-width-cjs@npm:string-width@^4.2.0":
5760+
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
57615761
version "4.2.3"
57625762
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
57635763
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5775,15 +5775,6 @@ string-width@^1.0.1, string-width@^1.0.2:
57755775
is-fullwidth-code-point "^1.0.0"
57765776
strip-ansi "^3.0.0"
57775777

5778-
string-width@^4.1.0:
5779-
version "4.2.3"
5780-
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
5781-
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
5782-
dependencies:
5783-
emoji-regex "^8.0.0"
5784-
is-fullwidth-code-point "^3.0.0"
5785-
strip-ansi "^6.0.1"
5786-
57875778
string-width@^5.0.1, string-width@^5.1.2:
57885779
version "5.1.2"
57895780
resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -5807,7 +5798,7 @@ string_decoder@~1.1.1:
58075798
dependencies:
58085799
safe-buffer "~5.1.0"
58095800

5810-
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
5801+
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
58115802
version "6.0.1"
58125803
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
58135804
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -5821,13 +5812,6 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
58215812
dependencies:
58225813
ansi-regex "^2.0.0"
58235814

5824-
strip-ansi@^6.0.0, strip-ansi@^6.0.1:
5825-
version "6.0.1"
5826-
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
5827-
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
5828-
dependencies:
5829-
ansi-regex "^5.0.1"
5830-
58315815
strip-ansi@^7.0.1:
58325816
version "7.1.0"
58335817
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"

0 commit comments

Comments
 (0)