feat: complete photo gallery implementation with album management and lightbox viewer

- Added photo gallery carousel view (gallery.php) with all member albums
- Implemented album detail view with responsive photo grid and lightbox
- Created album creation/editing form with drag-and-drop photo uploads
- Added backend processors for album CRUD operations and photo management
- Implemented API endpoints for fetching and deleting photos
- Added database migration for photo_albums and photos tables
- Included comprehensive feature documentation with testing checklist
- Updated .htaccess with URL rewrite rules for gallery routes
- Added Gallery link to Members Area menu in header
- Created upload directory structure (/assets/uploads/gallery/)
- Implemented security: CSRF tokens, ownership verification, file validation
- Added transaction safety with rollback on errors and cleanup
- Features: Lightbox with keyboard navigation, drag-and-drop uploads, responsive design

.htaccess

@@ -51,6 +51,12 @@ RewriteRule ^payment_confirmation$ src/pages/shop/payment_confirmation.php [L]
 RewriteRule ^confirm$ src/pages/shop/confirm.php [L]
 RewriteRule ^confirm2$ src/pages/shop/confirm2.php [L]
 
+# === GALLERY PAGES ===
+RewriteRule ^gallery$ src/pages/gallery/gallery.php [L]
+RewriteRule ^create_album$ src/pages/gallery/create_album.php [L]
+RewriteRule ^edit_album$ src/pages/gallery/create_album.php [L]
+RewriteRule ^view_album$ src/pages/gallery/view_album.php [L]
+
 # === EVENTS & BLOG PAGES ===
 RewriteRule ^events$ src/pages/events/events.php [L]
 RewriteRule ^blog$ src/pages/events/blog.php [L]
@@ -121,6 +127,11 @@ RewriteRule ^toggle_trip_published$ src/processors/toggle_trip_published.php [L]
 RewriteRule ^toggle_event_published$ src/admin/toggle_event_published.php [L]
 RewriteRule ^delete_trip$ src/processors/delete_trip.php [L]
 RewriteRule ^delete_event$ src/admin/delete_event.php [L]
+RewriteRule ^save_album$ src/processors/save_album.php [L]
+RewriteRule ^update_album$ src/processors/update_album.php [L]
+RewriteRule ^delete_album$ src/processors/delete_album.php [L]
+RewriteRule ^delete_photo$ src/processors/delete_photo.php [L]
+RewriteRule ^get_album_photos$ src/processors/get_album_photos.php [L]
 
 </IfModule>
 

docs/PHOTO_GALLERY_IMPLEMENTATION.md

