add support for data-preview-link on any element type (prev only a)

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;
 }
 

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>
 

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();