BossBey File Manager

Editing: boarding-pictures.php

<?php include('header.php'); ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.2.0/magnific-popup.css" integrity="sha512-UhvuUthI9VM4N3ZJ5o1lZgj2zNtANzr3zyucuZZDy67BO6Ep5+rJN2PST7kPj+fOI7M/7wVeYaSaaAICmIQ4sQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="page-title parallax parallax1">
    <div class="overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="page-title-heading">
                    <h1 class="title">Boarding Pictures</h1>
                    <div class="breadcrumbs">
                        <ul>
                            <li><a href="#">Venkateshwar Signature School</a></li>
                            <li>Boarding Pictures</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@media (min-width: 1300px) and (max-width: 2560px) {
    .popup-gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    }

@media (min-width: 700px) and (max-width: 1299px) {
    .popup-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    }

@media (min-width: 300px) and (max-width: 699px) {
    .popup-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
    }

.gallery_item {
    margin-bottom: 5px;
    overflow: hidden;
    }

.popup-gallery a {
    display: block;
    width: 100%;
    border: 1px solid #fff;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
    }

.popup-gallery a:hover {
    transform: scale(1.05);
    border-color: #fff;
    }

.popup-gallery img {
    display: block;
    width: 100%;
    object-fit: cover;
    min-height: 250px;
    max-height: 250px;
    }

@media only screen and (max-width: 1000px) {
    .popup-gallery img {
        min-height: 150px;
        max-height: 150px;
    }
    }

/* END  */

.singicon_btn_nlf {
    position: absolute;
    top: 44%;
    bottom: 56%;
    left: 44%;
    right: 56%;
    opacity: 0;
    }

.singicon_btn_nlf svg {
    color: #fff;
    }

.popup-gallery a:hover .singicon_btn_nlf {
    opacity: 1;
    }

.hover_affect_nlf:hover img {
    opacity: 0.5;
    }
</style>

<?php for($i=1;$i<=16;$i++){ ?>
                    <div class="gallery_item">
                        <a class="hover_affect_nlf position-relative" href="gallery/VSS Boarding (<?=$i?>).jpg" >
                            <img src="gallery/VSS Boarding (<?=$i?>).jpg">
                        </a>
                    </div>
                <?php } ?>

</div>
        </div>

</div>

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>
    // popup-gallery
    jQuery(document).ready(function ($) {
        $(".popup-gallery").magnificPopup({
            delegate: "a",
            type: "image",
            tLoading: "Loading image #%curr%...",
            mainClass: "mfp-img-mobile",
            gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0, 1] // Preload previous and next images
            },
            image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            titleSrc: function (item) {
                return item.el.attr("title") || "";
            }
            }
        });
    });

</script>
<style>
    iframe {
        width: 100%;
    }
</style>
<?php include('footer.php'); ?>

Cancel