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

Slice HTML files into modules

Browse Source
This commit is contained in:
Tony Air 2019-11-25 14:57:57 +07:00
parent 80473d29d1
commit 6fda890159
3 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -66,6 +66,7 @@
"extract-text-webpack-plugin": "^4.0.0-beta.0", "extract-text-webpack-plugin": "^4.0.0-beta.0",
"favicons-webpack-plugin": "^1.0.2", "favicons-webpack-plugin": "^1.0.2",
"file-loader": "^1.1.5", "file-loader": "^1.1.5",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.0.0-beta.8", "html-webpack-plugin": "^4.0.0-beta.8",
"lost": "^8.3.1", "lost": "^8.3.1",
"material-design-color": "^2.3.2", "material-design-color": "^2.3.2",

21
src/html/meta-lightbox.html Normal file
View File

@ -0,0 +1,21 @@
<p>
<a
href="../src/img/photo1.png"
data-toggle="lightbox"
data-lightbox-gallery="demo"
data-title="That's first link"
>Click me to start</a>
</p>
<p>
<a href="../src/img/photo2.jpg" data-toggle="lightbox" data-lightbox-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-lightbox-gallery="demo" data-title="Use data-title attribute to specify lightbox title">
Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows
</a>
</p>
<p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-lightbox-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">
You can use data-href attribute to specify link and attach lightbox to another element
</p>

22
src/index.html
View File

@ -20,27 +20,7 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<h1>Meta-lightbox Demo</h1> <h1>Meta-lightbox Demo</h1>
<p> <%= require('html-loader!./html/meta-lightbox.html') %>
<a
href="../src/img/photo1.png"
data-toggle="lightbox"
data-lightbox-gallery="demo"
data-title="That's first link"
>Click me to start</a>
</p>
<p>
<a href="../src/img/photo2.jpg" data-toggle="lightbox" data-lightbox-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-lightbox-gallery="demo" data-title="Use data-title attribute to specify lightbox title">
Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows
</a>
</p>
<p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-lightbox-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">
You can use data-href attribute to specify link and attach lightbox to another element
</p>
<p><b>Note:</b> You can add jquery-zoom plugin and lighbox will zoom photos on hover.</p> <p><b>Note:</b> You can add jquery-zoom plugin and lighbox will zoom photos on hover.</p>
</div> </div>
</body> </body>