<?php
/**
* @file fotogalery.php
* @brief Zobrazení fotogalerie hotelu, restaurace, pokojů, sálů a okolí.
*
* Tento skript:
* - Zobrazuje fotogalerii s různými sekcemi (Hotel & Restaurace, Pokoje, Sály, Okolí & Areál).
* - Umožňuje prohlížení fotografií v modálním okně po kliknutí na obrázek.
*/
?>
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Fotogalerie Oázy Brádlo – prohlédněte si fotografie našeho hotelu, restaurace, pokojů, sálů a okolí. Inspirujte se pro svůj pobyt u nás.">
<title>Fotogalerie</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet" />
<link rel="stylesheet" href="css/fotogalery.css" />
<link rel="icon" href="media/logo-oaza2.png" type="image/x-icon" />
</head>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-FB7MMZ9KBB"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-FB7MMZ9KBB");
</script>
<nav>
<div class="container" id="home">
<div class="row"></div>
<div class="row navLinks text-center">
<div class="col-md-2 col-lg-2 col-12 link mt-3">
<a href="domů"> Domů </a>
</div>
<div class="col-md-2 col-lg-2 col-12 link expandable mt-3">
<a href="domů#akce">Akce</a>
<div class="submenu">
<a href="semináře">Semináře</a>
<a href="rekreace">Ozdravné pobyty</a>
<a href="dětské-pobyty">Dětské pobyty</a>
<a href="firemní">Firemní</a>
<a href="ostatní">Ostatní</a>
</div>
</div>
<div class="col-md-2 col-lg-2 col-12 text-center">
<a href="domů"><img src="media/logo-oaza2.png" alt="" width="80px" height="80px" /></a>
</div>
<div class="col-md-2 col-lg-2 col-12 link expandable mt-3">
<a href="fotogalerie">Fotogalerie</a>
<div class="submenu">
<a href="blog#tipy-na-výlety">Tipy na výlety</a>
<a href="blog">Aktuality</a>
</div>
</div>
<div class="col-md-1 col-lg-1 col-12 link expandable mt-3">
<a href="ceník">Ceník</a>
<div class="submenu">
<a href="platební-podmínky">Platební podmínky</a>
</div>
</div>
<div class="col-md-2 col-lg-2 col-12 link expandable mt-3">
<a href="domů#kontakt">Kontakt</a>
<div class="submenu">
<a href="gdpr">Zpracování údajů</a>
<a href="openPositions.php">Kariéra</a>
</div>
</div>
</div>
</div>
</nav>
<body>
<section class="galery">
<div class="spacer2"></div>
<div class="heading2">Hotel & Restaurace</div>
<div class="container photos">
<div class="row">
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/hotel&restaurace/water.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/hotel&restaurace/water.jpg" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/hotel&restaurace/tables.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/hotel&restaurace/tables.jpg" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/hotel&restaurace/bar.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/hotel&restaurace/bar.jpg" />
</div>
</div>
</div>
<div class="spacer50"></div>
<div class="container smallerH">
<div class="row">
<div class="col-md-4 col-lg-4 smallGone hideSmTablet">
<img src="media/recreation/left.png" alt="" />
</div>
<div class="col-md-4 col-lg-4 col-12 heading2 mt-5">Pokoje</div>
<div class="col-md-4 col-lg-4 smallGone hideSmTablet">
<img src="media/recreation/right.png" alt="" />
</div>
</div>
</div>
<div class="container photos">
<div class="row">
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rooms/1.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rooms/1.jpg" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rooms/5.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rooms/5.jpg" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rooms/4.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rooms/4.jpg" />
</div>
<div
class="col-12 spacer4 biggerTabletShow showTablet biggerGone"></div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rooms/9.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rooms/9.jpg" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rooms/6.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rooms/6.jpg" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rooms/8.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rooms/8.jpg" />
</div>
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="row smallerH">
<div class="col-md-4 col-lg-4 smallGone hideSmTablet">
<img src="media/seminar/lectors/2.png" alt="" />
</div>
<div class="col-md-4 col-lg-4 col-12">
<div class="heading2">Sály</div>
</div>
<div class="col-md-4 col-lg-4 smallGone hideSmTablet">
<img src="media/seminar/lectors/3.png" alt="" />
</div>
</div>
<div class="spacer50"></div>
</div>
<div class="container photos">
<div class="row">
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rent/1.1.png"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rent/1.1.png" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rent/2.1.png"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rent/2.1.png" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rent/3.png"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rent/3.png" />
</div>
<div
class="col-12 spacer4 biggerTabletShow showTablet biggerGone"></div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rent/4.1.png"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rent/4.1.png" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rent/5.png"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rent/5.png" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/rent/6.png"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/rent/6.png" />
</div>
</div>
</div>
<div class="spacer50"></div>
<div class="heading2">Okolí & Areál</div>
<div class="container photos">
<div class="row">
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/area/4.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/area/4.jpg" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/area/2.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/area/2.jpg" />
</div>
<div class="col-md-4 col-lg-4 col-12 text-center">
<img
src="media/fotogalery/area/5.jpg"
alt=""
data-toggle="modal"
data-target="#photoModal"
data-src="media/fotogalery/area/5.jpg" />
</div>
</div>
</div>
<div class="spacer50"></div>
<div
class="modal fade"
id="photoModal"
tabindex="-1"
aria-labelledby="photoModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="" id="modalImage" class="img-fluid" alt="Photo" />
</div>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div
class="modal fade"
id="photoModal"
tabindex="-1"
aria-labelledby="photoModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="" id="modalImage" class="img-fluid" alt="Photo" />
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const photos = document.querySelectorAll(".photos img");
const modalImage = document.getElementById("modalImage");
photos.forEach((photo) => {
photo.addEventListener("click", function() {
const src = this.getAttribute("data-src");
modalImage.setAttribute("src", src);
});
});
});
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>