Galería de Flickr adaptable con Pure JavaScript-flikrGal

Vista prévia

Descripción

flikrGal es una biblioteca de JavaScript pura que se utiliza para crear una galería interactiva que recupera y muestra sus colecciones favoritas de fotos/imágenes de Flickr utilizando el < a href = "https://www.flickr.com/services/api/" target = "_ blank" rel = "noopener" > Flickr API .

Más características

• Spinner de carga basada en CSS3.
• Muestra sus fotografías de Flickr en una ventana emergente de la galería de lightbox con flechas de navegación.

Funcionamiento

Primero necesita obtener la API & claves secretas de la API de Flickr.

Cree un contenedor DIV para la galería de Flickr.

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

Estilo de la galería de Flickr.

#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;
}

}

Estilo y animar el Spinner de carga de imagen.

@-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);
}

Los estilos CSS requeridos para el lightbox de la galería.

#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;
}

Incluya el flickrgal. js necesario en la parte inferior de su página web.

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

Configuración de la galería de Flickr.

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

Registro de cambios

08/15/2018

• Bugfix