BLACKSITE


	: 216.73.217.4
	: 104.37.75.190 / alpenpass.ca
	: Linux server3.pointsplan.com 5.14.0-503.38.1.el9_5.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Apr 18 08:52:10 EDT 2025 x86_64
: /home2/apca/www/
files >> //home2/apca/www/gallery.php
 <?php
$head.="
<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css\">
<style>
.gallery {
    column-count: 4; /* Maintains masonry effect */
    column-gap: 10px;
    margin: 20px;
}
.gallery-item {
    width: 100%;
    margin-bottom: 10px;
    break-inside: avoid; /* Prevents images from breaking rows */
}
.gallery img {
    width: 100%;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out;
}
.gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0px 5px 15px 5px #000;
}
/* Ensure category headers span full width */
.category-header {
    column-span: all; /* Ensures category headers do not break masonry */
    width: 100%;
    text-align: center;
    font-size: 24px;
    background-color: #fb4d59;
    color: white;
    padding: 10px;
    margin-top: 40px;
    border-radius: 5px;
    margin-bottom: 20px;
}
/* Responsive Adjustments */
@media (max-width: 1200px) {
    .gallery { column-count: 3; }
}
@media (max-width: 800px) {
    .gallery { column-count: 2; }
}
@media (max-width: 500px) {
    .gallery { column-count: 1; }
}



