Galería de fotos de Flickr y lightbox-lightbox. js

Vista prévia

Descripción

Lightbox. js es una biblioteca de JavaScript Vanilla que recopila y muestra fotografías de Flickr en una cuadrícula de miniaturas mediante la API de Flickr. Al hacer clic en una imagen arbitraria se mostrará la versión grande de esta imagen en una ventana emergente de lightbox como un deslizador en línea.

Funcionamiento

Cree la ventana emergente lightbox.

<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>

Cree un contenedor para la cuadrícula de fotografías de Flickr.

<div id="photogrid" class="image-thumbnails"></div>

Especifique la API de Flickr.

var apiURL = 'https://api.flickr.com/services/rest/?method=flickr.galleries.getPhotos&format=json&nojsoncallback=1&gallery_id=72157663033498841&api_key=YOUR_API_KEY';

Inicializar el lightbox.

window.onload = function() {

//initialize the photo request

getPhotos(apiURL);
}

Aplique los siguientes estilos CSS al 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;
}