mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

lightbox
All checks were successful
Build & Deploy KLZ Cables / build-and-deploy (push) Successful in 3m39s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-26 23:59:10 +01:00
parent 081adb02be
commit b8fdbfb10b
1 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/Lightbox.tsx
View File

@@ -1,5 +1,4 @@
/* eslint-disable-next-line @typescript-eslint/no-unused-expressions */
`use client`;
'use client';
import React, { useEffect } from 'react';
import Image from 'next/image';
@@ -37,10 +36,10 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
};
return (
<div className="fixed inset-0 z-[9999] bg-black/90 flex items-center justify-center p-4">
<div className="fixed inset-0 z-[9999] bg-black/90 flex items-center justify-center p-4 animate-in fade-in duration-300">
<button
onClick={onClose}
className="absolute top-6 right-6 text-white text-3xl hover:text-accent transition-colors z-[10000] rounded-full w-12 h-12 flex items-center justify-center hover:bg-white/20"
className="absolute top-6 right-6 text-white text-3xl hover:text-[#011dff] transition-colors z-[10000] rounded-full w-12 h-12 flex items-center justify-center hover:bg-white/10"
aria-label="Close lightbox"
>
×
@@ -48,7 +47,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
<button
onClick={prevImage}
className="absolute left-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-accent transition-colors w-12 h-12 flex items-center justify-center hover:bg-white/20 rounded-full z-[10000]"
className="absolute left-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-[#011dff] transition-colors w-12 h-12 flex items-center justify-center hover:bg-white/10 rounded-full z-[10000]"
aria-label="Previous image"
>
‹
@@ -56,21 +55,21 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
<button
onClick={nextImage}
className="absolute right-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-accent transition-colors w-12 h-12 flex items-center justify-center hover:bg-white/20 rounded-full z-[10000]"
className="absolute right-6 top-1/2 -translate-y-1/2 text-white text-4xl hover:text-[#011dff] transition-colors w-12 h-12 flex items-center justify-center hover:bg-white/10 rounded-full z-[10000]"
aria-label="Next image"
>
›
</button>
<div className="relative max-w-6xl max-h-[90vh] w-full h-full flex items-center justify-center">
<div className="relative max-w-6xl max-h-[90vh] w-full h-full flex items-center justify-center animate-in slide-in-from-bottom-4 duration-500">
<Image
src={images[currentIndex]}
alt={`Gallery image ${currentIndex + 1}`}
fill
className="object-contain max-h-[90vh] max-w-full"
className="object-contain max-h-[90vh] max-w-full shadow-2xl"
unoptimized
/>
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 bg-black/50 text-white px-6 py-3 rounded-full text-sm font-medium">
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 bg-black/60 backdrop-blur-md text-white px-6 py-3 rounded-full text-sm font-medium border border-white/10">
{currentIndex + 1} / {images.length}
</div>
</div>