tonyair/meta-lightbox
1
0
Fork 0
mirror of https://github.com/a2nt/meta-lightbox.git synced 2024-10-22 15:05:53 +00:00
Code Issues Projects Releases Wiki Activity

IMPR: minor fixtures

Browse Source
This commit is contained in:
Tony Air 2021-01-31 19:08:55 +07:00
parent 4bd702c753
commit e32aa62444
2 changed files with 93 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
src/html/meta-lightbox.html
View File

@ -5,87 +5,97 @@
} }
</style> </style>
<h2>Loading data</h2> <div id="MetaLightboxContainer">
<h2>Loading data</h2>
<p> <p>
<a <a
href="../src/img/photo1.png" href="../src/img/photo1.png"
data-toggle="lightbox"
data-gallery="demo"
data-title="That's first link"
>Load an Image</a
>
<br />
<a href="../src/test.json" data-toggle="lightbox">
Load JSON
</a>
<br />
<a href="../src/test-pajax.html" data-toggle="lightbox">
Load Partial AJAX HTML </a
><br />
<a href="../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>
<a
href="../src/img/photo2.jpg"
data-toggle="lightbox"
data-gallery="demo"
>
Use [data-toggle="lightbox"] attribute to attach lightbox action and
[href] to specify URL.
</a>
</p>
<p>
<a
href="../src/img/photo1.png"
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
data-toggle="lightbox" data-toggle="lightbox"
data-href="https://youtu.be/GgnClrx8N2k"
data-gallery="demo" data-gallery="demo"
data-title="That's first link" data-title="Yes you can link vimeo and youtube videos as long as AJAX content"
>Load an Image</a
> >
Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox
on regular elements.
<b>Click me!</b>
</p>
<br /> <div id="MetaLightboxApp"></div>
</div>
<a href="../src/test.json" data-toggle="lightbox">
Load JSON
</a>
<br />
<a href="../src/test-pajax.html" data-toggle="lightbox">
Load Partial AJAX HTML </a
><br />
<a href="../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>
<a href="../src/img/photo2.jpg" data-toggle="lightbox" data-gallery="demo">
Use [data-toggle="lightbox"] attribute to attach lightbox action and
[href] to specify URL.
</a>
</p>
<p>
<a
href="../src/img/photo1.png"
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
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>

6
src/js/app.js
View File

@ -8,8 +8,10 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import MetaWindow from './_window.jsx'; import MetaWindow from './_window.jsx';
const M = ReactDOM.render(<MetaWindow />, document.getElementById('App')); const M = ReactDOM.render(
ReactDOM.render(<MetaWindow />, document.getElementById('App')); <MetaWindow />,
document.getElementById('MetaLightboxApp'),
);
// display custom HTML content manually using JS // display custom HTML content manually using JS
//M.setContent('<b>ZZZZZZZZZAAAA11<a href="/">BBBB</a>122</b>'); //M.setContent('<b>ZZZZZZZZZAAAA11<a href="/">BBBB</a>122</b>');