twotalesanimation
ad460ef85a
- Changed gallery from carousel to responsive grid layout (similar to about page) - Shows album cover images with titles, creator info, and photo count - Improved visual design with hover effects and better spacing - Edit buttons now only visible to album owners (uses current_user_id variable) - Added proper ownership verification in all album edit/delete operations - Enhanced styling for mobile/tablet/desktop responsiveness - Simplified layout makes it easier to browse multiple albums at once
367 lines
10 KiB
PHP
367 lines
10 KiB
PHP
<?php
|
||
$headerStyle = 'light';
|
||
$rootPath = dirname(dirname(dirname(__DIR__)));
|
||
include_once($rootPath . '/header.php');
|
||
|
||
// Check if user has active membership
|
||
if (!isset($_SESSION['user_id'])) {
|
||
header('Location: login');
|
||
exit;
|
||
}
|
||
|
||
$is_member = getUserMemberStatus($_SESSION['user_id']);
|
||
if (!$is_member) {
|
||
header('Location: index');
|
||
exit;
|
||
}
|
||
|
||
$conn = openDatabaseConnection();
|
||
$album_id = isset($_GET['id']) ? intval($_GET['id']) : 0;
|
||
|
||
if ($album_id === 0) {
|
||
header('Location: gallery');
|
||
exit;
|
||
}
|
||
|
||
// Fetch album details
|
||
$album_query = "
|
||
SELECT
|
||
pa.album_id,
|
||
pa.title,
|
||
pa.description,
|
||
pa.created_at,
|
||
pa.user_id,
|
||
u.first_name,
|
||
u.last_name,
|
||
u.profile_pic
|
||
FROM photo_albums pa
|
||
INNER JOIN users u ON pa.user_id = u.user_id
|
||
WHERE pa.album_id = ?
|
||
";
|
||
|
||
$stmt = $conn->prepare($album_query);
|
||
$stmt->bind_param("i", $album_id);
|
||
$stmt->execute();
|
||
$album_result = $stmt->get_result();
|
||
|
||
if ($album_result->num_rows === 0) {
|
||
$stmt->close();
|
||
$conn->close();
|
||
header('Location: gallery');
|
||
exit;
|
||
}
|
||
|
||
$album = $album_result->fetch_assoc();
|
||
$stmt->close();
|
||
|
||
// Fetch all photos in the album
|
||
$photos_query = "
|
||
SELECT photo_id, file_path, caption, display_order
|
||
FROM photos
|
||
WHERE album_id = ?
|
||
ORDER BY display_order ASC
|
||
";
|
||
|
||
$stmt = $conn->prepare($photos_query);
|
||
$stmt->bind_param("i", $album_id);
|
||
$stmt->execute();
|
||
$photos_result = $stmt->get_result();
|
||
|
||
$photos = [];
|
||
if ($photos_result && $photos_result->num_rows > 0) {
|
||
while ($row = $photos_result->fetch_assoc()) {
|
||
$photos[] = $row;
|
||
}
|
||
}
|
||
|
||
$stmt->close();
|
||
$conn->close();
|
||
?>
|
||
|
||
<style>
|
||
.album-header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 20px 20px;
|
||
margin-bottom: 40px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.album-header-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
|
||
.album-creator-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.album-creator-avatar {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 3px solid white;
|
||
}
|
||
|
||
.creator-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.creator-details span:first-child {
|
||
font-weight: 600;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.creator-details span:last-child {
|
||
font-size: 0.9rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.photo-gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.photo-item {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
aspect-ratio: 1;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.photo-item:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.photo-item img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.photo-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.photo-item:hover .photo-overlay {
|
||
opacity: 1;
|
||
}
|
||
|
||
.photo-caption {
|
||
color: white;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
max-width: 90%;
|
||
}
|
||
|
||
.lightbox {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.9);
|
||
z-index: 1000;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.lightbox.active {
|
||
display: flex;
|
||
}
|
||
|
||
.lightbox-content {
|
||
position: relative;
|
||
max-width: 90vw;
|
||
max-height: 90vh;
|
||
}
|
||
|
||
.lightbox-image {
|
||
max-width: 100%;
|
||
max-height: 90vh;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.lightbox-close {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
color: white;
|
||
font-size: 2rem;
|
||
cursor: pointer;
|
||
background: none;
|
||
border: none;
|
||
z-index: 1001;
|
||
}
|
||
|
||
.lightbox-nav {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: white;
|
||
font-size: 2rem;
|
||
cursor: pointer;
|
||
background: rgba(0,0,0,0.5);
|
||
border: none;
|
||
padding: 20px;
|
||
z-index: 1001;
|
||
}
|
||
|
||
.lightbox-prev {
|
||
left: 20px;
|
||
}
|
||
|
||
.lightbox-next {
|
||
right: 20px;
|
||
}
|
||
|
||
.back-link {
|
||
margin-bottom: 20px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.no-photos {
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
color: #999;
|
||
}
|
||
|
||
.edit-album-btn {
|
||
margin-left: 10px;
|
||
}
|
||
</style>
|
||
|
||
<?php
|
||
$pageTitle = htmlspecialchars($album['title']);
|
||
$breadcrumbs = [['Home' => 'index.php'], ['Gallery' => 'gallery'], [$album['title'] => '#']];
|
||
require_once($rootPath . '/components/banner.php');
|
||
?>
|
||
|
||
<section class="tour-list-page py-100 rel">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<a href="gallery" class="back-link" style="color: #667eea; text-decoration: none;">
|
||
<i class="far fa-arrow-left"></i> Back to Gallery
|
||
</a>
|
||
|
||
<div class="album-header">
|
||
<div class="album-header-content px-2">
|
||
<div style="flex: 1;">
|
||
<h2 style="margin: 0; margin-bottom: 10px;"><?php echo htmlspecialchars($album['title']); ?></h2>
|
||
<?php if ($album['description']): ?>
|
||
<p style="margin: 0 0 15px 0; font-size: 1rem; opacity: 0.95;">
|
||
<?php echo htmlspecialchars($album['description']); ?>
|
||
</p>
|
||
<?php endif; ?>
|
||
|
||
<div class="album-creator-info">
|
||
<img src="<?php echo htmlspecialchars($album['profile_pic']); ?>" alt="<?php echo htmlspecialchars($album['first_name']); ?>" class="album-creator-avatar">
|
||
<div class="creator-details">
|
||
<span><?php echo htmlspecialchars($album['first_name'] . ' ' . $album['last_name']); ?></span>
|
||
<span><?php echo date('F j, Y', strtotime($album['created_at'])); ?></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php if ($album['user_id'] == $_SESSION['user_id']): ?>
|
||
<div>
|
||
<a href="edit_album?id=<?php echo $album['album_id']; ?>" class="theme-btn" style="background: white; color: #667eea; border: none;">
|
||
<i class="far fa-edit"></i> Edit Album
|
||
</a>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<?php if (count($photos) > 0): ?>
|
||
<div class="photo-gallery">
|
||
<?php foreach ($photos as $index => $photo): ?>
|
||
<div class="photo-item" onclick="openLightbox(<?php echo $index; ?>)">
|
||
<img src="<?php echo htmlspecialchars($photo['file_path']); ?>" alt="<?php echo htmlspecialchars($photo['caption'] ?? 'Photo'); ?>">
|
||
<?php if ($photo['caption']): ?>
|
||
<div class="photo-overlay">
|
||
<div class="photo-caption"><?php echo htmlspecialchars($photo['caption']); ?></div>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
<!-- Lightbox -->
|
||
<div id="lightbox" class="lightbox">
|
||
<button class="lightbox-close" onclick="closeLightbox()">✕</button>
|
||
<div class="lightbox-content">
|
||
<img id="lightboxImage" class="lightbox-image" src="" alt="">
|
||
<?php if (count($photos) > 1): ?>
|
||
<button class="lightbox-nav lightbox-prev" onclick="changeLightboxImage(-1)">❮</button>
|
||
<button class="lightbox-nav lightbox-next" onclick="changeLightboxImage(1)">❯</button>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="no-photos">
|
||
<i class="far fa-image" style="font-size: 4rem; color: #ddd; margin-bottom: 20px; display: block;"></i>
|
||
<p>No photos in this album yet.</p>
|
||
<?php if ($album['user_id'] == $_SESSION['user_id']): ?>
|
||
<a href="edit_album?id=<?php echo $album['album_id']; ?>" class="theme-btn">Add Photos</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
let currentPhotoIndex = 0;
|
||
const photos = <?php echo json_encode(array_column($photos, 'file_path')); ?>;
|
||
|
||
function openLightbox(index) {
|
||
currentPhotoIndex = index;
|
||
document.getElementById('lightbox').classList.add('active');
|
||
document.getElementById('lightboxImage').src = photos[currentPhotoIndex];
|
||
}
|
||
|
||
function closeLightbox() {
|
||
document.getElementById('lightbox').classList.remove('active');
|
||
}
|
||
|
||
function changeLightboxImage(direction) {
|
||
currentPhotoIndex += direction;
|
||
if (currentPhotoIndex < 0) currentPhotoIndex = photos.length - 1;
|
||
if (currentPhotoIndex >= photos.length) currentPhotoIndex = 0;
|
||
document.getElementById('lightboxImage').src = photos[currentPhotoIndex];
|
||
}
|
||
|
||
// Close lightbox on escape key
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') closeLightbox();
|
||
if (e.key === 'ArrowLeft') changeLightboxImage(-1);
|
||
if (e.key === 'ArrowRight') changeLightboxImage(1);
|
||
});
|
||
</script>
|
||
|
||
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
|