如何使用PHP/JavaScript/CSS制作图片画廊？附现有实现代码

Let's walk through cleaning up your existing code, adding proper styling, and adding interactive functionality to make your image gallery work smoothly and look polished.

Step 1: Clean Up the PHP Code #

Your current code has syntax errors and structural issues that will break functionality. Here's the corrected version:

<div class="gallery">
    <?php
    // Skip the empty array initialization—DB::query returns the result directly
    $postImages = DB::query('SELECT * FROM posts WHERE user_id = :userid ORDER BY posted_at DESC', array(':userid' => $userid));
    
    foreach($postImages as $img) {
        // Wrap each image/overlay in a dedicated container to avoid layout issues
        echo '<div class="gallery-item">';
            echo '<a href="' . $img['postimg'] . '" class="gallery-link">';
                echo '<img src="' . $img['postimg'] . '" alt="User post image" class="gallery-image">';
            echo '</a>';
            echo '<div class="gallery-overlay">hover test</div>';
        echo '</div>';
    }
    ?>
</div>

Key fixes & improvements:

• Removed redundant $postimg[] = ""; line
• Fixed the missing quote in the href attribute that would break your links
• Added a .gallery-item container for each image/overlay pair (prevents nesting .gallery divs, which ruins layout)
• Added descriptive alt text for accessibility
• Renamed variables for better readability ($postimg → $postImages)

Step 2: Add CSS for Layout & Hover Effects #

Now let's style the gallery to be responsive and add the hover overlay functionality:

/* Base gallery container using CSS Grid for responsive layout */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Container for each image and overlay */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* Ensure images fit their container without distortion */
.gallery-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover overlay - hidden by default */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 1rem;
    text-align: center;
}

/* Show overlay and zoom image on hover */
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05);
}

This CSS gives you:

• A responsive grid that adjusts to different screen sizes
• Smooth hover effects (overlay fade-in + subtle image zoom)
• Clean, modern styling with shadows and rounded corners
• Proper image scaling that keeps your photos from stretching or squishing

Step 3: Add JavaScript for Lightbox Functionality #

Right now, clicking an image opens it in a new tab. Let's add a simple inline lightbox to let users view images without leaving the page:

<!-- Add this lightbox container at the end of your body tag -->
<div class="lightbox" id="lightbox">
    <span class="lightbox-close" id="lightboxClose">&times;</span>
    <img class="lightbox-content" id="lightboxImg">
</div>

<script>
// Get all necessary elements
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightboxImg');
const lightboxClose = document.getElementById('lightboxClose');
const galleryLinks = document.querySelectorAll('.gallery-link');

// Open lightbox when clicking a gallery image
galleryLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault(); // Stop the link from opening a new tab
        lightbox.style.display = 'block';
        lightboxImg.src = this.href;
    });
});

// Close lightbox when clicking the X button
lightboxClose.addEventListener('click', function() {
    lightbox.style.display = 'none';
});

// Close lightbox when clicking outside the image
lightbox.addEventListener('click', function(e) {
    if (e.target === lightbox) {
        lightbox.style.display = 'none';
    }
});

// Close lightbox when pressing the Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && lightbox.style.display === 'block') {
        lightbox.style.display = 'none';
    }
});
</script>

/* Add this to your CSS */
.lightbox {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80%;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
}

This JavaScript adds:

• An inline lightbox that opens when clicking images
• Multiple ways to close the lightbox (X button, clicking outside the image, Escape key)
• Smooth, full-screen image viewing

Final Tips #

• Double-check that $img['postimg'] returns valid, full image URLs (e.g., https://your-site.com/images/photo.jpg)
• Customize the overlay text, colors, and transitions to match your site's design
• For extra polish, you could add navigation arrows to cycle through images in the lightbox

内容的提问来源于stack exchange，提问作者ivan savvidis