Zvětšování náhledových obrázků

sass/_lightbox.scss

@@ -0,0 +1,45 @@
+.lightbox {
+	display: none;
+
+	position: fixed;
+	z-index: 999;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	padding: 1em 0;
+
+	background: rgba(0, 0, 0, 0.8);
+	cursor: pointer;
+
+	&.visible {
+		display: block;
+		animation: fade-in .3s ease-out;
+
+		div { animation: zoom-in .2s ease-out }
+	}
+
+	div {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 1500px;
+		margin: 0 auto;
+
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: contain;
+	}
+}
+
+// Keyframes have to be used, because transition
+// does not work with `display: none`
+@keyframes fade-in {
+	0% { display: none; opacity: 0 }
+	1% { display: block; opacity: 0 }
+	100% { display: block; opacity: 1 }
+}
+@keyframes zoom-in {
+	0% { transform: scale(.5) }
+	100% { transform: scale(1) }
+}

sass/style.scss

@@ -5,6 +5,7 @@
 @import "tags";
 @import "tables";
 @import "fonts";
+@import "lightbox";
 
 
 *, *:before, *:after {
@@ -68,6 +69,7 @@ main {
 			margin:0 auto 2em auto;
 			border-radius:5px;
 			border:1px solid $border;
+			cursor: pointer;
 		}
 	
 		h2 { margin: 0.85em 0 }

templates/macros.html

@@ -71,7 +71,8 @@
 	{% for asset in page.assets %}
 		{% if asset is matching("[img.](jpg|png)$") %}
 			{% set image = resize_image(path=asset, width=900, height=400, op="fill") %}
-			<a href="{{ get_url(path=asset) }}"><img src="{{ image.url }}" alt="Náhled"></a>
+			<img src="{{ image.url }}" alt="Náhled" id="preview-image">
+			<div id="fullsize-image" class="lightbox"><div style="background-image:url('{{ get_url(path=asset) }}')"></div></div>
 			{% break %}
 		{% endif %}
 	{% endfor %}

templates/page.html

@@ -26,5 +26,10 @@
 	for(let i=0; i<list_items.length; i++){
 		list_items[i].addEventListener('click', function(){ this.classList.toggle("completed"); }, false);
 	}
+
+	let preview_image = document.getElementById('preview-image');
+	let fullsize_image = document.getElementById('fullsize-image');
+	preview_image.addEventListener('click', function(){ fullsize_image.classList.add("visible"); }, false);
+	fullsize_image.addEventListener('click', function(){ fullsize_image.classList.remove("visible"); }, false);
 </script>
 {% endblock script %}