Skip to content

Commit

Permalink
v1.0.5: new config and open method parameter (newwindow) + JS fixes +…
Browse files Browse the repository at this point in the history 
… added u87.min.css v0.9.18

v1.0.5:
 - new config and open method parameter (newwindow) 
 - JS fixes
 - added u87.min.css v0.9.18
  • Loading branch information
@Serrin
Serrin authored Nov 18, 2020
1 parent 317a9c5 commit c390822
Show file tree
Hide file tree
Showing 7 changed files with 336 additions and 59 deletions.
8 changes: 4 additions & 4 deletions imglightbox.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/**
* imglightbox
* @version 1.0.4
* @version 1.0.5
* @author Ferenc Czigler <[email protected]>
* @see https://github.com/Serrin/
* @see https://github.com/Serrin/imgLightbox
*
* <link href="imglightbox.css" rel="stylesheet" type="text/css">
* <script src="imglightbox.js"></script>
Expand Down Expand Up @@ -31,7 +31,7 @@
#imgLightbox a:hover,
#imgLightbox a:active,
#imgLightbox a:visited {
text-decoration: none;
text-decoration: none !important;
}

#imgLightbox-button-area {
Expand All @@ -58,7 +58,7 @@
opacity: 1;
}

#imgLightbox-button-download {
#imgLightbox-button-download, #imgLightbox-button-newwindow {
display: none;
color: white !important;
}
139 changes: 93 additions & 46 deletions imglightbox.html
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,27 @@
<!DOCTYPE html>
<!-- version 1.0.4 -->
<!-- version 1.0.5 -->
<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="u87.min.css" rel="stylesheet" type="text/css">

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

<style>

*,:before,:after { box-sizing: border-box; word-break: break-all; word-wrap: break-word;}

body {
font-family: Arial, Helvetica, 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>
<body class="container">

<header>
<h1>imgLightbox</h1>
Expand All @@ -63,6 +42,9 @@ <h3>Include</h3>
<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="open in new window and close" id="imgLightbox-button-newwindow"&#62;
&#60;span class="imgLightbox-button"&#62;&amp;UpperRightArrow;&#60;/span&#62;
&#60;/a&#62;
&#60;a title="download and close" id="imgLightbox-button-download"&#62;
&#60;span class="imgLightbox-button"&#62;&amp;DownArrowBar;&#60;/span&#62;
&#60;/a&#62;
Expand All @@ -85,37 +67,99 @@ <h3>Set config.download (default is false):</h3>
<code>imgLightbox.config.download = false;</code>
</p>

<h3>Set config.newwindow (default is false):</h3>
<p>
<button onclick="imgLightbox.config.newwindow=true;">set true</button>
<code>imgLightbox.config.newwindow = true;</code>
<br/>
<button onclick="imgLightbox.config.newwindow=false;">set false</button>
<code>imgLightbox.config.newwindow = false;</code>
</p>

<h3>imgLightbox.open() method parameters:</h3>
<p><code>imgLightbox.open(&#60;filename: string&#62;[,download: boolean]);</code></p>
<p><code>imgLightbox.open(&#60;filename: string&#62;[,download: boolean[,newwindow: 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>
<div class="flex">
<div class="flex-f-1">
<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>
</div>
<div class="flex-f-1">
<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>
</div>
</div>

<hr/>
<div class="flex">
<div class="flex-f-1">
<h3>Open without the download and with the newwindow buttons:</h3>
<p><code>imgLightbox.open('test1.jpg',false,true);</code></p>
<p class="center"><img src="test1-400.jpg" class="thumbnail" onclick="imgLightbox.open('test1.jpg',false,true);"></p>
</div>
<div class="flex-f-1">
<h3>Small size image without the download and with the newwindow buttons:</h3>
<p><code>imgLightbox.open('test2.jpg',false,true);</code></p>
<p class="center"><img src="test2.jpg" onclick="imgLightbox.open('test2.jpg',false,true);"></p>
</div>
</div>

<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>
<div class="flex">
<div class="flex-f-1">
<h3>Open with the download and newwindow buttons:</h3>
<p><code>imgLightbox.open('test1.jpg',true,true);</code></p>
<p class="center"><img src="test1-400.jpg" class="thumbnail" onclick="imgLightbox.open('test1.jpg',true,true);"></p>
</div>
<div class="flex-f-1">
<h3>Small size image with the download and newwindow buttons:</h3>
<p><code>imgLightbox.open('test2.jpg',true,true);</code></p>
<p class="center"><img src="test2.jpg" onclick="imgLightbox.open('test2.jpg',true,true);"></p>
</div>
</div>

<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>
<div class="flex">
<div class="flex-f-1">
<h3>Open with the config.download and config.newwindow settings:</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>
</div>
<div class="flex-f-1">
<h3>Small size image with the config.download and config.newwindow settings:</h3>
<p><code>imgLightbox.open('test2.jpg');</code></p>
<p class="center"><img src="test2.jpg" onclick="imgLightbox.open('test2.jpg');"></p>
</div>
</div>

<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>
<div class="flex">
<div class="flex-f-1">
<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>
</div>
<div class="flex-f-1">
<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>
</div>
</div>

<div class="flex">
<div class="flex-f-1">
<h3>Open without the download and newwindow buttons:</h3>
<p><code>imgLightbox.open('test1.jpg',false,false);</code></p>
<p class="center"><img src="test1-400.jpg" class="thumbnail" onclick="imgLightbox.open('test1.jpg',false,false);"></p>
</div>
<div class="flex-f-1">
<h3>Small size image without the download and newwindow buttons:</h3>
<p><code>imgLightbox.open('test2.jpg',false,false);</code></p>
<p class="center"><img src="test2.jpg" onclick="imgLightbox.open('test2.jpg',false,false);"></p>
</div>
</div>

<hr/>

Expand Down Expand Up @@ -146,14 +190,17 @@ <h2>MIT License</h2>
<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><a href="https://github.com/Serrin/imgLightbox" 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="open in new window and close" id="imgLightbox-button-newwindow">
<span class="imgLightbox-button">&UpperRightArrow;</span>
</a>
<a title="download and close" id="imgLightbox-button-download">
<span class="imgLightbox-button">&DownArrowBar;</span>
</a>
Expand Down
21 changes: 16 additions & 5 deletions imglightbox.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/**
* imglightbox
* @version 1.0.4
* @version 1.0.5
* @author Ferenc Czigler <[email protected]>
* @see https://github.com/Serrin/
* @see https://github.com/Serrin/imgLightbox
*
* <link href="imglightbox.css" rel="stylesheet" type="text/css">
* <script src="imglightbox.js"></script>
Expand All @@ -12,22 +12,33 @@ var imgLightbox = (function(){
"use strict";
return {
config: {
version: "1.0.4",
download: false
version: "1.0.5",
download: false,
newwindow: false
},
open: function (filename, download) {
open: function (filename, download, newwindow) {
if (typeof download !== "boolean") { download = this.config.download; }
if (typeof newwindow !== "boolean") { newwindow = this.config.newwindow; }
var els = document.getElementById("imgLightbox").style;
els.backgroundImage = "url('"+filename+"')";
els.display = "block";
var dlbtn = document.getElementById("imgLightbox-button-download");
var nwbtn = document.getElementById("imgLightbox-button-newwindow");
if (download) {
dlbtn.style.display = "inline-block";
dlbtn.href = filename;
dlbtn.target = "_blank";
dlbtn.download = filename;
} else {
dlbtn.style.display = "none";
}
if (newwindow) {
nwbtn.style.display = "inline-block";
nwbtn.href = filename;
nwbtn.target = "_blank";
} else {
nwbtn.style.display = "none";
}
},
close: function () {
document.getElementById("imgLightbox").style.display="none";
Expand Down
4 changes: 2 additions & 2 deletions imglightbox.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit c390822

Please sign in to comment.