Download raw (5.7 KB)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<title>Gallery Sketch</title>
</head>
<body>
<div id="container">
<!-- <div class="item gallery voice">
<div class="gallery--image--container voice-image">
<img
class="gallery--image"
src="img/estherKokmeijer_1_dither.png"
alt="EstherKokmeijer"
/>
</div>
<div class="gallery--image--container voice-image">
<img
class="gallery--image"
src="img/estherKokmeijer_2_dither.png"
alt="EstherKokmeijer"
/>
</div>
</div> -->
<!-- Trigger the Modal -->
<div class="item gallery voice">
<div class="gallery--image">
<div class="gallery--image--container voice-image">
<img
class="gallery--image-img"
id="agreement_with_nature_-_esther_kokmeijer1"
src="img/agreement_with_nature_-_esther_kokmeijer1_dither.png"
alt="agreement_with_nature_-_esther_kokmeijer1"
/>
</div>
<p class="gallery--image-caption">Photo © Esther Kokmeijer</p>
</div>
<div class="gallery--image">
<div class="gallery--image--container voice-image">
<img
class="gallery--image-img"
id="agreement_with_nature_-_esther_kokmeijer3"
src="img/agreement_with_nature_-_esther_kokmeijer3_dither.png"
alt="agreement_with_nature_-_esther_kokmeijer3"
/>
<p class="gallery--image-caption">Photo © Esther Kokmeijer</p>
</div>
</div>
<div class="gallery--image">
<div class="gallery--image--container voice-image">
<img
class="gallery--image-img"
id="agreement_with_nature_-_esther_kokmeijer7"
src="img/agreement_with_nature_-_esther_kokmeijer7_dither.png"
alt="agreement_with_nature_-_esther_kokmeijer7"
/>
</div>
<p class="gallery--image-caption">Photo © Esther Kokmeijer</p>
</div>
</div>
<div class="item gallery voice">
<div class="gallery--image">
<div class="gallery--image--container voice-image">
<img
class="gallery--image-img"
id="zijlijn_34"
src="img/zijlijn_34_dither.png"
alt="zijlijn_34"
/>
</div>
<p class="gallery--image-caption">Photo © Esther Kokmeijer</p>
</div>
<div class="gallery--image">
<div class="gallery--image--container voice-image">
<img
class="gallery--image-img"
id="zijlijn_grevelingen__pic_by_kevin_trappeniers_01"
src="img/zijlijn_grevelingen__pic_by_kevin_trappeniers_01_dither.png"
alt="zijlijn_grevelingen__pic_by_kevin_trappeniers_01"
/>
</div>
<p class="gallery--image-caption">Photo © Esther Kokmeijer</p>
</div>
<div class="gallery--image">
<div class="gallery--image--container voice-image">
<img
class="gallery--image-img"
id="zijlijn_noorwegen__pic_by_anders_bibow_olsen_01"
src="img/zijlijn_noorwegen__pic_by_anders_bibow_olsen_01_dither.png"
alt="zijlijn_noorwegen__pic_by_anders_bibow_olsen_01"
/>
</div>
<p class="gallery--image-caption">Photo © Esther Kokmeijer</p>
</div>
</div>
<div class="item gallery voice">
<div class="gallery--image">
<div class="gallery--image--container voice-image">
<img
class="gallery--image-img"
id="ff02_-_1"
src="img/ff02_-_1_dither.png"
alt="ff02_-_1"
/>
</div>
<p class="gallery--image-caption">Photo © Esther Kokmeijer</p>
</div>
</div>
<div class="item gallery voice">
<div class="gallery--image">
<div class="gallery--image--container voice-image">
<img
class="gallery--image-img"
id="ff03_-_1"
src="img/ff03_-_1_dither.png"
alt="ff03_-_1"
/>
</div>
<p class="gallery--image-caption">Photo © Esther Kokmeijer</p>
</div>
</div>
<div class="item gallery voice">
<div class="gallery--image">
<div class="gallery--image--container voice-image">
<img
class="gallery--image-img"
id="greet"
src="img/greet_dither.png"
alt="greet"
/>
</div>
<p class="gallery--image-caption">Photo © Esther Kokmeijer</p>
</div>
</div>
</div>
<!-- The Modal -->
<div id="modalbox" class="modal">
<!-- The Close Button -->
<span class="modalNav close">×</span>
<span class="modalNav arrow leftArrow">←</span>
<span class="modalNav arrow rightArrow">→</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="modalImage" />
<!-- Modal Caption (Image Text) -->
<div id="modalCaption"></div>
</div>
</body>
<script src="script.js"></script>
</html>