From 94716f9e514ad44dedea103a829adea5be3ac2fc Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Thu, 20 Mar 2025 13:52:28 +0100
Subject: [PATCH] add support for data-preview-link on any element type (prev
 only a)

---
 css/reveal.scss                |  3 ++-
 examples/preview-overlays.html | 38 ++++++++++++++++++++++++++++++++++
 js/controllers/overlay.js      |  4 ++--
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/css/reveal.scss b/css/reveal.scss
index 98edcb20..022793af 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1444,7 +1444,8 @@ $controlsArrowAngleActive: 36deg;
 }
 
 .reveal [data-preview-image],
-.reveal [data-preview-video] {
+.reveal [data-preview-video],
+.reveal [data-preview-link]:not(a):not([data-preview-link=false]) {
 	cursor: zoom-in;
 }
 
diff --git a/examples/preview-overlays.html b/examples/preview-overlays.html
index a718c5bb..4775b6a4 100644
--- a/examples/preview-overlays.html
+++ b/examples/preview-overlays.html
@@ -82,8 +82,46 @@
 
 						<div class="r-vstack items-start">
 							<h5>Iframes</h5>
+							<a href="https://hakim.se">https://hakim.se | data-preview-link</a>
 							<a data-preview-link href="https://hakim.se">https://hakim.se | data-preview-link</a>
+							<br />
 							<a data-preview-link="false" href="https://hakim.se">https://hakim.se | data-preview-link=false</a>
+							<br />
+							<figure>
+								<figcaption>Preview link from an image</figcaption>
+								<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-link="https://hakim.se">
+							</figure>
+						</div>
+					</div>
+
+				</section>
+
+				<section style="text-align: left;">
+
+					<h2>Lightbox</h2>
+
+					<div class="r-hstack items-start justify-start">
+						<div class="r-vstack items-start">
+							<h5>Images</h5>
+							<figure>
+								<img height="100" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image data-preview-fit="contain">
+							</figure>
+						</div>
+
+						<div style="width: 1px; height: 20vh; margin: 0 3rem;background-color: #222;"></div>
+
+						<div class="r-vstack items-start">
+							<h5>Videos</h5>
+							<figure>
+								<video height="100" src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-preview-video></video>
+							</figure>
+						</div>
+
+						<div style="width: 1px; height: 20vh; margin: 0 3rem;background-color: #222;"></div>
+
+						<div class="r-vstack items-start">
+							<h5>Iframes</h5>
+							<a style="font-size: 28px;" data-preview-link href="https://hakim.se">https://hakim.se</a>
 						</div>
 					</div>
 
diff --git a/js/controllers/overlay.js b/js/controllers/overlay.js
index 3ca72273..81519e63 100644
--- a/js/controllers/overlay.js
+++ b/js/controllers/overlay.js
@@ -19,7 +19,7 @@ export default class Overlay {
 
 		// Enable link previews globally
 		if( this.Reveal.getConfig().previewLinks ) {
-			this.linkPreviewSelector = 'a[href]:not([data-preview-link=false])';
+			this.linkPreviewSelector = 'a[href]:not([data-preview-link=false]), [data-preview-link]:not(a):not([data-preview-link=false])';
 		}
 		// Enable link previews for individual elements
 		else {
@@ -284,7 +284,7 @@ export default class Overlay {
 
 		// Was a link preview clicked?
 		if( linkTarget ) {
-			let url = linkTarget.getAttribute( 'href' );
+			let url = linkTarget.getAttribute( 'href' ) || linkTarget.getAttribute( 'data-preview-link' );
 			if( url ) {
 				this.showIframePreview( url );
 				event.preventDefault();