diff --git a/imglightbox.css b/imglightbox.css new file mode 100644 index 0000000..a560242 --- /dev/null +++ b/imglightbox.css @@ -0,0 +1,63 @@ +/** + * imglightbox + * @version 1.0.3 + * @author Ferenc Czigler + * @see https://github.com/Serrin/ + * + * + * + */ + +#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 new file mode 100644 index 0000000..13d4039 --- /dev/null +++ b/imglightbox.html @@ -0,0 +1,165 @@ + + + + + + + +imgLightbox + + + + + + + + + + +
+

imgLightbox

+

Just another simple image lightbox without dependecies.

+

IE11, mobile browser and ES5 compatible.

+
+ +
+ +

API

+ +

Include

+ +

Insert the .js and .css file in the page header:

+
<link href="imglightbox.min.css" rel="stylesheet" type="text/css">
+<script src="imglightbox.min.js"></script>
+ +

Insert this code in your html 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>
+ +

Get the library version:

+

+ + alert( imgLightbox.config.version ); +

+ +

Set config.download (default is false):

+

+ + imgLightbox.config.download = true; +
+ + imgLightbox.config.download = false; +

+ +

imgLightbox.open() method parameters:

+

imgLightbox.open(<filename: string>[,download: boolean]);

+ +
+ +

Samples

+ +

Open with the download button

+

imgLightbox.open('test1.jpg',true);

+

+

Open with the config.download setting:

+

imgLightbox.open('test1.jpg');

+

+

Open without the download button:

+

imgLightbox.open('test1.jpg',false);

+

+ +
+ +

Small size image with the download button:

+

imgLightbox.open('test2.jpg',true);

+

+

imgLightbox.open('test2.jpg');

+ +

Small size image with the config.download setting:

+

imgLightbox.open('test2.jpg');

+

+ +

Small size image without the download button:

+

imgLightbox.open('test2.jpg',false);

+

+ +
+ +
+

https://opensource.org/licenses/MIT

+

MIT License

+

SPDX short identifier: MIT

+

Copyright (c) 2017 Ferenc Czigler

+

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:

+

The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software.

+

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.

+
+ +
+ + + + +
+
+ + ↧ + + ⨯ +
+
+ + + diff --git a/imglightbox.js b/imglightbox.js new file mode 100644 index 0000000..ade1bfc --- /dev/null +++ b/imglightbox.js @@ -0,0 +1,36 @@ +/** + * imglightbox + * @version 1.0.3 + * @author Ferenc Czigler + * @see https://github.com/Serrin/ + * + * + * + */ + +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 new file mode 100644 index 0000000..9c3cff8 --- /dev/null +++ b/imglightbox.min.css @@ -0,0 +1,2 @@ +/** imglightbox * @version 1.0.3 * @see https://github.com/Serrin/ */ +#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;} \ No newline at end of file diff --git a/imglightbox.min.js b/imglightbox.min.js new file mode 100644 index 0000000..0fd58e1 --- /dev/null +++ b/imglightbox.min.js @@ -0,0 +1,2 @@ +/** imglightbox * @version 1.0.3 * @see https://github.com/Serrin/ */ +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";}};}()); \ No newline at end of file diff --git a/test1-400.jpg b/test1-400.jpg new file mode 100644 index 0000000..862998e Binary files /dev/null and b/test1-400.jpg differ diff --git a/test1.jpg b/test1.jpg new file mode 100644 index 0000000..9c283d7 Binary files /dev/null and b/test1.jpg differ diff --git a/test2.jpg b/test2.jpg new file mode 100644 index 0000000..976672c Binary files /dev/null and b/test2.jpg differ