Fully Responsive Flickr Gallery API With Pure JavaScript

flickrGal is a responsive and easy-to-use gallery using the Flickr API. The primary goal of flickrGal is to provide a super-fast Flickr gallery that can be integrated and configured effortlessly.

It’s perfect for photographers, artists, or anyone who wants to showcase their work on a website with minimal hassle.

Written in purely JavaScript, without any external dependencies.

image gallery html css javascript, simple gallery js, pure css image gallery, best html gallery, css lightbox gallery, pure css lightbox, cssbox github

Note – Remember not to use your API key for anything important in production, I haven’t provided any way to store your API keys here. This thing is up to you.

How to make use of it:

Create a DIV container for the Flickr gallery.

<div id="flickrgal" collections='["all"]'></div>

Style the Flickr gallery.

#flickrgal {
  width: 100%;
  float: left;
  padding: 0px 0px 50px 0px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#flickrgal div { float: left; }

#loading-gallery {
  float: left;
  width: 100%;
  text-align: center;
  padding-top: 6rem;
}

#lightbox {
  text-align: center;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 5;
  left: 0px;
  top: 0px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  background-color: rgba(0, 0, 0, 0.8);
}

#stage {
  height: 100%;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

#image-box-container {
  display: inline-block;
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  z-index: 6;
}

#image-box-container div {
  height: 100%;
  width: 100%;
  padding: 75px 55px 75px 55px;
  box-sizing: border-box;
}

#image-box-container div #image-box {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
}

#image-box-container div #image-box div {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transition: opacity 0.3s linear, visibility 0.3s linear, top 0s linear 0s;
  -moz-transition: opacity 0.3s linear, visibility 0.3s linear, top 0s linear 0s;
  -o-transition: opacity 0.3s linear, visibility 0.3s linear, top 0s linear 0s;
  transition: opacity 0.3s linear, visibility 0.3s linear, top 0s linear 0s;
}

#image-box-container div #image-box .hide-stage-image {
  top: 500%;
  transition-delay: 0s, 0s, 0.3s;
  -moz-transition-delay: 0s, 0s, 0.3s;
  -o-transition-delay: 0s, 0s, 0.3s;
  -webkit-transition-delay: 0s, 0s, 0.3s;
}

#info_container {
  position: fixed;
  width: 100%;
  bottom: 0px;
  left: 0px;
  text-align: center;
  padding: 15px 0px 15px 0px;
  background: #000;
  opacity: 0.7;
  z-index: 7;
}

#info {
  padding: 0px 40px 0px 40px;
  display: inline-block;
  color: #eee;
  font-size: 14pt;
}

#title {
  font-size: 20pt;
  color: #fff;
  display: inline-block;
}

#description a {
  color: #fff;
  width: 100%;
}

.image, .album { /* Default number of tiles per row */ /* Width of tiles */
  width: 33.33333%;
  display: inline-block;
  cursor: pointer;
  float: left;
  background-color: #eee !important;
  background-clip: padding-box;
  border: 5px solid transparent;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-sizing: border-box;
}

.dummy { margin-top: 75%; /* Used to set tile ratio */ }

.inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFF;
  opacity: 0;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.inner:hover { opacity: 0.6; }

.inner div {
  top: 0;
  bottom: 0;
  width: 100%;
  margin: auto;
  line-height: 60px;
  font-size: 20px;
  height: 60px;
  text-align: center;
  position: absolute;
  color: #000;
  font-weight: 600;
}

@media (max-width: 1100px) {

.image, .album { /* Default number of tiles per row */ /* Width of tiles */
  width: 50%;
  border: 3px solid transparent;
}
}

@media (max-width: 600px) {

.image, .album { /* Default number of tiles per row */ /* Width of tiles */
  width: 100%;
  border: 2px solid transparent;
}

}

Style and animate the picture loading spinner.

@-webkit-keyframes 
spinner { 0% {
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1, 1);
}
 50% {
-webkit-transform: scale(0.5, 0.5);
}
 100% {
-webkit-transform: rotate(360deg);
-webkit-transform: scale(1, 1);
}
}

