Deploying to gh-pages from @ 7e990a8 🚀

marekdedic · Feb 24, 2024 · e3f8aec · e3f8aec
commit e3f8aec
Show file tree

Hide file tree

Showing 20 changed files with 205 additions and 0 deletions.
diff --git a/assets/index-C4_AvM08.js b/assets/index-C4_AvM08.js
diff --git a/assets/index-CKWTLeHf.css b/assets/index-CKWTLeHf.css
diff --git a/images/body-bg.png b/images/body-bg.png
diff --git a/images/demo1.jpg b/images/demo1.jpg
diff --git a/images/demo2.jpg b/images/demo2.jpg
diff --git a/images/demo3.jpg b/images/demo3.jpg
diff --git a/images/demo4.jpg b/images/demo4.jpg
diff --git a/images/highlight-bg.jpg b/images/highlight-bg.jpg
diff --git a/images/hr.png b/images/hr.png
diff --git a/images/octocat-icon.png b/images/octocat-icon.png
diff --git a/images/tar-gz-icon.png b/images/tar-gz-icon.png
diff --git a/images/thumb1.jpg b/images/thumb1.jpg
diff --git a/images/thumb2.jpg b/images/thumb2.jpg
diff --git a/images/thumb3.jpg b/images/thumb3.jpg
diff --git a/images/thumb4.jpg b/images/thumb4.jpg
diff --git a/images/video-thumb.jpg b/images/video-thumb.jpg
diff --git a/images/video.m4v b/images/video.m4v
diff --git a/images/zip-icon.png b/images/zip-icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,190 @@
+<!doctype html>
+<html>
+<head>
+    <title>Imagelightbox</title>
+    <meta charset='utf-8'>
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <link href='https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
+  <script type="module" crossorigin src="/assets/index-C4_AvM08.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-CKWTLeHf.css">
+</head>
+
+<body>
+<div id="container">
+    <div class="inner">
+        <header>
+            <h1>Imagelightbox</h1>
+            <h2>Image Lightbox, Responsive and Touch‑friendly</h2>
+        </header>
+
+        <section id="downloads" class="clearfix">
+            <a href="https://github.com/marekdedic/imagelightbox/zipball/master" id="download-zip" class="button"><span>Download .zip</span></a>
+            <a href="https://github.com/marekdedic/imagelightbox/tarball/master" id="download-tar-gz" class="button"><span>Download .tar.gz</span></a>
+            <a href="https://github.com/marekdedic/imagelightbox" id="view-on-github" class="button"><span>View on GitHub</span></a>
+        </section>
+
+        <div id="main_content">
+            <section class="options">
+                <h2>With activity indication</h2>
+                <ul class="demo_activity">
+                    <li><a href="images/demo1.jpg" data-imagelightbox="a"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="a"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="a"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+                <pre><code>$('a[data-imagelightbox="a"]')
+                        .imageLightbox({activity: true});
+                </code></pre>
+
+                <h2>With overlay</h2>
+                <ul>
+                    <li><a href="images/demo1.jpg" data-imagelightbox="b"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="b"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="b"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+                <pre><code>$('a[data-imagelightbox="b"]')
+                    .imageLightbox({overlay: true});
+                </code></pre>
+
+                <h2>With "close" button</h2>
+                <ul class="demo_close">
+                    <li><a href="images/demo1.jpg" data-imagelightbox="c"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="c"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="c"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+                <pre><code>$('a[data-imagelightbox="c"]')
+                    .imageLightbox({button: true, quitOnDocClick: false});
+                </code></pre>
+
+                <h2>With caption</h2>
+                <ul class="demo_caption">
+                    <li><a href="images/demo1.jpg" data-imagelightbox="d" data-ilb2-caption="Sunset in Tanzania"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="d"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="d"><img src="images/thumb3.jpg" alt="Just another sunset in Tanzania"></a></li>
+                </ul>
+                <pre><code>
+                    $('a[data-imagelightbox="d"]')
+                    .imageLightbox({caption: true});
+                </code></pre>
+
+                <h2>With navigation</h2>
+                <ul class="demo_navigation">
+                    <li><a href="images/demo1.jpg" data-imagelightbox="e"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="e"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="e"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+                <pre><code>
+                    $('a[data-imagelightbox="e"]')
+                    .imageLightbox({navigation: true});
+                </code></pre>
+
+                <h2>With arrows</h2>
+                <ul class="demo_arrows">
+                    <li><a href="images/demo1.jpg" data-imagelightbox="f"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="f"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="f"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+                <pre><code>$('a[data-imagelightbox="f"]')
+                    .imageLightbox({arrows: true});
+                </code></pre>
+
+                <h2>All of the above</h2>
+                <ul>
+                    <li><a href="images/demo1.jpg" data-imagelightbox="g" data-ilb2-caption="Sunset in Tanzania"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="g" data-ilb2-caption="Traffic jam in Tanzania"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="g" data-ilb2-caption="Just another sunset in Tanzania"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+
+                <h2>With manual trigger</h2>
+                <ul>
+                    <li><a href="images/demo1.jpg" data-imagelightbox="h"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="h"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="h"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+                <button class="trigger_lightbox">Click Me!</button>
+
+                <h2>dynamically adding</h2>
+                <ul class="demo_dynamic">
+                    <li><a href="images/demo1.jpg" data-imagelightbox="i"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="i"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="i"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+                <button class="add_image">Add another image</button>
+
+                <h2>With history & permalinks</h2>
+                <ul class="demo_history">
+                    <li><a href="images/demo1.jpg" data-imagelightbox="j"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="j"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="j"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+                <pre><code>$('a[data-imagelightbox="hist"]')
+                        .imageLightbox({history: true});
+                </code></pre>
+				<pre>Call with ?imageLightboxIndex=2 added to the url to open the third image
+                    (may need to add &imageLightboxSet=j as well because there are multiple examples)</pre>
+
+                <h2>History with ids</h2>
+                <ul class="demo_activity">
+                    <li><a href="images/demo1.jpg" data-imagelightbox="k" data-ilb2-id="img1"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="k" data-ilb2-id="img2"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="k" data-ilb2-id="img3"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+                <pre><code>$('a[data-imagelightbox="hist"]')
+                        .imageLightbox({history: true});
+                </code></pre>
+				<pre>Add data-ilb2-id="img2" and call with ?imageLightboxIndex=img2 added to the url to open that image
+(may need to add &imageLightboxSet=k as well because there are multiple examples)</pre>
+
+                <h2>Video support</h2>
+                <ul>
+                    <li><a href="images/demo1.jpg" data-imagelightbox="video"><img src="images/thumb1.jpg"></a></li>
+					<li><a data-ilb2-video='{"controls":"controls", "autoplay":false, "sources":[{"src":"images/video.m4v", "type":"video/mp4"}]}' data-imagelightbox="video"><img src="images/video-thumb.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="video"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+				<pre>Add data-ilb2-video to the link, containing the parameters of a HTML5 video tag as JSON. You can also
+include a sources field - a list of source tags similarily encoded.</pre>
+
+                <h2>Press enter for fullscreen</h2>
+                <ul>
+                 <li><a href="images/demo1.jpg" data-imagelightbox="fullscreen"><img src="images/thumb1.jpg"></a></li>
+                 <li><a href="images/demo2.jpg" data-imagelightbox="fullscreen"><img src="images/thumb2.jpg"></a></li>
+                 <li><a href="images/demo3.jpg" data-imagelightbox="fullscreen"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+
+                <h2>Filter images by extension</h2>
+                <h3>Allow gif only</h3>
+                <ul>
+                    <li><a href="images/demo1.jpg" data-imagelightbox="allowedtypes"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="allowedtypes"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="allowedtypes"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+
+            </section>
+
+            <section id="events">
+                <h2>Events</h2>
+                <ul>
+                    <li><a href="images/demo1.jpg" data-imagelightbox="events"><img src="images/thumb1.jpg"></a></li>
+                    <li><a href="images/demo2.jpg" data-imagelightbox="events"><img src="images/thumb2.jpg"></a></li>
+                    <li><a href="images/demo3.jpg" data-imagelightbox="events"><img src="images/thumb3.jpg"></a></li>
+                </ul>
+                <pre><code>$('a[data-imagelightbox="events"]').imageLightbox();<br/>
+                    $(document)<br/>
+                    .on("start.ilb2", function () { console.log("start.ilb2"); })<br/>
+                    .on("loaded.ilb2", function () { console.log("loaded.ilb2"); })<br/>
+                    .on("next.ilb2", function () { console.log("next.ilb2"); })<br/>
+                    .on("previous.ilb2", function () { console.log("previous.ilb2"); })<br/>
+                    .on("quit.ilb2", function () {  console.log("quit-ilb2"); });
+                </code></pre>
+            </section>
+        </div>
+
+        <footer>
+            <p>Imagelightbox is currently maintained by <a href="https://github.com/marekdedic">Marek Dědič</a>. Photos taken by <a href="https://www.veeck.de">rejas</a>, who has also maintained the project for several years.
+                Original work by <a href="http://osvaldas.info/image-lightbox-responsive-touch-friendly">Osvaldas Valutis</a>.</p>
+            <p>This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.
+                Tactile theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.</p>
+        </footer>
+    </div>
+</div>
+</body>
+</html>