<section id="gallery">
    <div class="container">
        <div class="col-md-12">
            <div class="title-wrap d-flex justify-content-between">
                <div class="title-box">

                    <div class="section-title mt-5" data-aos="zoom-out">
                        <h2>Galeri</h2>
                        <p>GALERI SMK2 GUGUAK</p>
                    </div>

                </div>
                <!-- <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="?page=home">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Galeri</li>
                    </ol>
                </nav> -->
            </div>
        </div>

        <div class="row no-gutters ">
            <?php
            $datafoto = $koneksi->query("SELECT * FROM tbl_galeri");

            foreach ($datafoto as $no => $pecah) :

            ?>
                <div class="col-lg-2 col-md-6 ml-4 ">
                    <div class="show" style="display: none;">
                        <div class="gallery-item wow fadeInUp">
                            <a width="300px" height="300px" href="admin/dist/img/imggaleri/<?= $pecah['galeri_foto']; ?>" data-gall="portfolioGallery" class="venobox">

                                <img width="300px" height="150px" src="admin/dist/img/imggaleri/<?= $pecah['galeri_foto']; ?>" alt="">
                                <h5 class="mt-3" style="color: black;"><?= $pecah['galeri_nama'] ?></h5>
                            </a>
                        </div>
                    </div>
                </div>

            <?php endforeach; ?>

        </div>

        <a href="#" class="btn mb-5" id="load" style="background-color: #5fcf80; color:white;">Lihat Lagi</a>
        <a href="" class="btn mb-5" style="background-color: #5fcf80; color:white;">Back to top</a>

    </div>
</section><!-- End Gallery Section -->


<script>
    $(function() {
        $('.show').slice(0, 5).show();
        $('#load').on('click', function(e) {
            e.preventDefault();
            $('.show:hidden').slice(0, 5).slideDown();
            if ($('.show:hidden').length == 0) {
                $('#load').fadeOut('slow');
            }

            $('html,body').animate({
                scrolltop: $(this).offset().top
            }, 3200)

        })


    })
</script>