v1.0.3

Serrin · Nov 21, 2017 · a081801 · a081801
1 parent 3db6941
commit a081801
Show file tree

Hide file tree

Showing 8 changed files with 268 additions and 0 deletions.
diff --git a/imglightbox.css b/imglightbox.css
@@ -0,0 +1,63 @@
+/**
+ * imglightbox
+ * @version 1.0.3
+ * @author Ferenc Czigler <[email protected]>
+ * @see https://github.com/Serrin/
+ *
+ * <link href="imglightbox.css" rel="stylesheet" type="text/css">
+ * <script src="imglightbox.js"></script>
+ */
+
+#imgLightbox {
+  background-image: url('');
+  background-repeat: no-repeat;
+  background-size: contain; 
+  background-position: center center;
+  position: fixed;
+  top: 0%;
+  left: 0%;
+  background-color: black;
+  color: white;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  cursor: pointer;
+  display: none;
+  z-index: 9999998;
+}
+
+#imgLightbox a:link,
+#imgLightbox a:hover,
+#imgLightbox a:active,
+#imgLightbox a:visited {
+  text-decoration: none;
+}
+
+#imgLightbox-button-area {
+  cursor: pointer;
+  position: fixed;
+  right: 15px;
+  top: 0px;
+  padding: 20px;
+  color: white;
+  font-size: 40px;
+  z-index: 9999999;
+}  
+
+.imgLightbox-button {
+  display: inline-block;
+  filter: alpha(opacity=70);
+  -moz-opacity: 0.7;
+  opacity: 0.7;
+}
+
+.imgLightbox-button:hover {
+  filter: alpha(opacity=100);
+  -moz-opacity: 1;
+  opacity: 1;
+}
+
+#imgLightbox-button-download {
+  display: none;
+  color: white !important;
+}
diff --git a/imglightbox.html b/imglightbox.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<!-- version 1.0.3 -->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="icon" href="favicon.ico" type="image/x-icon">
+<title>imgLightbox</title>
+<meta name="Author" content="Czigler Ferenc">
+
+<link href="imglightbox.min.css" rel="stylesheet" type="text/css">
+<script src="imglightbox.min.js"></script>
+
+<style>
+
+*,:before,:after { box-sizing: border-box; word-break: break-all; word-wrap: break-word;}
+
+body {
+  font-family: Arial, sans-serif;
+  text-align: justify;
+  margin: 0 auto;
+  padding: 5px;
+  font-size: 15px;
+  max-width: 900px;
+  width: 100%;
+}
+
+header, footer, h1, h2, .center { text-align: center; }
+
+pre, code {
+  background-color: lightgrey;
+  text-align: left;
+  padding: 5px;
+  white-space: pre-wrap;
+  word-wrap: break-word;  
+}
+
+code, button { display: inline-block; margin: 2px; }
+
+.thumbnail { width: 300px; height: auto; }
+
+</style>
+
+</head>
+<body>
+
+<header>
+  <h1>imgLightbox</h1>
+  <p>Just another simple image lightbox without dependecies.</p>
+  <p>IE11, mobile browser and ES5 compatible.</p>
+</header>
+
+<hr/>
+
+<h2>API</h2>
+
+<h3>Include</h3>
+
+<p>Insert the .js and .css file in the page header:</p>
+<pre>&#60;link href="imglightbox.min.css" rel="stylesheet" type="text/css"&#62;
+&#60;script src="imglightbox.min.js"&#62;&#60;/script&#62;</pre>
+
+<p>Insert this code in your html page:</p>
+<pre>&#60;div id="imgLightbox" onclick="imgLightbox.close();"&#62;
+  &#60;div id="imgLightbox-button-area"&#62;
+    &#60;a title="download and close" id="imgLightbox-button-download"&#62;
+      &#60;span class="imgLightbox-button"&#62;&amp;#x021A7;&#60;/span&#62;
+    &#60;/a&#62; 
+    &#60;span title="close" class="imgLightbox-button" onclick="imgLightbox.close();"&#62;&amp;Cross;&#60;/span&#62;
+  &#60;/div&#62; 
+&#60;/div&#62;</pre>
+
+<h3>Get the library version:</h3>
+<p>
+  <button onclick="alert( imgLightbox.config.version );">alert</button>
+  <code>alert( imgLightbox.config.version );</code>
+</p>
+
+<h3>Set config.download (default is false):</h3>
+<p>
+  <button onclick="imgLightbox.config.download=true;">set true</button>
+  <code>imgLightbox.config.download = true;</code>
+  <br/>
+  <button onclick="imgLightbox.config.download=false;">set false</button>
+  <code>imgLightbox.config.download = false;</code>
+</p>
+
+<h3>imgLightbox.open() method parameters:</h3>
+<p><code>imgLightbox.open(&#60;filename: string&#62;[,download: boolean]);</code></p>
+
+<hr/>
+
+<h2>Samples</h2>
+
+<h3>Open with the download button</h3>
+<p><code>imgLightbox.open('test1.jpg',true);</code></p>
+<p class="center"><img src="test1-400.jpg" class="thumbnail" onclick="imgLightbox.open('test1.jpg',true);"></p>
+<h3>Open with the config.download setting:</h3>
+<p><code>imgLightbox.open('test1.jpg');</code></p>
+<p class="center"><img src="test1-400.jpg" class="thumbnail" onclick="imgLightbox.open('test1.jpg');"></p>
+<h3>Open without the download button:</h3>
+<p><code>imgLightbox.open('test1.jpg',false);</code></p>
+<p class="center"><img src="test1-400.jpg" class="thumbnail" onclick="imgLightbox.open('test1.jpg',false);"></p>
+
+<hr/>
+
+<h3>Small size image with the download button:</h3>
+<p><code>imgLightbox.open('test2.jpg',true);</code></p>
+<p class="center"><img src="test2.jpg" onclick="imgLightbox.open('test2.jpg',true);"></p>
+<p><code>imgLightbox.open('test2.jpg');</code></p>
+
+<h3>Small size image with the config.download setting:</h3>
+<p><code>imgLightbox.open('test2.jpg');</code></p>
+<p class="center"><img src="test2.jpg" onclick="imgLightbox.open('test2.jpg');"></p>
+
+<h3>Small size image without the download button:</h3>
+<p><code>imgLightbox.open('test2.jpg',false);</code></p>
+<p class="center"><img src="test2.jpg" onclick="imgLightbox.open('test2.jpg',false);"></p>
+
+<hr/>
+
+<div>
+  <p><a href="https://opensource.org/licenses/MIT" target="_blank">https://opensource.org/licenses/MIT</a></p>
+  <h2>MIT License</h2>
+  <p>SPDX short identifier: MIT</p>
+  <p>Copyright (c) 2017 Ferenc Czigler</p>
+  <p>Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:</p>
+  <p>The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.</p>
+  <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.</p>
+</div>
+
+<hr/>
+
+<footer>
+  <small>
+    <p>Free photos from <a href="https://unsplash.com/" target="_blank">https://unsplash.com/</a></p>
+    <p><a href="https://github.com/Serrin/" target="_blank">Github</a></p>
+    <p>&copy; Ferenc Czigler 2017</p>
+  </small>
+</footer>
+
+<!-- Insert these code into the page: -->
+<div id="imgLightbox" onclick="imgLightbox.close();">
+  <div id="imgLightbox-button-area">
+    <a title="download and close" id="imgLightbox-button-download">
+      <span class="imgLightbox-button">&#x021A7;</span>
+    </a>
+    <span title="close" class="imgLightbox-button" onclick="imgLightbox.close();">&Cross;</span>
+  </div> 
+</div>
+
+</body>
+</html>
diff --git a/imglightbox.js b/imglightbox.js
@@ -0,0 +1,36 @@
+/**
+ * imglightbox
+ * @version 1.0.3
+ * @author Ferenc Czigler <[email protected]>
+ * @see https://github.com/Serrin/
+ *
+ * <link href="imglightbox.css" rel="stylesheet" type="text/css">
+ * <script src="imglightbox.js"></script>
+ */
+
+var imgLightbox = (function(){
+  "use strict";
+  return {
+    config: {
+      version: "1.0.3",
+      download: false
+    },
+    open: function (filename, download) {
+      if (typeof download !== "boolean") { download = this.config.download; }
+      var els = document.getElementById("imgLightbox").style;
+      els.backgroundImage = "url('"+filename+"')";
+      els.display="block";
+      var dlbtn = document.getElementById("imgLightbox-button-download");
+      if (download) {
+        dlbtn.style.display = "inline-block";
+        dlbtn.href = filename;
+        dlbtn.download = filename;
+      } else {
+        dlbtn.style.display = "none";
+      }
+    },
+    close: function () {
+      document.getElementById("imgLightbox").style.display="none";
+    }
+  };
+}());
diff --git a/imglightbox.min.css b/imglightbox.min.css
diff --git a/imglightbox.min.js b/imglightbox.min.js
diff --git a/test1-400.jpg b/test1-400.jpg
diff --git a/test1.jpg b/test1.jpg
diff --git a/test2.jpg b/test2.jpg