@@ -0,0 +1,494 @@
+# Photo Gallery Feature - Complete Implementation
+
+## Overview
+The Photo Gallery feature allows 4WDCSA members to create, manage, and view photo albums with a carousel interface for browsing and a lightbox viewer for detailed photo viewing.
+
+## Database Schema
+
+### photo_albums table
+```sql
+- album_id (INT, PK, AUTO_INCREMENT)
+- user_id (INT, FK to users)
+- title (VARCHAR 255, NOT NULL)
+- description (TEXT, nullable)
+- cover_image (VARCHAR 500, nullable - stores file path)
+- created_at (TIMESTAMP)
+- updated_at (TIMESTAMP)
+- UNIQUE INDEX on user_id (one album per user for now, can be modified)
+- INDEX on created_at for sorting
+```
+
+### photos table
+```sql
+- photo_id (INT, PK, AUTO_INCREMENT)
+- album_id (INT, FK to photo_albums, CASCADE DELETE)
+- file_path (VARCHAR 500, NOT NULL)
+- caption (VARCHAR 500, nullable)
+- display_order (INT, default 0)
+- created_at (TIMESTAMP)
+- INDEX on album_id for quick lookups
+- INDEX on display_order for sorting
+```
+
+## File Structure
+
+### Pages (Public-Facing)
+- `src/pages/gallery/gallery.php` - Main carousel view of all albums
+- `src/pages/gallery/view_album.php` - Detailed album view with photo grid and lightbox
+- `src/pages/gallery/create_album.php` - Form to create new albums and upload initial photos
+
+### Processors (Backend Logic)
+- `src/processors/save_album.php` - Creates new album and handles initial photo uploads
+- `src/processors/update_album.php` - Updates album metadata and handles additional photo uploads
+- `src/processors/delete_album.php` - Deletes entire album with all photos and files
+- `src/processors/delete_photo.php` - Deletes individual photos from album
+- `src/processors/get_album_photos.php` - API endpoint returning album photos as JSON
+
+### Styling
+All styling is embedded in each PHP file using `<style>` tags for consistency with existing pattern.
+
+## Features
+
+### Gallery View (gallery.php)
+**Purpose**: Display all photo albums in a carousel format
+
+**Features**:
+- Bootstrap carousel with Previous/Next buttons
+- Album cards showing:
+  - Cover image
+  - Album title
+  - Description
+  - Creator avatar and name
+  - Photo count
+  - "View Album" button
+- "Create Album" button (visible to all members)
+- Empty state message for members with no albums
+- Responsive design for mobile/tablet/desktop
+
+**Access Control**:
+- Members-only (redirects non-members to membership page)
+- Verified membership required
+
+### Album Detail View (view_album.php)
+**Purpose**: Display all photos from a single album with lightbox viewer
+
+**Features**:
+- Album header with:
+  - Creator information (avatar, name)
+  - Album title and description
+  - Photo count
+  - "Edit Album" button (visible only to album owner)
+- Responsive photo grid layout
+- Click any photo to open lightbox viewer
+- Lightbox features:
+  - Full-screen image display
+  - Previous/Next navigation buttons
+  - Caption display
+  - Keyboard navigation:
+    - Arrow Left: Previous photo
+    - Arrow Right: Next photo
+    - Escape: Close lightbox
+  - Close button (X)
+- Empty state message with "Add Photos" link for album owner
+- "Back to Gallery" button at bottom
+
+**Access Control**:
+- Public albums visible to all members
+- Edit button visible only to album owner
+
+### Create/Edit Album (create_album.php)
+**Purpose**: Create new albums or edit existing albums with photo uploads
+
+**Features**:
+- Album title input (required, validates with validateName())
+- Description textarea (optional, max 500 characters)
+- Drag-and-drop file upload area
+- File selection click-to-upload
+- Selected files list showing filename and size
+- Photo grid showing existing photos (edit mode only)
+- Delete button on each existing photo
+- Delete album button (edit mode only)
+- Submit and Cancel buttons
+
+**File Upload Validation**:
+- Allowed formats: JPG, PNG, GIF, WEBP
+- Max file size: 5MB per image
+- Validates MIME type and file size
+- Generates unique filenames with uniqid()
+- Stores in `/assets/uploads/gallery/{album_id}/`
+
+**Form Behavior**:
+- Create mode: Only allows setting album metadata and initial photos
+- Edit mode: Shows existing photos, allows adding new photos, allows editing metadata
+- First uploaded photo becomes cover image (auto-selected)
+- Photos can be deleted before submission (edit mode)
+- Form prepopulation on edit (title, description, existing photos)
+
+**Access Control**:
+- Members-only
+- Edit form checks album ownership before allowing edits
+- Redirect to gallery if not owner of album being edited
+
+## API Endpoints
+
+### GET /get_album_photos
+Returns JSON array of photos for an album
+
+**Parameters**:
+- `id`: Album ID (GET parameter)
+
+**Response**:
+```json
+[
+  {
+    "photo_id": 1,
+    "file_path": "/assets/uploads/gallery/1/photo_abc123.jpg",
+    "caption": "Sample photo",
+    "display_order": 1
+  }
+]
+```
+
+**Access Control**: Members-only, owner of album only
+
+### POST /delete_photo
+Deletes a photo and updates album cover if needed
+
+**Parameters**:
+- `photo_id`: Photo ID (POST)
+- `csrf_token`: CSRF token (POST)
+
+**Response**: 
+```json
+{ "success": true }
+```
+
+**Side Effects**:
+- Deletes photo file from disk
+- Removes photo from database
+- Updates album cover image if deleted photo was cover
+- Sets cover to first remaining photo or NULL if no photos left
+
+**Access Control**: Members-only, owner of album only
+
+## Workflow Examples
+
+### Creating an Album
+1. User clicks "Create Album" button on gallery page
+2. Navigates to create_album.php
+3. Enters album title (required) and description (optional)
+4. Drags and drops or selects multiple photo files
+5. Clicks "Create Album" button
+6. save_album.php:
+   - Creates album directory: `/assets/uploads/gallery/{album_id}/`
+   - Validates each photo (mime type, file size)
+   - Moves photos to album directory with unique names
+   - Sets first photo as cover_image
+   - Inserts album record and photo records in transaction
+   - Redirects to view_album page for newly created album
+
+### Editing an Album
+1. User clicks "Edit Album" button on album view page
+2. Navigates to create_album.php?id={album_id}
+3. Form prepopulates with current album data
+4. Existing photos displayed in grid with delete buttons
+5. Can add more photos by uploading new files
+6. Clicks "Update Album" button
+7. update_album.php:
+   - Verifies ownership
+   - Updates album metadata
+   - Validates and uploads any new photos
+   - Appends new photos to existing ones (doesn't overwrite)
+   - Redirects back to view_album
+
+### Deleting a Photo
+1. User clicks delete (X) button on photo in edit form
+2. JavaScript shows confirmation dialog
+3. Sends POST to delete_photo with photo_id and csrf_token
+4. delete_photo.php:
+   - Verifies ownership through album
+   - Deletes file from disk
+   - Removes from database
+   - Updates cover_image if needed
+   - Returns JSON success response
+5. Page reloads to show updated photo list
+
+### Deleting an Album
+1. User clicks "Delete Album" button in edit form
+2. JavaScript shows confirmation dialog
+3. Navigates to delete_album.php?id={album_id}
+4. delete_album.php:
+   - Verifies ownership
+   - Deletes all photo files from disk
+   - Deletes all photo records from database
+   - Deletes album directory
+   - Deletes album record
+   - Redirects to gallery page
+
+## URL Routing (.htaccess)
+
+```
+/gallery → src/pages/gallery/gallery.php
+/create_album → src/pages/gallery/create_album.php
+/edit_album → src/pages/gallery/create_album.php (id parameter determines mode)
+/view_album → src/pages/gallery/view_album.php
+/save_album → src/processors/save_album.php (POST only)
+/update_album → src/processors/update_album.php (POST only)
+/delete_album → src/processors/delete_album.php (GET with id parameter)
+/delete_photo → src/processors/delete_photo.php (POST only)
+/get_album_photos → src/processors/get_album_photos.php (GET with id parameter)
+```
+
+## Security Features
+
+### Authentication
+- All pages check for `$_SESSION['user_id']`
+- Non-members redirected to membership page
+- Non-authenticated users redirected to login
+
+### Authorization
+- Album ownership verified before allowing edits
+- Album ownership verified before allowing deletes
+- Only album owner can edit or delete photos
+- Only album owner can see edit buttons
+
+### Data Validation
+- Album title validated with validateName() function
+- Description length limited to 500 characters
+- File uploads validated for:
+  - MIME type (only image formats allowed)
+  - File size (max 5MB)
+  - File extension check
+- Filename sanitized with uniqid() to prevent conflicts
+
+### CSRF Protection
+- All forms include csrf_token
+- Processors validate CSRF token before processing
+- POST-only operations protected
+
+### Transaction Safety
+- Album creation uses transaction
+  - Creates directory
+  - Inserts album record
+  - Inserts photo records
+  - Commits all or rolls back all on error
+- Handles cleanup on failure:
+  - Deletes partial uploads
+  - Removes album directory
+  - Removes album record from database
+
+## Error Handling
+
+### Validation Errors
+- File too large: "File too large: {filename}"
+- Invalid file type: "Invalid file type: {filename}"
+- Missing album title: "Album title is required and must be valid"
+- Description too long: "Description must be 500 characters or less"
+
+### Permission Errors
+- Not authenticated: Redirects to login
+- Not a member: Redirects to membership page
+- Not album owner: Returns 403 Forbidden with error message
+- Album not found: Returns 404 with redirect to gallery
+
+### Upload Errors
+- Directory creation failure: "Failed to create album directory"
+- File move failure: "Failed to upload: {filename}"
+- Database insert failure: HTTP 400 with error message
+
+### Recovery
+- All upload errors trigger transaction rollback
+- Partial files cleaned up on failure
+- Album record deleted if transaction fails
+- Directory removed if transaction fails
+
+## Testing Checklist
+
+### Album Creation
+- [ ] Create album with title only
+- [ ] Create album with title and description
+- [ ] Upload single photo to new album
+- [ ] Upload multiple photos to new album
+- [ ] Verify first photo becomes cover
+- [ ] Verify files stored in correct directory
+- [ ] Verify album appears in carousel
+
+### Album Editing
+- [ ] Edit album title
+- [ ] Edit album description
+- [ ] Add photos to existing album
+- [ ] Add many photos at once (10+)
+- [ ] Delete photos from album
+- [ ] Delete last photo (cover updates to NULL)
+- [ ] Delete album cover, verify new cover assigned
+- [ ] Verify edit unavailable for non-owner
+
+### Album Viewing
+- [ ] View album as owner
+- [ ] View album as other member
+- [ ] View album with many photos
+- [ ] Photo grid responsive on mobile
+- [ ] Photo grid responsive on tablet
+- [ ] All photos display correct captions
+
+### Lightbox
+- [ ] Open lightbox from first photo
+- [ ] Open lightbox from middle photo
+- [ ] Open lightbox from last photo
+- [ ] Next button navigates forward
+- [ ] Previous button navigates backward
+- [ ] Next button wraps to first photo from last
+- [ ] Previous button wraps to last photo from first
+- [ ] Arrow key navigation works
+- [ ] Escape key closes lightbox
+- [ ] Click X button closes lightbox
+- [ ] Photo caption displays correctly
+
+### Gallery Page
+- [ ] Carousel displays all albums
+- [ ] Previous/Next buttons work
+- [ ] Album cards show cover image
+- [ ] Album cards show correct photo count
+- [ ] Create Album button visible
+- [ ] Create Album button navigates correctly
+- [ ] Edit button visible only to owner
+- [ ] Empty gallery state shows correct message
+- [ ] Empty gallery has Create Album link
+
+### Access Control
+- [ ] Non-members cannot access gallery
+- [ ] Non-members cannot create albums
+- [ ] Non-members cannot edit albums
+- [ ] Users cannot edit others' albums
+- [ ] Users cannot delete others' albums
+- [ ] Users cannot delete others' photos
+
+### File Uploads
+- [ ] JPG files accepted
+- [ ] PNG files accepted
+- [ ] GIF files accepted
+- [ ] WEBP files accepted
+- [ ] BMP files rejected
+- [ ] ZIP files rejected
+- [ ] Files over 5MB rejected
+- [ ] Files exactly 5MB accepted
+- [ ] Drag and drop upload works
+- [ ] Click-to-upload works
+
+### Database
+- [ ] Albums table has correct structure
+- [ ] Photos table has correct structure
+- [ ] Foreign keys work correctly
+- [ ] Cascade delete removes photos when album deleted
+- [ ] Unique constraint prevents duplicate user ownership
+- [ ] Indexes created for performance
+
+### Navigation
+- [ ] Gallery link appears in Members Area menu
+- [ ] Gallery link visible only for logged-in users
+- [ ] Gallery link locked (with icon) for non-members
+- [ ] "View Album" button navigates to album detail
+- [ ] "Edit Album" button navigates to edit form
+- [ ] "Back to Gallery" button returns to gallery
+- [ ] "Add Photos" link in empty album goes to edit form
+
+## Future Enhancements
+
+### Possible Features
+1. Multiple albums per user (modify UNIQUE constraint)
+2. Album visibility settings (private/members-only/public)
+3. Album categories/tags
+4. Photo ordering/reordering in album
+5. Photo batch operations (delete multiple, move between albums)
+6. Album sharing/collaboration
+7. Photo comments/ratings
+8. Admin gallery management
+9. Automatic image optimization/compression
+10. Photo metadata preservation (EXIF)
+11. Album archives/export
+12. Photo search across all albums
+
+### Schema Changes Required
+- Remove UNIQUE constraint on user_id to allow multiple albums per user
+- Add visibility enum field to photo_albums
+- Add category_id FK to photo_albums
+- Add user_id to photos for future permission model
+- Add updated_at timestamps to photos for tracking
+
+## Deployment Notes
+
+### Pre-Deployment
+1. Run migration 003 to create tables
+2. Create `/assets/uploads/gallery/` directory with proper permissions
+3. Ensure PHP can write to upload directory (755 or 777)
+4. Test file upload with valid and invalid files
+
+### Post-Deployment
+1. Verify gallery link appears in header menu
+2. Test creating first album in production
+3. Test file uploads with various image formats
+4. Monitor disk space usage for uploads
+5. Set up automated cleanup for orphaned files (if needed)
+
+### Permissions
+```
+/assets/uploads/gallery/
+  Permissions: 755 (rwxr-xr-x)
+  Owner: web server user
+  
+Individual album directories:
+  Permissions: 755 (rwxr-xr-x)
+  Created automatically by application
+  
+Photo files:
+  Permissions: 644 (rw-r--r--)
+  Created automatically by application
+```
+
+### Backups
+- Include `/assets/uploads/gallery/` in backup routine
+- Include `photo_albums` and `photos` tables in database backups
+- Consider separate backup for large image files
+
+## Known Limitations
+
+1. **One album per user**: Current schema design with UNIQUE constraint on user_id allows only one album per user. Can be modified if multiple albums per user needed.
+
+2. **No album visibility control**: All member albums are visible to all members. Could add privacy settings in future.
+
+3. **No photo ordering UI**: Photos ordered by display_order but no UI to reorder them. Captions show filename by default.
+
+4. **No album categories**: All albums mixed in one carousel. Could add filtering/categories.
+
+5. **Image optimization**: No automatic compression/optimization. Large images stored as-is.
+
+6. **No EXIF data**: Photo metadata stripped during upload. Could preserve orientation/metadata.
+
+## Troubleshooting
+
+### Photos not uploading
+- Check `/assets/uploads/gallery/` exists and is writable
+- Verify file sizes under 5MB
+- Confirm image MIME types are jpeg, png, gif, or webp
+- Check PHP error logs for upload errors
+
+### Album cover not updating
+- Verify cover_image field in database
+- Check if photo file path stored correctly
+- Confirm image file exists on disk
+
+### Lightbox not opening
+- Check browser console for JavaScript errors
+- Verify image paths are accessible
+- Confirm file URLs accessible directly
+
+### Permission denied errors
+- Check album owner verification logic
+- Verify CSRF tokens being passed correctly
+- Confirm user_id matches in session
+
+### Memory issues with large uploads
+- Reduce PHP memory_limit if needed
+- Split large batches of photos into smaller uploads
+- Consider image optimization/compression
+

docs/migrations/003_create_photo_gallery_tables.sql

@@ -0,0 +1,30 @@
+-- Migration: Create photo gallery tables for member photo albums
+-- Date: 2025-12-05
+-- Purpose: Allow members to create albums and upload photos to share with the community
+
+-- Create photo_albums table
+CREATE TABLE IF NOT EXISTS photo_albums (
+    album_id INT PRIMARY KEY AUTO_INCREMENT,
+    user_id INT NOT NULL,
+    title VARCHAR(255) NOT NULL,
+    description TEXT,
+    cover_image VARCHAR(255),
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    FOREIGN KEY (user_id) REFERENCES users(user_id) ON DELETE CASCADE,
+    INDEX idx_user_id (user_id),
+    INDEX idx_created_at (created_at)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- Create photos table
+CREATE TABLE IF NOT EXISTS photos (
+    photo_id INT PRIMARY KEY AUTO_INCREMENT,
+    album_id INT NOT NULL,
+    file_path VARCHAR(255) NOT NULL,
+    caption VARCHAR(255),
+    display_order INT DEFAULT 0,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (album_id) REFERENCES photo_albums(album_id) ON DELETE CASCADE,
+    INDEX idx_album_id (album_id),
+    INDEX idx_display_order (display_order)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

header.php

@@ -302,8 +302,10 @@ if ($headerStyle === 'light') {
                                                     <?php
                                                     if (getUserMemberStatus($_SESSION['user_id'])) {
                                                         echo "<li><a href=\"campsites\">Campsites Directory</a></li>";
+                                                        echo "<li><a href=\"gallery\">Photo Gallery</a></li>";
                                                     } else { 
                                                         echo "<li><a href=\"membership\">Campsites Directory</a><i class='fal fa-lock'></i></li>";
+                                                        echo "<li><a href=\"membership\">Photo Gallery</a><i class='fal fa-lock'></i></li>";
                                                     } 
                                                     ?>
                                                 </ul>

src/pages/gallery/create_album.php

@@ -0,0 +1,361 @@
+<?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 = null;
+
+// Check if editing existing album
+$album_id = isset($_GET['id']) ? intval($_GET['id']) : 0;
+if ($album_id > 0) {
+    $stmt = $conn->prepare("SELECT * FROM photo_albums WHERE album_id = ? AND user_id = ?");
+    $stmt->bind_param("ii", $album_id, $_SESSION['user_id']);
+    $stmt->execute();
+    $result = $stmt->get_result();
+    
+    if ($result->num_rows > 0) {
+        $album = $result->fetch_assoc();
+    }
+    $stmt->close();
+    
+    if (!$album) {
+        $conn->close();
+        header('Location: gallery');
+        exit;
+    }
+}
+
+$conn->close();
+
+$pageTitle = $album ? 'Edit Album' : 'Create Album';
+$breadcrumbs = [['Home' => 'index.php'], ['Gallery' => 'gallery']];
+require_once($rootPath . '/components/banner.php');
+?>
+
+<style>
+    .form-container {
+        background: #f9f9f7;
+        border: 1px solid #d8d8d8;
+        border-radius: 10px;
+        padding: 40px;
+        max-width: 600px;
+        margin: 0 auto;
+    }
+
+    .form-group {
+        margin-bottom: 25px;
+    }
+
+    .form-group label {
+        display: block;
+        font-weight: 600;
+        color: #2c3e50;
+        margin-bottom: 8px;
+    }
+
+    .form-group input[type="text"],
+    .form-group textarea {
+        width: 100%;
+        padding: 12px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 14px;
+        font-family: inherit;
+    }
+
+    .form-group input[type="text"]:focus,
+    .form-group textarea:focus {
+        outline: none;
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+
+    .form-group textarea {
+        resize: vertical;
+        min-height: 120px;
+    }
+
+    .form-actions {
+        display: flex;
+        gap: 10px;
+        margin-top: 30px;
+    }
+
+    .form-actions button,
+    .form-actions a {
+        flex: 1;
+        padding: 12px 20px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        text-decoration: none;
+        text-align: center;
+        transition: background 0.3s;
+    }
+
+    .btn-submit {
+        background: #667eea;
+        color: white;
+    }
+
+    .btn-submit:hover {
+        background: #764ba2;
+    }
+
+    .btn-cancel {
+        background: #ddd;
+        color: #333;
+    }
+
+    .btn-cancel:hover {
+        background: #ccc;
+    }
+
+    .photos-section {
+        margin-top: 40px;
+        padding-top: 40px;
+        border-top: 2px solid #d8d8d8;
+    }
+
+    .photos-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 15px;
+        margin-top: 15px;
+    }
+
+    .photo-item-edit {
+        position: relative;
+        aspect-ratio: 1;
+        border-radius: 8px;
+        overflow: hidden;
+        background: white;
+        border: 1px solid #ddd;
+    }
+
+    .photo-item-edit img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .photo-delete-btn {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        background: #f44336;
+        color: white;
+        border: none;
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background 0.3s;
+    }
+
+    .photo-delete-btn:hover {
+        background: #d32f2f;
+    }
+
+    .upload-area {
+        border: 2px dashed #667eea;
+        border-radius: 8px;
+        padding: 30px;
+        text-align: center;
+        cursor: pointer;
+        transition: background 0.3s;
+    }
+
+    .upload-area:hover {
+        background: rgba(102, 126, 234, 0.05);
+    }
+
+    .upload-area.dragover {
+        background: rgba(102, 126, 234, 0.1);
+        border-color: #764ba2;
+    }
+
+    .upload-input {
+        display: none;
+    }
+
+    .upload-text {
+        color: #667eea;
+        font-weight: 500;
+    }
+
+    .helper-text {
+        font-size: 0.9rem;
+        color: #999;
+        margin-top: 5px;
+    }
+</style>
+
+<section class="tour-list-page py-100 rel">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-12">
+                <div class="form-container">
+                    <h2 style="margin-top: 0; color: #2c3e50;"><?php echo $album ? 'Edit Album' : 'Create Album'; ?></h2>
+                    
+                    <form id="albumForm" method="POST" action="<?php echo $album ? 'update_album' : 'save_album'; ?>" enctype="multipart/form-data">
+                        <input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
+                        <?php if ($album): ?>
+                            <input type="hidden" name="album_id" value="<?php echo $album['album_id']; ?>">
+                        <?php endif; ?>
+
+                        <div class="form-group">
+                            <label for="title">Album Title *</label>
+                            <input type="text" id="title" name="title" required value="<?php echo $album ? htmlspecialchars($album['title']) : ''; ?>">
+                        </div>
+
+                        <div class="form-group">
+                            <label for="description">Description</label>
+                            <textarea id="description" name="description" placeholder="Add a description for your album..."><?php echo $album ? htmlspecialchars($album['description']) : ''; ?></textarea>
+                            <div class="helper-text">Optional: Share details about when, where, or why you created this album</div>
+                        </div>
+
+                        <?php if ($album): ?>
+                            <div class="photos-section">
+                                <h4>Photos in Album</h4>
+                                <div class="photos-grid" id="photosGrid">
+                                    <!-- Photos will be loaded here -->
+                                </div>
+                            </div>
+                        <?php endif; ?>
+
+                        <div class="form-group">
+                            <label for="photos">Upload Photos</label>
+                            <div class="upload-area" id="uploadArea">
+                                <input type="file" id="photos" name="photos[]" multiple accept="image/*" class="upload-input">
+                                <div style="font-size: 2rem; margin-bottom: 10px;">📸</div>
+                                <p class="upload-text">Drag and drop photos here or click to select</p>
+                                <div class="helper-text">Supports JPG, PNG, GIF, WEBP. Max 5MB per image</div>
+                            </div>
+                        </div>
+
+                        <div id="fileList" style="margin-top: 15px;"></div>
+
+                        <div class="form-actions">
+                            <button type="submit" class="btn-submit">
+                                <?php echo $album ? 'Update Album' : 'Create Album'; ?>
+                            </button>
+                            <a href="gallery" class="btn-cancel">Cancel</a>
+                        </div>
+                    </form>
+
+                    <?php if ($album): ?>
+                        <div style="margin-top: 40px; padding-top: 40px; border-top: 2px solid #d8d8d8;">
+                            <button type="button" onclick="deleteAlbum(<?php echo $album['album_id']; ?>)" class="btn-delete" style="background: #f44336; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; width: 100%;">
+                                <i class="far fa-trash"></i> Delete Album
+                            </button>
+                        </div>
+                    <?php endif; ?>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<script>
+    const uploadArea = document.getElementById('uploadArea');
+    const fileInput = document.getElementById('photos');
+    const fileList = document.getElementById('fileList');
+
+    // Drag and drop
+    uploadArea.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadArea.classList.add('dragover');
+    });
+
+    uploadArea.addEventListener('dragleave', () => {
+        uploadArea.classList.remove('dragover');
+    });
+
+    uploadArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadArea.classList.remove('dragover');
+        fileInput.files = e.dataTransfer.files;
+        updateFileList();
+    });
+
+    uploadArea.addEventListener('click', () => {
+        fileInput.click();
+    });
+
+    fileInput.addEventListener('change', updateFileList);
+
+    function updateFileList() {
+        fileList.innerHTML = '';
+        if (fileInput.files.length > 0) {
+            fileList.innerHTML = '<p style="color: #667eea; font-weight: 500; margin-bottom: 10px;">Selected files:</p>';
+            const ul = document.createElement('ul');
+            ul.style.margin = '0';
+            ul.style.paddingLeft = '20px';
+            
+            for (let file of fileInput.files) {
+                const li = document.createElement('li');
+                li.textContent = file.name + ' (' + (file.size / 1024 / 1024).toFixed(2) + ' MB)';
+                li.style.color = '#666';
+                li.style.marginBottom = '5px';
+                ul.appendChild(li);
+            }
+            fileList.appendChild(ul);
+        }
+    }
+
+    function deleteAlbum(albumId) {
+        if (confirm('Are you sure you want to delete this album and all its photos? This action cannot be undone.')) {
+            window.location.href = 'delete_album?id=' + albumId;
+        }
+    }
+
+    // Load existing photos if editing
+    <?php if ($album): ?>
+        fetch('get_album_photos?id=<?php echo $album['album_id']; ?>')
+            .then(r => r.json())
+            .then(photos => {
+                const grid = document.getElementById('photosGrid');
+                photos.forEach(photo => {
+                    const div = document.createElement('div');
+                    div.className = 'photo-item-edit';
+                    div.innerHTML = `
+                        <img src="${photo.file_path}" alt="Photo">
+                        <button type="button" class="photo-delete-btn" onclick="deletePhoto(${photo.photo_id})">✕</button>
+                    `;
+                    grid.appendChild(div);
+                });
+            });
+
+        function deletePhoto(photoId) {
+            if (confirm('Delete this photo?')) {
+                fetch('delete_photo', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+                    body: 'photo_id=' + photoId + '&csrf_token=<?php echo generateCSRFToken(); ?>'
+                }).then(() => location.reload());
+            }
+        }
+    <?php endif; ?>
+</script>
+
+<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>

