Flickr Photo Gallery And Lightbox – Lightbox.js

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">&times;</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;
}