Use JavaScript to create a gallery of images that are stored in the "images" directory. Insert at least 5 custom images into the directory.

On the cover page, thumbnail copies of your images will appear as thumbnails.

When you click the thumbnail, the selected full size image (but should be limited by the size of the window) appears in the layer above the page where the image name and description (similar functionality is implemented on Facebook, see picture below) is displayed at the same time. Layers also show the right and left arrows and the slideshow button.

Information about the name of the image file, image name, and image description draw from an xml document or from a json structure (one of which). Use the attached files ( xml , json ) to update the data (not the structure) based on the images you use.

Here's a look at the image layout functionality above the page at http://lokeshdhakar.com/projects/lightbox2/#example , where you click one of the images below the EXAMPLES (Four image set) .

Validate page by HTML5 and CSS3.

No external css and javascript libraries can be used in the entry.

Again, look at the look. Extremely nice assignments can be published as a preview for other classmates .