mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-06 14:47:04 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hakim El Hattab
2025-03-20 13:52:28 +01:00
parent b3fd27d071
commit 94716f9e51
3 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/reveal.scss
View File

@@ -1444,7 +1444,8 @@ $controlsArrowAngleActive: 36deg;
} }
.reveal [data-preview-image], .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; cursor: zoom-in;
} }

38
examples/preview-overlays.html
View File

@@ -82,8 +82,46 @@
<div class="r-vstack items-start"> <div class="r-vstack items-start">
<h5>Iframes</h5> <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> <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> <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>
</div> </div>

4
js/controllers/overlay.js
View File

@@ -19,7 +19,7 @@ export default class Overlay {
// Enable link previews globally // Enable link previews globally
if( this.Reveal.getConfig().previewLinks ) { 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 // Enable link previews for individual elements
else { else {
@@ -284,7 +284,7 @@ export default class Overlay {
// Was a link preview clicked? // Was a link preview clicked?
if( linkTarget ) { if( linkTarget ) {
let url = linkTarget.getAttribute( 'href' ); let url = linkTarget.getAttribute( 'href' ) || linkTarget.getAttribute( 'data-preview-link' );
if( url ) { if( url ) {
this.showIframePreview( url ); this.showIframePreview( url );
event.preventDefault(); event.preventDefault();