1#@!#!123s

: / proc / thread-self / root / home / markniuj / bazmeasar.com / quran /
Filename : folder_images.php
back
<!DOCTYPE html>
<html lang="en">

<head>
    
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="img/favicon.ico" rel="icon">
    <title>Folder Images</title>
    <meta content="Quran Class best teacher male and female ever" name="keywords">
<meta name="description" content="online books facebook posts and many more">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
    body{

    background-color: #EEEEEE;
        
    }
    .blue-button {
    /* Style for blue button */
    background-color: #00708b; /* Example blue color */
    color: #ffffff; /* White text color for better contrast */
    /* Add other button styles */
}
        .thumbnail {
            margin-bottom: 15px;
}
.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
        background-color: #000000;
        border-color: #00644b;
}
.btn-primary {
    color: #fff;
       background-color: #007464;
        border-color: #007e5e;
}
.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
    flex-wrap: wrap;
    
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
   background-color: #00663c;
    border-color: #003772;
}
        .thumbnail img {
            width: 100%;
            height: auto;
        }
        .pagination-row {
            margin-bottom: 15px;
        }
        @media (max-width: 576px) {
            .full-pagination {
                display: none;
            }
        }
        @media (min-width: 577px) {
            .mobile-pagination {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h2></h2>

        <div class="row">
            <?php
            if (isset($_GET['folder'])) {
                $selectedFolder = $_GET['folder'];
                $images = glob($selectedFolder . '/*.{jpg,jpeg,png,gif,webp}', GLOB_BRACE);

                // Pagination variables
                $imagesPerPage = 1;
                $totalImages = count($images);
                $totalPages = ceil($totalImages / $imagesPerPage);
                $currentPage = isset($_GET['page']) ? $_GET['page'] : 1;
                $start = ($currentPage - 1) * $imagesPerPage;
                $end = $start + $imagesPerPage - 1;

                // Display images for the current page
                for ($i = $start; $i < $totalImages && $i <= $end; $i++) {
                    echo '<div class="col-md-12">';
                    echo '<div class="thumbnail">';
                    echo '<img src="' . $images[$i] . '"width="100%" height="100%" alt="Quran and online Qida for kids and many books to read and learn Quran">';
                    echo '</div>';
                    echo '</div>';
                }

                // Pagination links for larger screens
                echo '<div class="col-md-12 pagination-row full-pagination">';
                echo '<div class="row">';
                echo '<div class="col-md-4 text-left">';
                if ($currentPage > 1) {
                    echo '<a class="btn btn-primary" href="?folder=' . $selectedFolder . '&page=' . ($currentPage - 1) . '">Previous</a>';
                }
                echo '</div>';
                echo '<div class="col-md-4 text-center">';
                echo '<a class="btn btn-primary" href="index.php">Home</a>';
                echo '</div>';
                echo '<div class="col-md-4 text-right">';
                if ($currentPage < $totalPages) {
                    echo '<a class="btn btn-primary" href="?folder=' . $selectedFolder . '&page=' . ($currentPage + 1) . '">Next</a>';
                }
                echo '</div>';
                echo '</div>';
                echo '</div>';

                // Pagination links for mobile screens
                echo '<div class="col-md-12 pagination-row mobile-pagination">';
                echo '<div class="row">';
                echo '<div class="col-md-12 text-center">';
                if ($currentPage > 1) {
                    echo '<a class="btn btn-primary" href="?folder=' . $selectedFolder . '&page=' . ($currentPage - 1) . '">Previous</a>';
                }
                echo '<a class="btn btn-primary ml-2" href="index.php">Home</a>';
                if ($currentPage < $totalPages) {
                    echo '<a class="btn btn-primary ml-2" href="?folder=' . $selectedFolder . '&page=' . ($currentPage + 1) . '">Next</a>';
                }
                echo '</div>';
                echo '</div>';
                echo '</div>';
            } else {
                echo 'Folder not specified.';
            }
            ?>
        </div>
        <div class="row full-pagination">
            <div class="col-md-12">
                <ul class="pagination justify-content-center">
                    <?php
                    // Full pagination (visible on larger screens)
                    for ($page = 1; $page <= $totalPages; $page++) {
                        echo '<li class="page-item ' . ($page == $currentPage ? 'active' : '') . '">';
                        echo '<a class="page-link" href="?folder=' . $selectedFolder . '&page=' . $page . '">' . $page . '</a>';
                        echo '</li>';
                    }
                    ?>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>