Add basic carousel

layout/_base.html

@@ -111,8 +111,12 @@
 		<input type="hidden" name="language" value="es"/>
 	</form>
   <dialog class="hidden" id="dialog-image-modal">
-		<div id="modal-image-container">
-			<img id="modal-image" src="{{ list(images('work/poster'))[1].filenames[0] | static }}" alt="Ejemplo">
+		<div id="modal-image-container" class="vbox">
+			<div class="hbox">
+				<div id="img-prev">{{ 'prev' | svg}}</div>
+				<img id="modal-image" src="{{ list(images('work/poster'))[1].filenames[0] | static }}" alt="Ejemplo">
+				<div id="img-next">{{ 'next' | svg}}</div>
+			</div>
 		</div>
 	</dialog>
 	<script src="{{ 'js/image-modal.js' | static }}"></script>

static/css/image-modal.css

@@ -0,0 +1,28 @@
+#dialog-image-modal {
+	position: fixed;
+	background-color: rgba(255, 255, 255, .8);
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	border: 0;
+	padding: 0;
+}
+#dialog-image-modal::backdrop {
+	background: #ffffff00;
+}
+#modal-image-container {
+	margin-top: var(--header-space);
+}
+#modal-image {
+	object-fit: cover;
+	height: calc(100vh - var(--header-space) - var(--body-margin) - var(--tile-margin));
+}
+#img-prev {
+	margin-right: calc(2 * var(--tile-margin))
+}
+#img-next {
+	margin-left: calc(2 * var(--tile-margin))
+}
+#img-prev, #img-next {
+	width: var(--tile-margin);
+}

static/js/image-modal.js

@@ -0,0 +1,22 @@
+(function() {
+
+    var dialog = document.getElementById('dialog-image-modal');
+    dialog.returnValue = 'dialog-image-modal';
+
+    function openCheck(dialog) {
+        if(dialog.open) {
+            dialog.className = "";
+        } else {
+            dialog.className = "";
+        }
+    }
+
+    const tiles = document.getElementsByClassName('tile');
+    for (var i = 0; i < tiles.length; i++) {
+        // Update button opens a modal dialog
+        tiles.item(i).addEventListener('click', function() {
+            dialog.showModal();
+            openCheck(dialog);
+        });
+    }
+})();

static/svg/close.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 481.9 481.9" style="enable-background:new 0 0 481.9 481.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:none;stroke:#000000;stroke-width:36;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<circle class="st0" cx="240.9" cy="240.9" r="240.9"/>
+<line class="st1" x1="110.4" y1="110.1" x2="371.5" y2="371.3"/>
+<line class="st1" x1="371.5" y1="110.1" x2="110.4" y2="371.3"/>
+</svg>

static/svg/next.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 163.4 259.4" style="enable-background:new 0 0 163.4 259.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:none;stroke:#000000;stroke-width:36;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<path d="M161.1,134.6L10.3,258C6.2,261.3,0,258.4,0,253.1V6.3C0,1,6.2-1.9,10.3,1.4l150.8,123.4C164.2,127.3,164.2,132,161.1,134.6z
+	"/>
+</svg>

static/svg/prev.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 163.4 259.4" style="enable-background:new 0 0 163.4 259.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:none;stroke:#000000;stroke-width:36;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<path d="M2.3,134.6L153.1,258c4.1,3.4,10.3,0.4,10.3-4.9V6.3c0-5.3-6.2-8.2-10.3-4.9L2.3,124.8C-0.8,127.3-0.8,132,2.3,134.6z"/>
+</svg>