为动态Lightbox图片库添加「上/下一张」按钮实现方案问询

Hey Greg, great job building that directory-driven Lightbox so far! Adding prev/next navigation is totally doable with your existing code—we just need to add some state tracking and button logic. Let's break down the changes step by step:

1. Update the JavaScript to Track Image State #

First, we need to keep track of all your gallery images and which one is currently displayed. Here's the revised JS file with comments explaining the key changes:

function init (){
    window.console.log("welcome newww user");
    var lightboxElements = "<div id='lightbox'>";
    lightboxElements += "<div id='overlay' class='hidden'></div>";
    lightboxElements += "<img class='hidden' id='big-image' />";
    lightboxElements += "<div id='navigation' class='hidden'>";
    lightboxElements += "<div id='next'>Next</div><div id='prev'>Prev</div>";
    lightboxElements += "</div>";
    lightboxElements += "</div>";
    document.querySelector("body").innerHTML += lightboxElements;

    // NEW: Store references to all gallery images and track current index
    const allImages = Array.from(document.querySelectorAll("ul#images li img"));
    let currentImageIndex = 0;

    var bigImage = document.querySelector("#big-image");
    var overlay = document.querySelector("#overlay");
    var navigation = document.querySelector("#navigation");
    const prevBtn = document.querySelector("#prev");
    const nextBtn = document.querySelector("#next");

    // NEW: Add click handlers for prev/next buttons
    prevBtn.addEventListener("click", goToPrevImage, false);
    nextBtn.addEventListener("click", goToNextImage, false);

    bigImage.addEventListener("click",toggle,false);
    overlay.addEventListener("click",toggle,false);
    prepareThumbs();

    // NEW: Function to switch to previous image (loop back to last if at first)
    function goToPrevImage() {
        currentImageIndex = currentImageIndex === 0 ? allImages.length - 1 : currentImageIndex - 1;
        updateBigImage();
    }

    // NEW: Function to switch to next image (loop back to first if at last)
    function goToNextImage() {
        currentImageIndex = currentImageIndex === allImages.length - 1 ? 0 : currentImageIndex + 1;
        updateBigImage();
    }

    // NEW: Helper to update the big image source
    function updateBigImage() {
        bigImage.src = allImages[currentImageIndex].src;
    }

    function toggle(){
        var clickedImage = event.target;
        // Update current index if we clicked a thumbnail
        if (clickedImage.tagName === "IMG" && clickedImage.parentElement.classList.contains("lightbox")) {
            currentImageIndex = allImages.findIndex(img => img.src === clickedImage.src);
            updateBigImage();
        }

        if (overlay.getAttribute("class") === "hidden"){
            overlay.setAttribute("class", "showing");
            bigImage.setAttribute("class", "showing");
            navigation.setAttribute("class", "showing");
        } else {
            overlay.setAttribute("class", "hidden");
            bigImage.setAttribute("class", "hidden");
            navigation.setAttribute("class", "hidden");
        }
    }

    function prepareThumbs(){
        var liElements = document.querySelectorAll("ul#images li");
        var i = 0;
        var image, li;
        while (i < liElements.length){
            li = liElements[i];
            li.setAttribute("class", "lightbox");
            image = li.querySelector("img");
            image.addEventListener("click", toggle, false);
            i += 1;
        }
    }
}

document.addEventListener("DOMContentLoaded", init, false);

Key changes here:

• We created an allImages array to store references to every thumbnail in your gallery
• Added a currentImageIndex variable to track which image is currently displayed in the Lightbox
• Added goToPrevImage and goToNextImage functions to handle navigation (with loop-around logic so it doesn't break at the first/last image)
• Updated the toggle function to set the correct index when a thumbnail is clicked
• Added click listeners for the prev/next buttons

2. Fix the Navigation CSS (So Buttons Don't Overlap the Image) #

Your current CSS places the navigation div on top of the big image—let's adjust that so the prev/next buttons sit on the left and right edges of the screen, over the overlay:

h1{ color:red; }

div#overlay {
    position: fixed; /* Changed from absolute to fixed to cover full screen even when scrolling */
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background:black;
    opacity: 0.85;
    transition: opacity 1s ease-in;
}

/* Hide overlay and big-image and navigation */
div#overlay.hidden, img#big-image.hidden, div#navigation.hidden {
    opacity: 0;
    visibility: hidden; /* Use visibility instead of left:-200% for smoother transitions */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Resize images and display them as a horizontal list */
li.lightbox img { height: 100px; }
li.lightbox { display: inline-block; margin: 10px; }

#big-image.showing{
    max-width: 80%;
    max-height: 90%;
    position: fixed;
    background-color: white;
    padding: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the image perfectly */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#navigation.showing {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#prev, #next {
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1.2rem;
}

#prev:hover, #next:hover {
    background: rgba(0,0,0,0.9);
}

Key CSS fixes:

• Changed position: absolute to fixed for overlay, big image, and navigation so they stay in place when scrolling
• Centered the big image using transform: translate(-50%, -50%) for better positioning
• Restyled the navigation to place prev/next buttons on the left and right edges of the screen
• Used visibility alongside opacity for smoother show/hide transitions
• Added hover styles for the buttons to improve usability

3. Verify the PHP Code (No Changes Needed!) #

Your PHP code is already working great—it correctly pulls all JPEGs from the img directory and generates thumbnails. No modifications needed here!

How It Works Now #

• Click any thumbnail to open the Lightbox with that image
• Use the "Prev" and "Next" buttons to cycle through all images (it loops back to the start/end automatically)
• Click the overlay or the big image to close the Lightbox

This maintains your progressive enhancement approach—if JavaScript is disabled, the thumbnails still load normally, just without the Lightbox functionality.

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