LightFullScreenGallery provide a convenient way to display pictures in fullscreen.
Keyboard navigation is supported :
- Space, enter, right arrow, down arrow get you to the next image
- Left and up arrow get you to the previous image
- Escape close the gallery
Put these three files in the same directory than your webpage:
- lightFullscreenGallery.js
- lightFullscreenGallery.css
- lfg_close.png
Include the script and the stylesheet in your html page:
<head>
...
<script src="./lightFullscreenGallery.js"></script>
<link href="./lightFullscreenGallery.css" rel="stylesheet" type="text/css">
...
</head>All your page content will be hidden and redisplayed by the script. It need to be in a block with the id "lfg_hidable". The function lfg_init should be call when the page is loaded. The easiest way to do that is to use this template:
<body onload="lfg_init();">
<div id="lfg_hidable">
<!--- Place your content here -->
</div>
</body>All your images that should be open by the gallery should have a "data-lfg" attribute with the name of the gallery in the <a> tag. This will allow you to have several gallery on the same page. Usually, you create a link arround a thumbview.
<a href="high_resolution_image.jpg" data-lfg="my_gallery">
<img src="low_resolution_image.jpg" alt="image description">
</a>You can download the demo folder and try the demo.html file in it. You can also try the online demo