From 2f76a34897c5d4479aec9f694d46cc728f1af6b5 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Wed, 26 Mar 2025 15:08:44 +0100
Subject: [PATCH] add lightbox example to demo deck

---
 README.md                                     |  2 +-
 demo.html                                     | 19 +++++++++++++++++++
 examples/backgrounds.html                     |  2 +-
 .../{preview-overlays.html => lightbox.html}  |  0
 examples/markdown.html                        |  2 +-
 examples/markdown.md                          |  2 +-
 examples/scroll.html                          |  2 +-
 7 files changed, 24 insertions(+), 5 deletions(-)
 rename examples/{preview-overlays.html => lightbox.html} (100%)

diff --git a/README.md b/README.md
index 2280b33c..290e3770 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
   </a>
   <br><br>
   <a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a>
-  <a href="https://slides.com/"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
+  <a href="https://slides.com/"><img src="https://static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
 </p>
 
 reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at [revealjs.com](https://revealjs.com/).
diff --git a/demo.html b/demo.html
index 36d83028..ab654977 100644
--- a/demo.html
+++ b/demo.html
@@ -197,6 +197,25 @@
 					</script>
 				</section>
 
+				<section>
+					<h2>Lightbox</h2>
+					Turn any element into a <a href="https://revealjs.com/lightbox/">lightbox</a> using <strong>data‑preview‑image</strong> & <strong>data‑preview‑video</strong>.
+					<div class="r-hstack" style="gap: 2rem;">
+						<div>
+							<pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
+								&lt;img src="image.png" data-preview-image="image.png"&gt;
+							</code></pre>
+							<img src="https://static.slid.es/logo/v2/slides-symbol-1024x1024.png" height="100" data-preview-image>
+						</div>
+						<div>
+							<pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
+								&lt;img src="video.png" data-preview-video="video.mp4"&gt;
+							</code></pre>
+							<img src="https://static.slid.es/site/homepage/v1/homepage-video-editor.png" height="100" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
+						</div>
+					</div>
+				</section>
+
 				<section>
 					<p>Add the <code>r-fit-text</code> class to auto-size text</p>
 					<h2 class="r-fit-text">FIT TEXT</h2>
diff --git a/examples/backgrounds.html b/examples/backgrounds.html
index 19d40c34..febb6bf3 100644
--- a/examples/backgrounds.html
+++ b/examples/backgrounds.html
@@ -89,7 +89,7 @@
 					<h2>Same background twice (2/2)</h2>
 				</section>
 
-				<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
+				<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://static.slid.es/site/homepage/v1/homepage-video-editor.webm">
 					<h2>Video background</h2>
 				</section>
 
diff --git a/examples/preview-overlays.html b/examples/lightbox.html
similarity index 100%
rename from examples/preview-overlays.html
rename to examples/lightbox.html
diff --git a/examples/markdown.html b/examples/markdown.html
index 4d69f052..885ffe83 100644
--- a/examples/markdown.html
+++ b/examples/markdown.html
@@ -121,7 +121,7 @@
                 <!-- Images -->
                 <section data-markdown>
                     <script type="text/template">
-                        ![Sample image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
+                        ![Sample image](https://static.slid.es/logo/v2/slides-symbol-512x512.png)
                     </script>
                 </section>
 
diff --git a/examples/markdown.md b/examples/markdown.md
index 1315172c..279c58a2 100644
--- a/examples/markdown.md
+++ b/examples/markdown.md
@@ -33,7 +33,7 @@ Content 3.2
 
 ## External 3.3 (Image)
 
-![External Image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
+![External Image](https://static.slid.es/logo/v2/slides-symbol-512x512.png)
 
 
 ## External 3.4 (Math)
diff --git a/examples/scroll.html b/examples/scroll.html
index afe7d5a0..cea39945 100644
--- a/examples/scroll.html
+++ b/examples/scroll.html
@@ -91,7 +91,7 @@
           <section data-background="https://static.slid.es/reveal/image-placeholder.png" id="image-bg">
             <h2>Image Backgrounds</h2>
           </section>
-          <section data-background-video-muted data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
+          <section data-background-video-muted data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://static.slid.es/site/homepage/v1/homepage-video-editor.webm">
             <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
               <h2>Video background</h2>
             </div>