/* Ensure images fit properly */
.gallery-item img {
    width: 100%;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out;
}
.gallery-item img:hover {
    transform: scale(1.05);
    box-shadow:0px 5px 15px 5px #000;
}
/* Ensure captions appear */
.caption {
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin-top: 5px;
}
/* Ensure Fancybox modal is centered */
.fancybox-content {
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
/* Ensure Fancybox images keep their aspect ratio */
.fancybox-content img {
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
/* Fancybox Background & Borders */
.fancybox-bg, .fancybox-slide {
    background: black !important;
}
.fancybox-content {
    background: black !important;
    border: 5px solid black !important;
}
/* Fancybox navigation buttons (white arrows) */
.fancybox-button {
    filter: invert(1) !important;
}
</style>
";
$head.="    <!-- Fancybox CSS -->
    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css\">
    <style>
        /* Masonry Layout */
        .gallery {
            column-count: 4;
            column-gap: 10px;
            margin: 20px;
        }
        .gallery-item {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
            break-inside: avoid;
        }
        /* Ensure images fit properly */
        .gallery-item img {
            width: 100%;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
        }
        .gallery-item img:hover {
            transform: scale(1.05);
        }
        /* Ensure captions appear */
        .caption {
            text-align: center;
            font-size: 14px;
            color: #fff;
            margin-top: 5px;
        }
        /* Fancybox Background & Borders */
        .fancybox-bg, .fancybox-slide, .fancybox-content {
            background: black !important;
            border: 5px solid black !important;
        }
        /* Fancybox Image Scaling */
        .fancybox-content img {
            max-width: 90vw !important;
            max-height: 90vh !important;
            width: auto !important;
            height: auto !important;
            object-fit: contain !important;
        }
        /* Fancybox Navigation Arrows */
        .fancybox-button {
            filter: invert(1) !important;
        }
        /* Pagination */
        .pagination {
            text-align: center;
            margin-top: 20px;
        }
        .pagination a {
            padding: 8px 12px;
            margin: 0 5px;
            text-decoration: none;
            color: white;
            background: #007bff;
            border-radius: 5px;
        }
        .pagination a:hover {
            background: #0056b3;
        }
        .pagination .current {
            font-weight: bold;
            background: #333;
        }
        /* Responsive Adjustments */
        @media (max-width: 1200px) {
            .gallery { column-count: 3; }
        }
        @media (max-width: 800px) {
            .gallery { column-count: 2; }
        }
        @media (max-width: 500px) {
            .gallery { column-count: 1; }
        }
        /* Ensure Fancybox modal is centered */
.fancybox-content {
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
/* Force Masonry to maintain aspect ratio */
.fancybox-content img {
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
/* Black Background Fix */
.fancybox-bg, .fancybox-slide {
    background: black !important;
}
/* Navigation Buttons (White) */
.fancybox-button {
    filter: invert(1) !important;
}
    </style>";
	include("includes/head.php");
	$mTitle="Our Gallery | AlpenPass Motorcycle Adventures";
	$mDescription="View stunning photos from AlpenPass motorcycle tours across BC. See the bikes, the views, and the adventure in action.";
include("includes/header.php");
?>
<?php
include('includes/config.php');
// Number of images per page
$imagesPerPage = 20;
// Get the current page number
$page = isset($_GET['page']) && is_numeric($_GET['page']) ? (int)$_GET['page'] : 1;
$page = max(1, $page); // Ensure page is at least 1
// Calculate the OFFSET for SQL query
$offset = ($page - 1) * $imagesPerPage;
// Get category filter (if any)
$category = $_GET['category'] ?? 'all';
// Count total images for pagination
$totalQuery = $category === 'all' 
    ? "SELECT COUNT(*) FROM gallery WHERE archived = 0"
    : "SELECT COUNT(*) FROM gallery WHERE archived = 0 AND category = :category";
$stmt = $dbh->prepare($totalQuery);
if ($category !== 'all') {
    $stmt->bindParam(':category', $category, PDO::PARAM_STR);
}
$stmt->execute();
$totalImages = $stmt->fetchColumn();
// Calculate total pages
$totalPages = ceil($totalImages / $imagesPerPage);
// Fetch images for the current page
$query = "SELECT * FROM gallery WHERE archived = 0 
          ORDER BY category ASC, 
          (CASE WHEN sort_order = 0 THEN 1 ELSE 0 END) ASC, 
          sort_order ASC, 
          uploaded_at DESC 
          LIMIT :limit OFFSET :offset";
$stmt = $dbh->prepare($query);
if ($category !== 'all') {
    $stmt->bindParam(':category', $category, PDO::PARAM_STR);
}
$stmt->bindParam(':limit', $imagesPerPage, PDO::PARAM_INT);
$stmt->bindParam(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();
$images = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<section>
<div style="text-align: center;">
<h1 style="font-size:  72px;">The AlpenPass Gallery</h1><p>Click on an image to open a larger popup version. Scroll through the large images. Hit ESC to return to this page.</p>
</div>
</section>
<div id="gallery" class="gallery">
    <?php 
    $currentCategory = null;

    foreach ($images as $row):
        // Display category header only when category changes
        if ($currentCategory !== $row['category']) {
            $currentCategory = $row['category'];
            echo "<h2 class='category-header'>".htmlentities($currentCategory)."</h2>";
        }
    ?>
        <div class="gallery-item">
            <a href="<?php echo htmlentities($row['full_url']); ?>" 
               data-fancybox="gallery" 
               data-caption="<strong><?php echo htmlentities($row['title']); ?></strong><br><?php echo htmlentities($row['caption']); ?>">
                <img src="<?php echo htmlentities($row['gallery_url']); ?>" alt="<?php echo htmlentities($row['title']); ?>">
            </a>
        </div>
    <?php endforeach; ?>
</div>


<!-- Pagination -->
<div class="pagination">
    <?php if ($page > 1): ?>
        <a href="?page=<?php echo $page - 1; ?><?php echo $category !== 'all' ? '&category=' . urlencode($category) : ''; ?>">&laquo; Prev</a>
    <?php endif; ?>
    <?php for ($i = 1; $i <= $totalPages; $i++): ?>
        <a href="?page=<?php echo $i; ?><?php echo $category !== 'all' ? '&category=' . urlencode($category) : ''; ?>" 
           class="<?php echo $i === $page ? 'current' : ''; ?>">
           <?php echo $i; ?>
        </a>
    <?php endfor; ?>
    <?php if ($page < $totalPages): ?>
        <a href="?page=<?php echo $page + 1; ?><?php echo $category !== 'all' ? '&category=' . urlencode($category) : ''; ?>">Next &raquo;</a>
    <?php endif; ?>
</div>
<!-- Fancybox JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
    $(document).ready(function () {
        $("[data-fancybox='gallery']").fancybox({
            loop: true, // Allows continuous scrolling
            buttons: ["zoom", "slideShow", "fullScreen", "close"],
            protect: true, // Prevents right-click save
            transitionEffect: "slide",
            transitionDuration: 500,
            afterLoad: function(instance, slide) {
                console.log("Fancybox loaded image:", slide.src);
            }
        });
    });
</script>
</body>
</html>
<!--Footer -->
<?php include('includes/footer.php');?>
<!-- /Footer--> 
<!--Back to top-->
<div id="back-top" class="back-top"> <a href="#top"><i class="fa fa-angle-up" aria-hidden="true"></i> </a> </div>
<!--/Back to top--> 
<!--Login-Form -->
<?php include('includes/login.php');?>
<!--/Login-Form --> 
<!--Register-Form -->
<?php include('includes/registration.php');?>
<!--/Register-Form --> 
<!--Forgot-password-Form -->
<?php include('includes/forgotpassword.php');?>
<script>
    $(document).ready(function () {
        $("[data-fancybox='gallery']").fancybox({
            loop: true,
            buttons: ["zoom", "slideShow", "fullScreen", "close"],
            protect: true,
            transitionEffect: "slide",
            transitionDuration: 500
        });

        // Fix Masonry inconsistencies on paginated pages
        setTimeout(function() {
            $('.gallery').css('column-count', 4);
        }, 200);
    });
</script>


</body>
</html>