initial commit

leomoon-studios · Feb 2, 2019 · e151c28 · e151c28
commit e151c28
Show file tree

Hide file tree

Showing 12 changed files with 757 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# LeoMoon Lightbox
+## More Info / Download
+https://leomoon.com/downloads/web-apps/leomoon-lightbox/
diff --git a/src/img/image1.jpg b/src/img/image1.jpg
diff --git a/src/img/image1_thumb.jpg b/src/img/image1_thumb.jpg
diff --git a/src/img/image2.jpg b/src/img/image2.jpg
diff --git a/src/img/image2_thumb.jpg b/src/img/image2_thumb.jpg
diff --git a/src/img/image3.jpg b/src/img/image3.jpg
diff --git a/src/img/image3_thumb.jpg b/src/img/image3_thumb.jpg
diff --git a/src/img/image4.jpg b/src/img/image4.jpg
diff --git a/src/img/image4_thumb.jpg b/src/img/image4_thumb.jpg
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,30 @@
+<html>
+	<head>
+		<link rel="stylesheet" id="style-css"  href="style.css" type="text/css" media="all" />
+	</head>
+	<body>
+		<h1>LeoMoon LightBox</h1>
+		<p>Responsive CSS only minimal lightbox, to quickly preview article thumbnails.</p>
+		<h2>Example with Links</h2>
+		<p>
+			<a href="#image1">Image 1</a>&nbsp;&bull;&nbsp;
+			<a href="#image2">Image 2</a>&nbsp;&bull;&nbsp;
+			<a href="#image3">Image 3</a>&nbsp;&bull;&nbsp;
+			<a href="#image4">Image 4</a>
+		</p>
+		<h2>Example with Thumbnails</h2>
+		<p>
+			<a href="#image1"><img src="img/image1_thumb.jpg" /></a>&nbsp;
+			<a href="#image2"><img src="img/image2_thumb.jpg" /></a>&nbsp;
+			<a href="#image3"><img src="img/image3_thumb.jpg" /></a>&nbsp;
+			<a href="#image4"><img src="img/image4_thumb.jpg" /></a>
+		</p>
+		<!-- add the full size images -->
+		<a href="#_" class="lmbox">
+			<div id="image1"><img src="img/image1.jpg"></div>
+			<div id="image2"><img src="img/image2.jpg"></div>
+			<div id="image3"><img src="img/image3.jpg"></div>
+			<div id="image4"><img src="img/image4.jpg"></div>
+		</a>
+	</body>
+</html>
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,49 @@
+.lmbox div {
+	visibility: hidden;
+	position: fixed;
+	z-index: 75;
+	text-align: center;
+	justify-content: center;
+	align-items: center;
+}
+
+.lmbox div:before {
+	content: '';
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 74;
+	background-color: rgba(0, 0, 0, 0);
+	transition: all 0.5s;
+}
+
+.lmbox div img {
+	position: absolute;
+	z-index: 77;
+	max-width: 100%;
+	max-height: 100%;
+	margin-left: -9999px;
+	opacity: 0;
+	transition-property: opacity;
+	transition-duration: 0.5s, 0.2s;
+	transition-timing-function: ease-in-out, ease-out;
+}
+
+.lmbox div:target {
+	visibility: visible;
+}
+
+.lmbox div:target:before {
+	background-color: rgba(0, 0, 0, 0.9);
+}
+
+.lmbox div:target img {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	margin-left: 0px;
+	opacity: 1;
+}