src/pages/gallery/gallery.php

@@ -0,0 +1,323 @@
+<?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();
+
+// Fetch all albums with creator information
+$albums_query = "
+    SELECT 
+        pa.album_id,
+        pa.title,
+        pa.description,
+        pa.cover_image,
+        pa.created_at,
+        u.user_id,
+        u.first_name,
+        u.last_name,
+        u.profile_pic,
+        COUNT(p.photo_id) as photo_count
+    FROM photo_albums pa
+    INNER JOIN users u ON pa.user_id = u.user_id
+    LEFT JOIN photos p ON pa.album_id = p.album_id
+    GROUP BY pa.album_id
+    ORDER BY pa.created_at DESC
+";
+
+$result = $conn->query($albums_query);
+$albums = [];
+if ($result && $result->num_rows > 0) {
+    while ($row = $result->fetch_assoc()) {
+        $albums[] = $row;
+    }
+}
+
+$conn->close();
+?>
+
+<style>
+    .album-carousel-container {
+        margin: 30px 0;
+    }
+
+    .carousel-item-album {
+        display: none;
+        text-align: center;
+        padding: 20px;
+        animation: fadeIn 0.5s;
+    }
+
+    .carousel-item-album.active {
+        display: block;
+    }
+
+    @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+
+    .album-card {
+        background: white;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        transition: transform 0.3s;
+    }
+
+    .album-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+    }
+
+    .album-cover {
+        width: 100%;
+        height: 300px;
+        object-fit: cover;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    }
+
+    .album-info {
+        padding: 20px;
+    }
+
+    .album-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: #2c3e50;
+        margin-bottom: 10px;
+    }
+
+    .album-description {
+        color: #666;
+        font-size: 0.95rem;
+        margin-bottom: 15px;
+        line-height: 1.5;
+    }
+
+    .album-meta {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        gap: 10px;
+    }
+
+    .album-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 2px solid #667eea;
+    }
+
+    .album-creator {
+        flex: 1;
+    }
+
+    .creator-name {
+        font-weight: 600;
+        color: #2c3e50;
+        display: block;
+        font-size: 0.9rem;
+    }
+
+    .photo-count {
+        font-size: 0.85rem;
+        color: #999;
+    }
+
+    .album-actions {
+        display: flex;
+        gap: 10px;
+    }
+
+    .carousel-nav {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 20px;
+        margin-top: 20px;
+    }
+
+    .carousel-btn {
+        background: #667eea;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+        font-weight: 500;
+        transition: background 0.3s;
+    }
+
+    .carousel-btn:hover {
+        background: #764ba2;
+    }
+
+    .carousel-btn:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+    }
+
+    .carousel-counter {
+        font-weight: 600;
+        color: #2c3e50;
+        min-width: 80px;
+        text-align: center;
+    }
+
+    .create-album-btn {
+        display: inline-block;
+        margin-bottom: 30px;
+    }
+
+    .no-albums {
+        text-align: center;
+        padding: 60px 20px;
+        color: #999;
+    }
+
+    .no-albums p {
+        font-size: 1.1rem;
+        margin-bottom: 20px;
+    }
+</style>
+
+<?php
+$pageTitle = 'Photo Gallery';
+$breadcrumbs = [['Home' => 'index.php'], ['Members Area' => '#']];
+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">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
+                    <h2>Member Photo Gallery</h2>
+                    <a href="create_album" class="theme-btn create-album-btn">
+                        <i class="far fa-plus"></i> Create Album
+                    </a>
+                </div>
+
+                <?php if (count($albums) > 0): ?>
+                    <div class="album-carousel-container">
+                        <div id="albumCarousel">
+                            <?php foreach ($albums as $index => $album): ?>
+                                <div class="carousel-item-album <?php echo $index === 0 ? 'active' : ''; ?>">
+                                    <div class="row">
+                                        <div class="col-lg-6">
+                                            <?php if ($album['cover_image']): ?>
+                                                <img src="<?php echo htmlspecialchars($album['cover_image']); ?>" alt="<?php echo htmlspecialchars($album['title']); ?>" class="album-cover" style="border-radius: 10px;">
+                                            <?php else: ?>
+                                                <div class="album-cover" style="display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white;">
+                                                    <i class="far fa-image"></i>
+                                                </div>
+                                            <?php endif; ?>
+                                        </div>
+                                        <div class="col-lg-6">
+                                            <div class="album-info" style="text-align: left; height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
+                                                <div>
+                                                    <h3 class="album-title"><?php echo htmlspecialchars($album['title']); ?></h3>
+                                                    <?php if ($album['description']): ?>
+                                                        <p class="album-description"><?php echo htmlspecialchars($album['description']); ?></p>
+                                                    <?php endif; ?>
+                                                </div>
+
+                                                <div>
+                                                    <div class="album-meta">
+                                                        <img src="<?php echo htmlspecialchars($album['profile_pic']); ?>" alt="<?php echo htmlspecialchars($album['first_name']); ?>" class="album-avatar">
+                                                        <div class="album-creator">
+                                                            <span class="creator-name"><?php echo htmlspecialchars($album['first_name'] . ' ' . $album['last_name']); ?></span>
+                                                            <span class="photo-count"><?php echo $album['photo_count']; ?> photo<?php echo $album['photo_count'] !== 1 ? 's' : ''; ?></span>
+                                                        </div>
+                                                    </div>
+
+                                                    <div class="album-actions">
+                                                        <a href="view_album?id=<?php echo $album['album_id']; ?>" class="theme-btn style-two">
+                                                            View Album <i class="far fa-arrow-right ms-2"></i>
+                                                        </a>
+                                                        <?php if ($album['user_id'] == $_SESSION['user_id']): ?>
+                                                            <a href="edit_album?id=<?php echo $album['album_id']; ?>" class="theme-btn" style="background: #666;">
+                                                                Edit
+                                                            </a>
+                                                        <?php endif; ?>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            <?php endforeach; ?>
+                        </div>
+
+                        <?php if (count($albums) > 1): ?>
+                            <div class="carousel-nav">
+                                <button class="carousel-btn" id="prevBtn" onclick="changeSlide(-1)">
+                                    <i class="far fa-chevron-left"></i> Previous
+                                </button>
+                                <div class="carousel-counter">
+                                    <span id="currentSlide">1</span> / <span id="totalSlides"><?php echo count($albums); ?></span>
+                                </div>
+                                <button class="carousel-btn" id="nextBtn" onclick="changeSlide(1)">
+                                    Next <i class="far fa-chevron-right"></i>
+                                </button>
+                            </div>
+                        <?php endif; ?>
+                    </div>
+                <?php else: ?>
+                    <div class="no-albums">
+                        <i class="far fa-image" style="font-size: 4rem; color: #ddd; margin-bottom: 20px; display: block;"></i>
+                        <p>No photo albums yet. Be the first to create one!</p>
+                        <a href="create_album" class="theme-btn">Create Album</a>
+                    </div>
+                <?php endif; ?>
+            </div>
+        </div>
+    </div>
+</section>
+
+<script>
+    let currentSlide = 0;
+    const slides = document.querySelectorAll('.carousel-item-album');
+    const totalSlides = slides.length;
+
+    function updateCarousel() {
+        slides.forEach((slide, index) => {
+            slide.classList.remove('active');
+            if (index === currentSlide) {
+                slide.classList.add('active');
+            }
+        });
+
+        document.getElementById('currentSlide').textContent = currentSlide + 1;
+        document.getElementById('prevBtn').disabled = currentSlide === 0;
+        document.getElementById('nextBtn').disabled = currentSlide === totalSlides - 1;
+    }
+
+    function changeSlide(direction) {
+        currentSlide += direction;
+        if (currentSlide < 0) currentSlide = 0;
+        if (currentSlide >= totalSlides) currentSlide = totalSlides - 1;
+        updateCarousel();
+    }
+
+    // Initialize carousel
+    if (totalSlides > 1) {
+        updateCarousel();
+    }
+</script>
+
+<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>

