Author: | jakealbaugh |
---|---|
Views Total: | 2,154 views |
Official Page: | Go to website |
Last Update: | February 29, 2016 |
License: | MIT |
Preview:

Description:
Lightbox.js is a vanilla JavaScript library that fetches and display Flickr photos in a thumbnail grid using Flickr API. Clicking on an arbitrary image will display the large version of this image in a lightbox popup like a inline slider.
How to use it:
Create the lightbox popup.
<div class="inactive" id="lightbox-wrapper"> <div class="lightbox-content"> <a href="#" class="lightbox-nav lightbox-nav_dismiss" id="lightbox-dismiss">×</a> <a href="#" class="lightbox-nav lightbox-nav_prev" id="lightbox-prev">Previous</a> <a href="#" class="lightbox-nav lightbox-nav_next" id="lightbox-next">Next </a> <div class="lightbox-image" id="lightbox-image_container"> </div> <div class="lightbox-image_title" id="lightbox-image_title"> </div> </div> </div>
Create a container for the Flickr photo grid.
<div id="photogrid" class="image-thumbnails"></div>
Specify the Flickr API.
var apiURL = 'https://api.flickr.com/services/rest/?method=flickr.galleries.getPhotos&format=json&nojsoncallback=1&gallery_id=72157663033498841&api_key=YOUR_API_KEY';
Initialize the lightbox.
window.onload = function() { //initialize the photo request getPhotos(apiURL); }
Apply the following CSS styles to the lightbox.
.image-thumbnails { margin-top: 40px; } .image-thumbnail { display: inline-block; overflow: hidden; border-radius: 3px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; transition: all 0.2s ease; } .image-thumbnail a { display: block; } .image-thumbnail:hover { transform: scale(1.02); box-shadow: 1px 2px 10px rgba(85, 84, 89, 0.6); } #lightbox-wrapper { position: fixed; background: rgba(0, 0, 0, 0.9); width: 100%; height: 100%; } #lightbox-wrapper.inactive { visibility: hidden; } #lightbox-wrapper.active { visibility: visible; z-index: 10; } .lightbox-content { position: relative; max-width: 500px; margin-top: 40px; padding-top: 40px; margin-right: auto; margin-left: auto; text-align: center; } .lightbox-image img { box-shadow: 1px 5px 35px #000; } .lightbox-image_title { margin-top: 20px; color: #fff; } .lightbox-nav { position: absolute; color: #fff; padding: 5px; } .lightbox-nav:hover { color: #edb431; } .lightbox-nav.inactive { visibility: hidden; } .lightbox-nav_prev { left: 0; top: 0; } .lightbox-nav_prev:before { content: '?'; } .lightbox-nav_next { right: 0; top: 0; } .lightbox-nav_next:after { content: '?'; } .lightbox-nav_dismiss { top: 0; left: 47%; font-size: 40px; }