init project

templates/frontend/home/gallery.html.twig

@@ -0,0 +1,51 @@
+<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
+<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
+
+<style>
+    .image-container {
+        height: 200px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .image-container img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+    }
+</style>
+
+<div class="container">
+    <div class="row">
+        {% for file in files %}
+            <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
+                <div class="image-container">
+                    <a class="thumbnail fancybox" rel="lightbox" title="{{ file }}" href="{{ asset('/images/screenshot/' ~ file) }}">
+                        <div class='text-right'>
+                            <small class='text-muted'>{{ file }}</small>
+                        </div>
+                        <img alt="{{ file }}" src="{{ asset('/images/screenshot/' ~ file) }}" />
+                    </a>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</div>
+
+<script>
+$(document).ready(function(){
+    $(".fancybox").fancybox({
+        openEffect: "elastic",
+        closeEffect: "elastic",
+        helpers: {
+            title: { type: 'inside' }
+        },
+        titlePosition: "inside"
+    });
+});
+</script>