src/pages/gallery/view_album.php

@@ -0,0 +1,366 @@
+<?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: 40px 0;
+        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">
+                        <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'); ?>

src/processors/delete_album.php

@@ -0,0 +1,97 @@
+<?php
+session_start();
+
+if (!isset($_SESSION['user_id'])) {
+    http_response_code(403);
+    exit('Forbidden');
+}
+
+$rootPath = dirname(dirname(dirname(__DIR__)));
+require_once($rootPath . '/connection.php');
+
+$album_id = intval($_GET['id'] ?? 0);
+
+if (!$album_id) {
+    http_response_code(400);
+    exit('Album ID is required');
+}
+
+$conn = openDatabaseConnection();
+
+// Verify ownership
+$albumCheck = $conn->prepare("SELECT user_id FROM photo_albums WHERE album_id = ?");
+$albumCheck->bind_param("i", $album_id);
+$albumCheck->execute();
+$albumResult = $albumCheck->get_result();
+
+if ($albumResult->num_rows === 0) {
+    $conn->close();
+    http_response_code(404);
+    header('Location: gallery');
+    exit;
+}
+
+$album = $albumResult->fetch_assoc();
+if ($album['user_id'] !== $_SESSION['user_id']) {
+    $conn->close();
+    http_response_code(403);
+    header('Location: gallery');
+    exit;
+}
+$albumCheck->close();
+
+try {
+    // Start transaction
+    $conn->begin_transaction();
+
+    // Get all photos for this album
+    $photoStmt = $conn->prepare("SELECT file_path FROM photos WHERE album_id = ?");
+    $photoStmt->bind_param("i", $album_id);
+    $photoStmt->execute();
+    $photoResult = $photoStmt->get_result();
+
+    // Delete photo files
+    while ($photo = $photoResult->fetch_assoc()) {
+        $photoPath = $_SERVER['DOCUMENT_ROOT'] . $photo['file_path'];
+        if (file_exists($photoPath)) {
+            unlink($photoPath);
+        }
+    }
+    $photoStmt->close();
+
+    // Delete photos from database (cascade should handle this)
+    $deletePhotosStmt = $conn->prepare("DELETE FROM photos WHERE album_id = ?");
+    $deletePhotosStmt->bind_param("i", $album_id);
+    $deletePhotosStmt->execute();
+    $deletePhotosStmt->close();
+
+    // Delete album from database
+    $deleteAlbumStmt = $conn->prepare("DELETE FROM photo_albums WHERE album_id = ?");
+    $deleteAlbumStmt->bind_param("i", $album_id);
+    $deleteAlbumStmt->execute();
+    $deleteAlbumStmt->close();
+
+    // Delete album directory
+    $albumDir = $rootPath . '/assets/uploads/gallery/' . $album_id;
+    if (is_dir($albumDir)) {
+        rmdir($albumDir);
+    }
+
+    // Commit transaction
+    $conn->commit();
+    $conn->close();
+
+    // Redirect to gallery
+    header('Location: gallery');
+    exit;
+
+} catch (Exception $e) {
+    // Rollback on error
+    $conn->rollback();
+    $conn->close();
+
+    http_response_code(400);
+    echo 'Error deleting album: ' . htmlspecialchars($e->getMessage());
+    exit;
+}
+?>

