too long

Question

I've created my own version of a gallery with lightbox effect. It works fine, but I want to add more functionalities. Like: currently, if the user clicks on the image, it zooms in but for the zoom-out image has to be clicked. I want to add that if anywhere "out-of-the zoomed-in image" is clicked, it will zoomed out. (like Facebook images), Also I want to navigate zoomed in images via arrow keys and zoomed out with esc key. Is it possible with my current codings?

First: gallery to show with 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);

3rd: my css to function lightbox effects

/*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%;
}

I've tried several ready codes from google. like: lightbox2 by Lokeshakar, but no help, they mess up my current gallery.I don't have any jquery plugin installed and my knowledge of javascript is limited.