Add viewerjs from https://github.com/fengyuanchen/viewerjs.

src/main/resources/js/segrada.js

@@ -744,6 +744,34 @@ function escapeHTML(myString) {
 			});
 		});
 
+		// *******************************************************
+		// Image Viewer/Lightbox
+		$('.sg-lg-image', part).each(function() {
+			var id = $(this).attr('id');
+
+			if (id) {
+				new Viewer(document.getElementById(id), {
+					navbar: false,
+					toolbar: {
+						zoomIn: 1,
+						zoomOut: 1,
+						oneToOne: 1,
+						reset: 1,
+						prev: 0,
+						play: {
+							show: 1,
+							size: 'large'
+						},
+						next: 0,
+						rotateLeft: 1,
+						rotateRight: 1,
+						flipHorizontal: 1,
+						flipVertical: 1
+					}
+				});
+			}
+		});
+
 		// *******************************************************
 		// Graph: load remote data and update graph view
 		$('a.sg-graph-update', part).click(function(e) {

src/main/resources/less/single/segrada.less

@@ -152,6 +152,11 @@ td .sg-data-taglist span {
   width: 100%;
 }
 
+.sg-lg-image {
+  width: 100%;
+  cursor: pointer; // to make clear, it is clickable - viewer
+}
+
 .sg-stop-flow {
   overflow: hidden;
 }

src/main/webapp/WEB-INF/templates/file/show.html

@@ -11,7 +11,7 @@
 <div th:replace="partials/common :: browser"></div>
 
 <div class="container">
-	<div class="sg-data sg-pictogram" th:id="${'file-' + entity.uid}">
+	<div class="sg-data sg-file" th:id="${'file-' + entity.uid}">
 		<div th:replace="partials/common :: headerboxright (type=#{File},base='file',entity=${entity},access='FILE')"></div>
 		<div th:replace="partials/common :: taglist (tags=${entity.tags})"></div>
 		<h4 class="sg-data-header">
@@ -62,7 +62,7 @@ <h4 class="sg-data-header">
 
 				<div th:if="${entity.fileIdentifier}" class="sg-margin-top sg-margin-bottom">
 					<div th:if="${#strings.startsWith(entity.mimeType,'image/')}">
-						<img src="#" th:src="@{/file/get/{uid}(uid=${entity.uid})}" alt="" th:alt-title="${entity.title}" style="width: 100%;" />
+						<img src="#" id="sg-image-dummy" th:src="@{/file/get/{uid}(uid=${entity.uid})}" alt="" th:alt-title="${entity.title}" class="sg-lg-image" th:id="${'sg-image-' + entity.uid}" />
 					</div>
 					<div th:if="${entity.mimeType} == 'application/pdf'">
 						<iframe src="../../../js/pdfjs/web/viewer.html" th:src="@{/js/pdfjs/web/viewer.html(file=@{/file/get/{uid}(uid=${entity.uid})})}" width="100%" height="400"></iframe>

src/main/webapp/WEB-INF/templates/partials/common.html

@@ -14,6 +14,7 @@
 	<link rel="stylesheet" href="../../../css/jquery.simplepicker.css" th:href="@{/css/jquery.simplepicker.css}" />
 	<link rel="stylesheet" href="../../../css/vis.css" th:href="@{/css/vis.css}" />
 	<link rel="stylesheet" href="../../../css/summernote.css" th:href="@{/css/summernote.css}" />
+	<link rel="stylesheet" href="../../../css/viewer.min.css" th:href="@{/css/viewer.min.css}" />
 	<link rel="stylesheet" href="../../../css/segrada.css" th:href="@{/css/segrada.css}" />
 
 	<!--/* HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries */-->
@@ -278,6 +279,8 @@ <h3>Font Awesome Icons</h3>
 	<!--/* HTML Editor */-->
 	<script src="../../../js/vendor/summernote.min.js" th:src="@{/js/vendor/summernote.min.js}"></script>
 	<script src="../../../js/vendor/summernote-de.js" th:src="@{'/js/vendor/summernote-' + ${#locale.language} + '.js'}" th:unless="${#locale.language.equals('en')}"></script>
+	<!--/* Image Viewer */-->
+	<script src="../../../js/vendor/viewer.min.js" th:src="@{/js/vendor/viewer.min.js}"></script>
 	<script src="../../../js/segrada.min.js" th:src="@{/js/segrada.min.js}"></script>
 
 	<!-- /* Generic modal */-->