src/processors/delete_photo.php

@@ -0,0 +1,115 @@
+<?php
+session_start();
+
+if (!isset($_SESSION['user_id']) || $_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(403);
+    exit(json_encode(['error' => 'Forbidden']));
+}
+
+$rootPath = dirname(dirname(dirname(__DIR__)));
+require_once($rootPath . '/connection.php');
+require_once($rootPath . '/functions.php');
+
+// Validate CSRF token
+if (!isset($_POST['csrf_token']) || !validateCSRFToken($_POST['csrf_token'])) {
+    http_response_code(400);
+    exit(json_encode(['error' => 'Invalid request']));
+}
+
+$photo_id = intval($_POST['photo_id'] ?? 0);
+$user_id = $_SESSION['user_id'];
+
+if (!$photo_id) {
+    http_response_code(400);
+    exit(json_encode(['error' => 'Photo ID is required']));
+}
+
+$conn = openDatabaseConnection();
+
+// Get photo and verify ownership through album
+$photoStmt = $conn->prepare("
+    SELECT p.photo_id, p.album_id, p.file_path, a.user_id 
+    FROM photos p 
+    JOIN photo_albums a ON p.album_id = a.album_id 
+    WHERE p.photo_id = ?
+");
+$photoStmt->bind_param("i", $photo_id);
+$photoStmt->execute();
+$photoResult = $photoStmt->get_result();
+
+if ($photoResult->num_rows === 0) {
+    $conn->close();
+    http_response_code(404);
+    exit(json_encode(['error' => 'Photo not found']));
+}
+
+$photo = $photoResult->fetch_assoc();
+if ($photo['user_id'] !== $user_id) {
+    $conn->close();
+    http_response_code(403);
+    exit(json_encode(['error' => 'You do not have permission to delete this photo']));
+}
+$photoStmt->close();
+
+try {
+    // Delete photo from filesystem
+    $photoPath = $_SERVER['DOCUMENT_ROOT'] . $photo['file_path'];
+    if (file_exists($photoPath)) {
+        unlink($photoPath);
+    }
+
+    // Delete from database
+    $deleteStmt = $conn->prepare("DELETE FROM photos WHERE photo_id = ?");
+    $deleteStmt->bind_param("i", $photo_id);
+    $deleteStmt->execute();
+    $deleteStmt->close();
+
+    // Update album's cover image if this was the cover
+    $albumCheck = $conn->prepare("SELECT cover_image FROM photo_albums WHERE album_id = ?");
+    $albumCheck->bind_param("i", $photo['album_id']);
+    $albumCheck->execute();
+    $albumResult = $albumCheck->get_result();
+    $album = $albumResult->fetch_assoc();
+    $albumCheck->close();
+
+    if ($album['cover_image'] === $photo['file_path']) {
+        // Set new cover to first remaining photo
+        $newCoverStmt = $conn->prepare("
+            SELECT file_path FROM photos 
+            WHERE album_id = ? 
+            ORDER BY display_order ASC 
+            LIMIT 1
+        ");
+        $newCoverStmt->bind_param("i", $photo['album_id']);
+        $newCoverStmt->execute();
+        $newCoverResult = $newCoverStmt->get_result();
+
+        if ($newCoverResult->num_rows > 0) {
+            $newCover = $newCoverResult->fetch_assoc();
+            $updateCoverStmt = $conn->prepare("UPDATE photo_albums SET cover_image = ? WHERE album_id = ?");
+            $updateCoverStmt->bind_param("si", $newCover['file_path'], $photo['album_id']);
+            $updateCoverStmt->execute();
+            $updateCoverStmt->close();
+        } else {
+            // No more photos, clear cover image
+            $clearCoverStmt = $conn->prepare("UPDATE photo_albums SET cover_image = NULL WHERE album_id = ?");
+            $clearCoverStmt->bind_param("i", $photo['album_id']);
+            $clearCoverStmt->execute();
+            $clearCoverStmt->close();
+        }
+        $newCoverStmt->close();
+    }
+
+    $conn->close();
+
+    header('Content-Type: application/json');
+    echo json_encode(['success' => true]);
+    exit;
+
+} catch (Exception $e) {
+    $conn->close();
+    http_response_code(400);
+    echo json_encode(['error' => $e->getMessage()]);
+    exit;
+}
+?>

src/processors/get_album_photos.php

@@ -0,0 +1,59 @@
+<?php
+session_start();
+
+if (!isset($_SESSION['user_id'])) {
+    http_response_code(403);
+    exit(json_encode(['error' => 'Unauthorized']));
+}
+
+$rootPath = dirname(dirname(dirname(__DIR__)));
+require_once($rootPath . '/connection.php');
+
+$album_id = intval($_GET['id'] ?? 0);
+
+if (!$album_id) {
+    http_response_code(400);
+    exit(json_encode(['error' => 'Album ID is required']));
+}
+
+$conn = openDatabaseConnection();
+
+// Verify album exists and user has access
+$albumCheck = $conn->prepare("SELECT user_id FROM photo_albums WHERE album_id = ?");
+$albumCheck->bind_param("i", $album_id);
+$albumCheck->execute();
+$albumResult = $albumCheck->get_result();
+
+if ($albumResult->num_rows === 0) {
+    $conn->close();
+    http_response_code(404);
+    exit(json_encode(['error' => 'Album not found']));
+}
+
+$album = $albumResult->fetch_assoc();
+// Allow viewing own albums or public albums (owner is a member)
+if ($album['user_id'] !== $_SESSION['user_id']) {
+    // For now, only allow owners to edit
+    $conn->close();
+    http_response_code(403);
+    exit(json_encode(['error' => 'Unauthorized']));
+}
+$albumCheck->close();
+
+// Get photos
+$photoStmt = $conn->prepare("SELECT photo_id, file_path, caption, display_order FROM photos WHERE album_id = ? ORDER BY display_order ASC");
+$photoStmt->bind_param("i", $album_id);
+$photoStmt->execute();
+$photoResult = $photoStmt->get_result();
+
+$photos = [];
+while ($photo = $photoResult->fetch_assoc()) {
+    $photos[] = $photo;
+}
+$photoStmt->close();
+
+$conn->close();
+
+header('Content-Type: application/json');
+echo json_encode($photos);
+?>

src/processors/save_album.php

@@ -0,0 +1,150 @@
+<?php
+session_start();
+
+if (!isset($_SESSION['user_id']) || $_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(403);
+    exit('Forbidden');
+}
+
+// Validate CSRF token
+if (!isset($_POST['csrf_token']) || !validateCSRFToken($_POST['csrf_token'])) {
+    http_response_code(400);
+    exit('Invalid request');
+}
+
+$rootPath = dirname(dirname(dirname(__DIR__)));
+require_once($rootPath . '/connection.php');
+require_once($rootPath . '/functions.php');
+
+$conn = openDatabaseConnection();
+
+$title = trim($_POST['title'] ?? '');
+$description = trim($_POST['description'] ?? '');
+$user_id = $_SESSION['user_id'];
+
+// Validate inputs
+if (empty($title) || !validateName($title)) {
+    $conn->close();
+    http_response_code(400);
+    echo json_encode(['error' => 'Album title is required and must be valid']);
+    exit;
+}
+
+if (!empty($description) && strlen($description) > 500) {
+    $conn->close();
+    http_response_code(400);
+    echo json_encode(['error' => 'Description must be 500 characters or less']);
+    exit;
+}
+
+// Create album directory
+$album_id = null;
+$cover_image = null;
+
+try {
+    // Start transaction
+    $conn->begin_transaction();
+
+    // Insert album record
+    $stmt = $conn->prepare("INSERT INTO photo_albums (user_id, title, description, created_at, updated_at) VALUES (?, ?, ?, NOW(), NOW())");
+    $stmt->bind_param("iss", $user_id, $title, $description);
+    $stmt->execute();
+    $album_id = $conn->insert_id;
+    $stmt->close();
+
+    // Create album directory
+    $albumDir = $rootPath . '/assets/uploads/gallery/' . $album_id;
+    if (!is_dir($albumDir)) {
+        if (!mkdir($albumDir, 0755, true)) {
+            throw new Exception('Failed to create album directory');
+        }
+    }
+
+    // Handle photo uploads
+    if (isset($_FILES['photos']) && $_FILES['photos']['error'][0] !== UPLOAD_ERR_NO_FILE) {
+        $allowedMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+        $maxSize = 5 * 1024 * 1024; // 5MB
+
+        $displayOrder = 1;
+        $firstPhoto = true;
+
+        for ($i = 0; $i < count($_FILES['photos']['name']); $i++) {
+            if ($_FILES['photos']['error'][$i] !== UPLOAD_ERR_OK) {
+                continue;
+            }
+
+            $fileName = $_FILES['photos']['name'][$i];
+            $fileTmpName = $_FILES['photos']['tmp_name'][$i];
+            $fileSize = $_FILES['photos']['size'][$i];
+            $fileMime = mime_content_type($fileTmpName);
+
+            // Validate file
+            if (!in_array($fileMime, $allowedMimes)) {
+                throw new Exception('Invalid file type: ' . $fileName);
+            }
+
+            if ($fileSize > $maxSize) {
+                throw new Exception('File too large: ' . $fileName);
+            }
+
+            // Generate unique filename
+            $ext = pathinfo($fileName, PATHINFO_EXTENSION);
+            $newFileName = uniqid('photo_') . '.' . $ext;
+            $filePath = $albumDir . '/' . $newFileName;
+            $relativePath = '/assets/uploads/gallery/' . $album_id . '/' . $newFileName;
+
+            if (!move_uploaded_file($fileTmpName, $filePath)) {
+                throw new Exception('Failed to upload: ' . $fileName);
+            }
+
+            // Set first photo as cover
+            if ($firstPhoto) {
+                $updateCover = $conn->prepare("UPDATE photo_albums SET cover_image = ? WHERE album_id = ?");
+                $updateCover->bind_param("si", $relativePath, $album_id);
+                $updateCover->execute();
+                $updateCover->close();
+                $firstPhoto = false;
+            }
+
+            // Insert photo record
+            $caption = $fileName; // Default caption is filename
+            $photoStmt = $conn->prepare("INSERT INTO photos (album_id, file_path, caption, display_order, created_at) VALUES (?, ?, ?, ?, NOW())");
+            $photoStmt->bind_param("issi", $album_id, $relativePath, $caption, $displayOrder);
+            $photoStmt->execute();
+            $photoStmt->close();
+
+            $displayOrder++;
+        }
+    }
+
+    // Commit transaction
+    $conn->commit();
+    $conn->close();
+
+    // Redirect to view album
+    header('Location: view_album?id=' . $album_id);
+    exit;
+
+} catch (Exception $e) {
+    // Rollback on error
+    $conn->rollback();
+    $conn->close();
+
+    // Clean up partially uploaded files
+    if ($album_id) {
+        $albumDir = $rootPath . '/assets/uploads/gallery/' . $album_id;
+        if (is_dir($albumDir)) {
+            array_map('unlink', glob($albumDir . '/*'));
+            rmdir($albumDir);
+        }
+        // Delete album record (will cascade delete photos)
+        $cleanupConn = openDatabaseConnection();
+        $cleanupConn->query("DELETE FROM photo_albums WHERE album_id = " . intval($album_id));
+        $cleanupConn->close();
+    }
+
+    http_response_code(400);
+    echo json_encode(['error' => $e->getMessage()]);
+    exit;
+}
+?>

src/processors/update_album.php

@@ -0,0 +1,153 @@
+<?php
+session_start();
+
+if (!isset($_SESSION['user_id']) || $_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(403);
+    exit('Forbidden');
+}
+
+// Validate CSRF token
+if (!isset($_POST['csrf_token']) || !validateCSRFToken($_POST['csrf_token'])) {
+    http_response_code(400);
+    exit('Invalid request');
+}
+
+$rootPath = dirname(dirname(dirname(__DIR__)));
+require_once($rootPath . '/connection.php');
+require_once($rootPath . '/functions.php');
+
+$conn = openDatabaseConnection();
+
+$album_id = intval($_POST['album_id'] ?? 0);
+$title = trim($_POST['title'] ?? '');
+$description = trim($_POST['description'] ?? '');
+$user_id = $_SESSION['user_id'];
+
+if (!$album_id) {
+    $conn->close();
+    http_response_code(400);
+    echo json_encode(['error' => 'Album ID is required']);
+    exit;
+}
+
+// Verify ownership
+$ownerCheck = $conn->prepare("SELECT user_id FROM photo_albums WHERE album_id = ?");
+$ownerCheck->bind_param("i", $album_id);
+$ownerCheck->execute();
+$ownerResult = $ownerCheck->get_result();
+
+if ($ownerResult->num_rows === 0) {
+    $conn->close();
+    http_response_code(404);
+    echo json_encode(['error' => 'Album not found']);
+    exit;
+}
+
+$owner = $ownerResult->fetch_assoc();
+if ($owner['user_id'] !== $user_id) {
+    $conn->close();
+    http_response_code(403);
+    echo json_encode(['error' => 'You do not have permission to edit this album']);
+    exit;
+}
+$ownerCheck->close();
+
+// Validate inputs
+if (empty($title) || !validateName($title)) {
+    $conn->close();
+    http_response_code(400);
+    echo json_encode(['error' => 'Album title is required and must be valid']);
+    exit;
+}
+
+if (!empty($description) && strlen($description) > 500) {
+    $conn->close();
+    http_response_code(400);
+    echo json_encode(['error' => 'Description must be 500 characters or less']);
+    exit;
+}
+
+try {
+    // Start transaction
+    $conn->begin_transaction();
+
+    // Update album
+    $updateStmt = $conn->prepare("UPDATE photo_albums SET title = ?, description = ?, updated_at = NOW() WHERE album_id = ?");
+    $updateStmt->bind_param("ssi", $title, $description, $album_id);
+    $updateStmt->execute();
+    $updateStmt->close();
+
+    // Handle photo uploads if any
+    if (isset($_FILES['photos']) && $_FILES['photos']['error'][0] !== UPLOAD_ERR_NO_FILE) {
+        $allowedMimes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+        $maxSize = 5 * 1024 * 1024; // 5MB
+
+        $albumDir = $rootPath . '/assets/uploads/gallery/' . $album_id;
+        
+        // Get current max display order
+        $orderStmt = $conn->prepare("SELECT MAX(display_order) as max_order FROM photos WHERE album_id = ?");
+        $orderStmt->bind_param("i", $album_id);
+        $orderStmt->execute();
+        $orderResult = $orderStmt->get_result();
+        $orderRow = $orderResult->fetch_assoc();
+        $displayOrder = ($orderRow['max_order'] ?? 0) + 1;
+        $orderStmt->close();
+
+        for ($i = 0; $i < count($_FILES['photos']['name']); $i++) {
+            if ($_FILES['photos']['error'][$i] !== UPLOAD_ERR_OK) {
+                continue;
+            }
+
+            $fileName = $_FILES['photos']['name'][$i];
+            $fileTmpName = $_FILES['photos']['tmp_name'][$i];
+            $fileSize = $_FILES['photos']['size'][$i];
+            $fileMime = mime_content_type($fileTmpName);
+
+            // Validate file
+            if (!in_array($fileMime, $allowedMimes)) {
+                throw new Exception('Invalid file type: ' . $fileName);
+            }
+
+            if ($fileSize > $maxSize) {
+                throw new Exception('File too large: ' . $fileName);
+            }
+
+            // Generate unique filename
+            $ext = pathinfo($fileName, PATHINFO_EXTENSION);
+            $newFileName = uniqid('photo_') . '.' . $ext;
+            $filePath = $albumDir . '/' . $newFileName;
+            $relativePath = '/assets/uploads/gallery/' . $album_id . '/' . $newFileName;
+
+            if (!move_uploaded_file($fileTmpName, $filePath)) {
+                throw new Exception('Failed to upload: ' . $fileName);
+            }
+
+            // Insert photo record
+            $caption = $fileName; // Default caption is filename
+            $photoStmt = $conn->prepare("INSERT INTO photos (album_id, file_path, caption, display_order, created_at) VALUES (?, ?, ?, ?, NOW())");
+            $photoStmt->bind_param("issi", $album_id, $relativePath, $caption, $displayOrder);
+            $photoStmt->execute();
+            $photoStmt->close();
+
+            $displayOrder++;
+        }
+    }
+
+    // Commit transaction
+    $conn->commit();
+    $conn->close();
+
+    // Redirect back to album view
+    header('Location: view_album?id=' . $album_id);
+    exit;
+
+} catch (Exception $e) {
+    // Rollback on error
+    $conn->rollback();
+    $conn->close();
+
+    http_response_code(400);
+    echo json_encode(['error' => $e->getMessage()]);
+    exit;
+}
+?>