Author: | curtisc123 |
---|---|
Views Total: | 2,003 views |
Official Page: | Go to website |
Last Update: | April 10, 2015 |
License: | MIT |
Preview:

Description:
PhotoViewerJS is a pure vanilla javascript library for displaying larger versions of thumbnails in a fullscreen, responsive gallery lightbox popup.
How to use it:
Load the PhotoViewerJS’ JavaScript and Stylesheet in your html page.
<link rel="stylesheet" href="css/photo.css"> <script src="js/photo.js"></script>
Add images into your webpage as follow.
<div id="PhotoGallery" class="photo-gallery"> <figure class="photo-gallery--image"> <a href="images/1.jpg" class="photo" title="Image 1 Description"> <img src="images/1.jpg" alt="Image 1" title="Image 1 Description"> </a> </figure> <figure class="photo-gallery--image"> <a href="images/2.jpg" class="photo" title="Image 2 Description"> <img src="images/2.jpg" alt="Image 2" title="Image 2 Description"> </a> </figure> <figure class="photo-gallery--image"> <a href="images/3.jpg" class="photo" title="Image 3 Description"> <img src="images/3.jpg" alt="Image 3" title="Image 3 Description"> </a> </figure> <figure class="photo-gallery--image"> <a href="images/4.jpg" class="photo" title="Image 4 Description"> <img src="images/4.jpg" alt="Image 4" title="Image 4 Description"> </a> </figure> <figure class="photo-gallery--image"> <a href="images/5.jpg" class="photo" title="Image 5 Description"> <img src="images/5.jpg" alt="Image 5" title="Image 5 Description"> </a> </figure> </div>
Include the following html markups on pages you want the gallery to appear.
<div id="PhotoViewer" class="photo-viewer"> <header class="photo-viewer--title"> <h1 id="PhotoViewerTitle">Image Title</h1> <div id="PhotoViewerClose" class="photo-viewer--close"><a href="#">X</a></div> </header> <div class="photo-viewer--container"> <figure class="photo-viewer--current-image" id="PhotoViewerCurrentImageContainer"> <img id="PhotoViewerCurrentImage" src=""> </figure> </div> <div class="photo-viewer--controls"> <div id="PhotoViewerPreviousImage" class="photo-viewer--previous-image"><a href="#">« Previous</a></div> <div id="PhotoViewerCount" class="photo-viewer--count">1/10</div> <div id="PhotoViewerNextImage" class="photo-viewer--next-image"><a href="#">Next »</a></div> </div> </div>