Fancybox galerie

https://github.com/fancyapps/fancybox

weby/it/index.html

@@ -5,7 +5,10 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 
 	<title>Seznamovák PedF ČJ, HV, M, IT, PG, AJ</title>
+
 	<link href="css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/fancybox.min.css" rel="stylesheet" type="text/css">
+	<!-- Move from CDN to localhost -->
 	<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700" rel="stylesheet" type="text/css">
 </head>
 
@@ -68,9 +71,16 @@
 
 	<div class="container">
 	<div class="row">
-	  <div class="column normal-column"><img src="img/P8307919-new.jpg" class="column-img"></div>
-
-	  <div class="column normal-column"><img src="img/P9220299.jpg" class="column-img"></div>
+		<div class="column normal-column">
+			<a data-fancybox="gallery" href="img/P8307919-new.jpg">
+				<img src="img/P8307919-new.jpg" class="column-img">
+			</a>
+		</div>
+		<div class="column normal-column">
+			<a data-fancybox="gallery" href="img/P9220299.jpg">
+				<img src="img/P9220299.jpg" class="column-img">
+			</a>
+		</div>
 	</div>
 
 	<div class="row">
@@ -314,22 +324,42 @@ Na závěr bych doplnil, že mezi mé koníčky patří dávat si „lattéčko
 
 	<p><i><img src="img/troj-cerveny.png" class="troj"> Seznamovák byl super, hned bych se tam vrátila. Bylo to fajn - vypnout a pobavit se ☺</i></p>
 
+	<!-- Oh fuck, rwrite this in css grid please. -->
 	<div class="row">
-	  <div class="column normal-column"><img src="img/Fotky/2018/IMG_2444.jpg" class="column-img"></div>
-
-	  <div class="column normal-column"><img src="img/Fotky/2018/IMG_2465.jpg" class="column-img"></div>
+		<div class="column normal-column">
+			<a data-fancybox="gallery" href="img/Fotky/2018/IMG_2444.jpg">
+				<img src="img/Fotky/2018/IMG_2444.jpg" class="column-img">
+			</a>
+		</div>
+		<div class="column normal-column">
+			<a data-fancybox="gallery" href="img/Fotky/2018/IMG_2465.jpg">
+				<img src="img/Fotky/2018/IMG_2465.jpg" class="column-img">
+			</a>
+		</div>
 	</div>
-  
 	<div class="row">
-	  <div class="column normal-column"><img src="img/Fotky/2018/IMG_2507.jpg" class="column-img"></div>
-
-	  <div class="column normal-column"><img src="img/Fotky/2018/IMG_2591.jpg" class="column-img"></div>
+		<div class="column normal-column">
+			<a data-fancybox="gallery" href="img/Fotky/2018/IMG_2507.jpg">
+				<img src="img/Fotky/2018/IMG_2507.jpg" class="column-img">
+			</a>
+		</div>
+		<div class="column normal-column">
+			<a data-fancybox="gallery" href="img/Fotky/2018/IMG_2591.jpg">
+				<img src="img/Fotky/2018/IMG_2591.jpg" class="column-img">
+			</a>
+		</div>
 	</div>
-
 	<div class="row">
-	  <div class="column normal-column"><img src="img/Fotky/2018/IMG_2676.jpg" class="column-img"></div>
-
-	  <div class="column normal-column"><img src="img/Fotky/2018/IMG_2926.jpg" class="column-img"></div>
+		<div class="column normal-column">
+			<a data-fancybox="gallery" href="img/Fotky/2018/IMG_2676.jpg">
+				<img src="img/Fotky/2018/IMG_2676.jpg" class="column-img">
+			</a>
+		</div>
+		<div class="column normal-column">
+			<a data-fancybox="gallery" href="img/Fotky/2018/IMG_2926.jpg">
+				<img src="img/Fotky/2018/IMG_2926.jpg" class="column-img">
+			</a>
+		</div>
 	</div>
 
 	<div class="title" id="faq">
@@ -382,5 +412,8 @@ Na závěr bych doplnil, že mezi mé koníčky patří dávat si „lattéčko
 
 	<p style="text-align: center">Design: Veronika Vohlídková; Vytvořil: <a href="mailto:honzavais+seznamovakweb@gmail.com">Jan Vais</a> a Emil Miler</p>
 	</div>
+
+	<script src="js/jquery-3.3.1.min.js"></script>
+	<script src="js/fancybox.min.js"></script>
 </body>
 </html>