改善灯箱

Question

我创建了自己的具有灯箱效果的画廊版本。它工作正常，但我想添加更多功能。像：当前，如果用户单击图像，则它会放大，但是必须单击缩小图像。我要补充一点，如果单击了“超出放大图像”的任何位置，它将被缩小。 （例如Facebook图像），我也想通过箭头键浏览放大的图像，并用esc键缩小。我当前的编码可以吗？

  

第一：与php一同展示的画廊

<?php
//full code to show gallery
return showImages(); //function to show image gallery

function showImages()
{
    $out = "<h1>Image Gallery</h1>
            <ul id='images'>";

    $folder = 'img';    // setting the folder name
    $filesInFolder = new DirectoryIterator($folder);    //Iterating through the 'img' directory
    while ($filesInFolder->valid())     // as long as there're valid files in the folder, continue iteration
    {
        $file = $filesInFolder->current();      //get the current file's all info
        $fileName = $file->getFilename();       //now, just get the current file name only.
        $src = "$folder/$file";

        /* get MIME type of the current file*/
        $fileInfo = new Finfo(FILEINFO_MIME_TYPE);      // return mime type ala mimetype extension
        $mimeType = $fileInfo->file($src);

        if($mimeType == 'image/jpeg' || $mimeType == 'image/png' || $mimeType == 'image/gif' || $mimeType == 'image/tiff')  // if the file is of possible one of these images
        {
            $out .= "<li><img src= '$src' </li>";   // only then add it to the list
        }

        $filesInFolder->next();     // now move to the next file in the 'img' folder
    }

    $out .= "</ul>";
    return $out;
}
?>

  

2nd：lightbox.js：

//complete code listing for lightbox.js
window.console.log("Hello from Lightbox Javascript");

// function to initialize lightbox object
function init()
{
    var lightboxElemnts = "<div id ='lightbox'>" +
        "<div id ='overlay' class='hidden'></div>" +
        "<img id='big-image' class='hidden' />" +
        "</div>";
    document.querySelector("body").innerHTML += lightboxElemnts;
    //new code: register toggle as event handler
    var bigImage = document.querySelector("#big-image")
    bigImage.addEventListener("click",toggle, false);
//end of changes
    prepareThumbs();
}

function toggle(event)
{
    var clickedImage = event.target; //get which image is clicked
    var overlay = document.querySelector("#overlay");
    var bigImage = document.querySelector("#big-image");
    bigImage.src = clickedImage.src;
    //if the overlay is hidden, we can assume bigImage is also hidden
    if(overlay.getAttribute("class") === "hidden")
    {
        overlay.setAttribute("class", "showing");
        bigImage.setAttribute("class", "showing");
    }
    else
    {
        overlay.setAttribute("class", "hidden");
        bigImage.setAttribute("class", "hidden");
    }

}

function prepareThumbs()
{
    var liElements = document.querySelectorAll("ul#images li");
    var i=0;
    var image,li;
    while(liElements.length)
    {
        li = liElements[i]; //iterating through every li item
        li.setAttribute("class", "lightbox");  // setting class attribute to 'lightbox' to every li element
        image = li.querySelector("img");    //selecting li elements of images
        image.addEventListener("click", toggle, false);
        i++;
    }
}

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

  

第3个：我的CSS功能灯箱效果

/*declare a new style rule in css/layout.css */
div#overlay{
    position: fixed;
    width: 100%;
    height:100%;
    top:0px;
    left:0px;
    background:dimgray;
    /*this is the animation to fade the overlay in gradually over 1 second*/
    transition: opacity 0.5s ease-in;
    opacity: 0.85;
}
/*hide overlay and big-image*/
div#overlay.hidden, img#big-image.hidden{
    opacity: 0;
    left:-200%;
}
/*resize images and display them as a horizontal list*/
li.lightbox img{
    height: 100px;
}
li.lightbox{
    display: inline-block;
    margin: 10px;
}

/*new CSS rule for showing the big-image*/
#big-image.showing{
    max-width: 80%;
    max-height:90%;
    position: fixed;
    display: block;
    background-color: white;
    padding: 10px;
    top: 5%;
    left: 10%;
}

我已经尝试了Google的几种现成代码。例如：Lokeshakar的lightbox2，但没有帮助，他们弄乱了我当前的画廊。我没有安装任何jquery插件，而我对javascript的了解有限。