update lightbox docs

Author: hakimel

src/lightbox.md

@@ -4,7 +4,7 @@ title: Lightbox
 layout: default
 ---
 
-# Lightbox
+# Lightbox <span class="r-version-badge new">5.2.0</span>
 
 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).
 
@@ -101,18 +101,24 @@ Note that the lightbox feature works on any element, not just images and videos.
 
 ## Iframe Lightbox
 
-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.
+It's possible to preview links in iframe lightboxes using the `data-preview-link` attribute. When this attribute is added to an `<a>` tag, reveal.js will automatically open the link's `href` in an iframe.
+
+If you want to open an iframe lightbox from another element, you can set the iframe source as a value to the `data-preview-link` attribute.
 
 ```html
 <a href="https://hakim.se" data-preview-link>Open Hakim's Website</a>
+<img src="reveal.png" data-preview-link="https://hakim.se">
 ```
 
 <div class="reveal reveal-example">
   <div class="slides">
     <section>
       <a href="https://hakim.se" data-preview-link>Open Hakim's Website</a>
+      <br />
+      <br />
+      <img src="/images/logo/reveal-black-text-sticker.png" data-preview-link="https://hakim.se" width="400px">
     </section>
   </div>
 </div>
 
-Note that this will only work if the link allows for embedding. Many domains prevent embedding via `x-frame-options` or `Content-Security-Policy`.
+Note that this will only work if the link allows for embedding. Many websites prevent embedding via `x-frame-options` or `Content-Security-Policy`.

src/links.md

@@ -63,3 +63,21 @@ You can add relative navigation links that work similarly to the built in direct
 ```
 
 Each navigation element is automatically given an `enabled` class when it's a valid navigation route based on the current slide. For example, if you're on the first slide only `navigate-right` will have the `enabled` class since it's not possible to navigate towards the left.
+
+## Lightbox Links
+
+If the website you're linking to supports iframe embedding, you can use the `data-preview-link` attribute to open the link in an iframe lightbox. This way you can show an external website without leaving the slide deck. Learn more in the [Lightbox docs](/lightbox/#iframe-lightbox).
+
+```html
+<a href="https://hakim.se" data-preview-link>Open Link</a>
+```
+
+<div class="reveal reveal-example">
+  <div class="slides">
+    <section>
+			<a href="https://hakim.se" data-preview-link>Open Link</a>
+    </section>
+  </div>
+</div>
+
+Note that this will only work if the link allows for embedding. Many websites prevent embedding via `x-frame-options` or `Content-Security-Policy`.

src/media.md

@@ -29,6 +29,28 @@ Reveal.initialize({
 
 Note that embedded HTML `<video>`/`<audio>` and YouTube/Vimeo iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a `data-ignore` attribute.
 
+## Lightbox
+
+You can turn any element into a media lightbox by adding the `data‑preview‑image`, `data‑preview‑video` or `data‑preview‑link` attribute. This will cause the media to open in a full-screen overlay when clicked. Learn more in the [Lightbox docs](/lightbox).
+
+```html
+<img src="reveal.png" data-preview-video="video.mp4">
+<a href="https://hakim.se" data-preview-link>Open Link</a>
+```
+
+<div class="reveal reveal-example">
+  <div class="slides">
+    <section>
+      <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">
+      <br />
+      <br />
+      <a href="https://hakim.se" data-preview-link>Open Link</a>
+    </section>
+  </div>
+</div>
+
+
+
 ## Lazy Loading
 
 When working on presentations with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option.

yarn.lock

@@ -5427,7 +5427,7 @@ reusify@^1.0.4:
 
 "reveal.js@github:hakimel/reveal.js#master":
   version "5.2.0"
-  resolved "https://codeload.github.com/hakimel/reveal.js/tar.gz/edb69c840cf3073f98f7bdd7a3148a7e1b176f5f"
+  resolved "https://codeload.github.com/hakimel/reveal.js/tar.gz/47ee25dd1932a6e4f997e635c6fac8d25a2deae9"
 
 rimraf@^2.7.1:
   version "2.7.1"
@@ -5758,6 +5758,7 @@ stream-shift@^1.0.0:
   integrity sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5799,6 +5800,7 @@ string_decoder@~1.1.1:
     safe-buffer "~5.1.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==