@-moz-keyframes 
spinner { from {
-moz-transform: rotate(0deg);
}

to { -moz-transform: rotate(360deg); }
}

@keyframes 
spinner { 0% {
transform: rotate(0deg) scale(1, 1);
}
 50% {
transform: rotate(180deg) scale(0.6, 0.6);
}
 100% {
transform: rotate(360deg) scale(1, 1);
}
}

.image-loading {
  width: 100%;
  height: 100%;
  background-color: inherit;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
  position: absolute;
  z-index: 0;
}

.image-loading:before, .image-loading:after {
  content: "";
  background-size: 40px;
  height: 100%;
  width: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}

.image-loading:before {
  background-image: url("../assets/images/load-1.svg");
  -webkit-animation-name: spinner;
  -webkit-animation-duration: 1.6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.35, 0.4, 0.6, 0.65);
  -moz-animation-name: spinner;
  -moz-animation-duration: 1.6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: cubic-bezier(0.35, 0.4, 0.6, 0.65);
  animation-name: spinner;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.35, 0.4, 0.6, 0.65);
}

.image-loading:after {
  background-image: url("../assets/images/load-2.svg");
  -webkit-animation-name: spinner;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.35, 0.4, 0.6, 0.65);
  -moz-animation-name: spinner;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: cubic-bezier(0.35, 0.4, 0.6, 0.65);
  animation-name: spinner;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.35, 0.4, 0.6, 0.65);
}

The required CSS styles for the gallery lightbox.

#navigation-container {
  float: left;
  width: 100%;
  height: 35px;
  margin-top: 10px;
}

.navigate-back {
  float: left;
  padding: 0 15px 0 22px;
  background: url("../assets/images/arrow.png") center left no-repeat #aaa;
  background-size: 20%;
  color: #fff;
  height: 100%;
  font-size: 10pt;
  font-weight: 600;
  text-align: right;
  margin: 0px 0px 0px 5px; /* Same as .tile border */
  overflow: hidden;
  display: table;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.navigate-back div {
  display: table-cell;
  vertical-align: middle;
}

.navigate-back:hover { background-color: blue; }

#lightbox-ui {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 8;
  display: table;
}

#lightbox-ui #arrow-left {
  float: left;
  margin-left: -1px;
  padding-left: 10px;
}

#lightbox-ui #arrow-right {
  float: right;
  margin-right: -1px;
  padding-right: 10px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

#controls {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

.close {
  background: url("../assets/images/esc.png") center center no-repeat;
  width: 30px;
  height: 30px;
  padding: 15px;
  position: fixed;
  top: 0px;
  right: 0px;
  opacity: 0.5;
  cursor: pointer;
}

.close:hover {
  opacity: 1;
  background-color: #333;
}

#arrow-right, #arrow-left {
  background: url("../assets/images/arrow.png") center center no-repeat;
  width: 40px;
  height: 150px;
  opacity: 0.5;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#arrow-right:hover, #arrow-left:hover {
  opacity: .9;
  background-color: #333;
}

.hide {
  visibility: hidden;
  opacity: 0;
}

Include the mandatory flickrgal.js on the backside of your webpage.

<script src="assets/js/flickrgal.js"></script>

Config the Flickr gallery.

var flickrApiKey = 'YOUR API KEY'; 
var flickrApiSecret = 'YOUR SECRET KEY';
var flickrUserId = 'FLICKR USER ID';

Responsive Flickr Gallery With Pure JavaScript, flickrGal Plugin/Github

See Demo And Download

Demo

Download

Official Website(bluefantail): Click Here

This superior jQuery/javascript plugin is developed by bluefantail. For extra advanced usage, please go to the official website.

How to make use of it:

See Demo And Download

Related Posts

Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

Bootstrap Notification Message Alert Plugin with jQuery

jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Customizable & Composable Charts for VueJS | vue-wcharts

A Modern GIF | Emoji Picker Vue3 Components For Your App

Animated Neon Light Buttons Animation Effects In Pure CSS