<?php
$title = 'Galerie';
require_once 'queries.php';
require 'elements/header.php'; ?>
    <div id="scroll" class="sombre flex">
        <section class="gallery">
                <h2 class="title">Galerie</h2>
            <ul class="row">
                <li class="column">
                <?php if (count($col1) > 0):
                foreach($col1 as $value):?>
                    <img src="img/gallery/<?=$value['picture']?>" id="myImg" alt="">
                    <div id="myModal" class="modal">
                        <!-- The Close Button -->
                        <span class="close">×</span>
                        <!-- Modal Content (The Image) -->
                        <img class="modal-content" id="<?=$value['id']?>">
                        <!-- Modal Caption (Image Text) -->
                        <div id="caption"></div>
                    </div>
                <?php endforeach;?>
            <?php endif; ?>
                </li>
                <li class="column">
                <?php if (count($col2) > 0):
                foreach($col2 as $value):?>
                    <img src="img/gallery/<?=$value['picture']?>" id="myImg" alt="">
                    <div id="myModal" class="modal">
                        <!-- The Close Button -->
                        <span class="close">×</span>
                        <!-- Modal Content (The Image) -->
                        <img class="modal-content" id="2">
                        <!-- Modal Caption (Image Text) -->
                        <div id="caption"></div>
                    </div>
                <?php endforeach;?>
            <?php endif; ?>
                </li>
                <li class="column">
                <?php if (count($col3) > 0):
                foreach($col3 as $value):?>
                    <img src="img/gallery/<?=$value['picture']?>" id="myImg" alt="">
                    <div id="myModal" class="modal">
                        <!-- The Close Button -->
                        <span class="close">×</span>
                        <!-- Modal Content (The Image) -->
                        <img class="modal-content" id="3">
                        <!-- Modal Caption (Image Text) -->
                        <div id="caption"></div>
                    </div>
                <?php endforeach;?>
            <?php endif; ?>
                </li>
            </ul>
        </section>
    </div>
<?php require_once 'elements/footer.php' ?>