2021-01-30 22:00:13 +01:00
< style >
2021-08-04 00:55:06 +02:00
[data-toggle='lightbox']:hover,
[data-toggle='lightbox']:focus {
text-decoration: underline;
}
2021-01-30 22:00:13 +01:00
2021-08-04 00:55:06 +02:00
< / style >
2021-01-31 13:08:55 +01:00
< div id = "MetaLightboxContainer" >
2021-08-04 00:55:06 +02:00
< div class = "typography" >
< h2 > Loading data< / h2 >
< p >
2021-08-11 18:18:28 +02:00
< a href = "https://via.placeholder.com/1200x600" data-toggle = "lightbox" data-gallery = "demo" data-title = "That's first link" > Load an Image< / a >
2021-08-04 00:55:06 +02:00
< br / >
< a href = "public/src/test.json" data-toggle = "lightbox" >
Load JSON < / a >
< style >
[data-toggle='lightbox']:hover,
[data-toggle='lightbox']:focus {
text-decoration: underline;
}
< / style >
< br / >
< a href = "public/src/test-pajax.html" data-toggle = "lightbox" >
Load Partial AJAX HTML < / a > < br / >
< a href = "public/src/not-found.html" data-toggle = "lightbox" >
Not Found test
< / a >
< / p >
< h2 > Embeds< / h2 >
< p >
< a href = "https://www.youtube.com/watch?v=WYvZZYthDRI" data-toggle = "lightbox" data-embed = "true" > Embed Youtube link< / a >
< br / >
< a href = "https://vimeo.com/26216129" data-toggle = "lightbox" data-embed = "true" > Embed Vimeo link< / a >
< br / >
< a href = "https://soundcloud.com/littlenapoleon/led-zeppelin-vs-rolling-stones" data-toggle = "lightbox" data-embed = "true" > Embed SoundCloud link< / a > < br / >
< a href = "https://www.instagram.com/p/CKl5n87hf7R/" data-toggle = "lightbox" data-embed = "true" > Embed Instagram< / a >
< / p >
< h2 > Other< / h2 >
< p >
2021-08-11 18:18:28 +02:00
< a href = "https://via.placeholder.com/600x600.svg?text=SVG%20Image" data-toggle = "lightbox" data-gallery = "demo" >
2021-08-04 00:55:06 +02:00
Use [data-toggle="lightbox"] attribute to attach lightbox action
and [href] to specify URL.
< / a >
< / p >
< p >
2021-08-11 18:18:28 +02:00
< a href = "https://via.placeholder.com/600x1200.jpg?text=JPG%20Image" data-toggle = "lightbox" data-gallery = "demo" data-title = "Use data-title attribute to specify lightbox title" >
Use [data-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with
next/prev arrows
< / a >
< / p >
< p >
< a href = "https://via.placeholder.com/1400x700.png?text=PNG%20Image" data-toggle = "lightbox" data-gallery = "demo" data-title = "Use data-title attribute to specify lightbox title" >
2021-08-04 00:55:06 +02:00
Use [data-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with
next/prev arrows
< / a >
< / p >
< p data-toggle = "lightbox" data-href = "https://youtu.be/GgnClrx8N2k" data-gallery = "demo" data-title = "Yes you can link vimeo and youtube videos as long as AJAX content" >
Use [data-toggle="lightbox"] + [data-href] attribute to toggle
lightbox on regular elements.
< b > Click me!< / b >
< / p >
< / div >
< div id = "MetaLightboxApp" > < / div >
2021-01-31 13:08:55 +01:00
< / div >