Galeria Lightbox
Código HTML5 CSS & JAVASCRIPT
Esta demasiado bueno para ser cierto.
HTML5
<!-- LIGHTBOX IMAGENES Y VIDEOS -->
<div class="container">
<div class="gallery">
<!-- Image Items -->
<div class="gallery-item" data-src="https://midu.dev/images/wallpapers/una-taza-de-javascript.png" data-caption="Javascript">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTW3_inKp_RXBDeo6rwXkL7NFcEw39pAR2yUA&s" alt="Una buena practica de programacion con Javascript" loading="lazy">
</div>
<!-- data src 1920x1080 y la img con 600x400-->
<div class="gallery-item" data-src="https://cdn.wnba.com/sites/1611661329/2025/06/bet365_PartnershipVideo_16x9_image01_202568.png" data-caption="Apuesta y gana...">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToXR_KOtKJ9DkrwL6zMXjb7amoJNNuBiAvFA&s" alt="Apuesta y gana..." loading="lazy">
</div>
<!-- Video Items -->
<div class="gallery-item" data-type="video" data-src="https://www.tokyvideo.com/es/embed/74337" data-caption="Gato">
<img src="https://www.shutterstock.com/image-vector/black-cat-silhouette-dancing-mode-600nw-2507831845.jpg" alt="Gato" loading="lazy">
<div class="play-icon">▶</div>
</div>
<div class="gallery-item" data-type="video" data-src="https://packaged-media.redd.it/0v8iytu0ym3f1/pb/m2-res_852p.mp4?m=DASHPlaylist.mpd&v=1&e=1753830000&s=5aca20f0a102b5adb3f3ce06048b674871f881ec" data-caption="TikTok">
<img src="https://cdn.shopify.com/s/files/1/0229/0839/files/shutterstock_1451827259_600x600.jpg?v=1697717114" alt="TikTok" loading="lazy">
<div class="play-icon">▶</div>
</div>
<!-- More Images -->
<div class="gallery-item" data-src="https://images-origin.wallwiz.link/58860cc6dc1d3f00010acf72_0" data-caption="Montañas">
<img src="https://www.shutterstock.com/image-photo/boreal-forest-floor-mossy-ground-600nw-1305782836.jpg" alt="Montañas" loading="lazy">
</div>
<div class="gallery-item" data-src="https://i.redd.it/4a3aikswg48e1.jpeg" data-caption="Nieve">
<img src="https://s1.1zoom.me/prev/593/Winter_Mountains_Austria_Snow_Alps_592581_600x400.jpg" alt="Nieve" loading="lazy">
</div>
<!-- More Videos -->
<div class="gallery-item" data-type="video" data-src="https://www.youtube.com/embed/Xpzcu5gjFYM?list=RDXpzcu5gjFYM" data-caption="Boris Brejcha">
<img src="img/Boris brejcha.jpg" alt="Boris Brejcha" loading="lazy">
<div class="play-icon">▶</div>
</div>
<div class="gallery-item" data-type="video" data-src="https://www.youtube.com/embed/qAMritvqfRw?si=c3X4hMAV-O_HyjrF" data-caption="The Birthday Massacre">
<img src="https://live.staticflickr.com/8207/8192680484_743a59d797_z.jpg" alt="The Birthday Massacre" loading="lazy">
<div class="play-icon">▶</div>
</div>
</div>
</div>
<!-- LIGHTBOX ELEMENT -->
<div class="lightbox">
<button class="lightbox-close">×</button>
<button class="lightbox-nav lightbox-prev">←</button>
<button class="lightbox-nav lightbox-next">→</button>
<div class="lightbox-content"></div>
<div class="lightbox-caption"></div>
</div>
CSS3
:root {
--primary-color: #333;
--secondary-color: #fff;
--accent-color: #4a90e2;
--overlay-color: rgba(0, 0, 0, 0.9);
--transition-speed: 0.3s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/****** LIGHTBOX IMAGENES Y VIDEOS ******/
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1{
font-size: 3rem;
text-align: center;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 200px 0;
}
.gallery-item {
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform var(--transition-speed) ease;
aspect-ratio: 16/9;
background-color: #ddd;
}
.gallery-item:hover {
transform: scale(1.03);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity var(--transition-speed) ease;
}
.gallery-item:hover img {
opacity: 0.9;
}
.gallery-item .play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--secondary-color);
font-size: 48px;
opacity: 0.8;
pointer-events: none;
display: none;
}
.gallery-item[data-type="video"] .play-icon {
display: block;
}
/* LIGHTBOX ELEMENT */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--overlay-color);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-speed) ease;
z-index: 1000;
}
.lightbox.active {
opacity: 1;
pointer-events: auto;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
width: auto;
height: auto;
margin: 0 auto;
}
.lightbox-content img,
.lightbox-content video {
max-height: 85vh;
max-width: 100%;
display: block;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.lightbox-content video {
background-color: #000;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
color: var(--secondary-color);
cursor: pointer;
background: none;
border: none;
transition: transform var(--transition-speed) ease;
}
.lightbox-close:hover {
transform: scale(1.2);
}
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: var(--secondary-color);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--transition-speed) ease;
}
.lightbox-nav:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
.lightbox-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 15px;
background-color: rgba(0, 0, 0, 0.7);
color: var(--secondary-color);
text-align: center;
font-size: 16px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
JAVASCRIPT
// LIGHTBOX
document.addEventListener('DOMContentLoaded', function() {
const galleryItems = document.querySelectorAll('.gallery-item');
const lightbox = document.querySelector('.lightbox');
const lightboxContent = document.querySelector('.lightbox-content');
const lightboxCaption = document.querySelector('.lightbox-caption');
const closeBtn = document.querySelector('.lightbox-close');
const prevBtn = document.querySelector('.lightbox-prev');
const nextBtn = document.querySelector('.lightbox-next');
let currentIndex = 0;
let items = [];
// Initialize gallery items
galleryItems.forEach((item, index) => {
items.push({
type: item.getAttribute('data-type') || 'image',
src: item.getAttribute('data-src'),
caption: item.getAttribute('data-caption') || ''
});
item.addEventListener('click', () => {
currentIndex = index;
openLightbox(currentIndex);
});
});
// Open lightbox with specific item
function openLightbox(index) {
const item = items[index];
lightboxContent.innerHTML = '';
if (item.type === 'video') {
// Create iframe for video
const iframe = document.createElement('iframe');
iframe.setAttribute('src', item.src);
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', '');
iframe.style.width = '800px';
iframe.style.height = '600px';
lightboxContent.appendChild(iframe);
} else {
// Create img for image
const img = document.createElement('img');
img.setAttribute('src', item.src);
img.setAttribute('alt', item.caption);
lightboxContent.appendChild(img);
}
lightboxCaption.textContent = item.caption;
lightbox.classList.add('active');
document.body.style.overflow = 'hidden';
}
// Close lightbox
function closeLightbox() {
lightbox.classList.remove('active');
document.body.style.overflow = 'auto';
// Pause any videos when closing
const iframe = lightboxContent.querySelector('iframe');
if (iframe) {
iframe.src = '';
}
}
// Navigation functions
function navigate(direction) {
currentIndex += direction;
if (currentIndex < 0) {
currentIndex = items.length - 1;
} else if (currentIndex >= items.length) {
currentIndex = 0;
}
openLightbox(currentIndex);
}
// Event listeners
closeBtn.addEventListener('click', closeLightbox);
prevBtn.addEventListener('click', () => navigate(-1));
nextBtn.addEventListener('click', () => navigate(1));
// Close when clicking outside content
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
closeLightbox();
}
});
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (!lightbox.classList.contains('active')) return;
switch (e.key) {
case 'Escape':
closeLightbox();
break;
case 'ArrowLeft':
navigate(-1);
break;
case 'ArrowRight':
navigate(1);
break;
}
});
});
No hay comentarios:
Publicar un comentario