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 React, { useEffect } from 'react';
import Image from 'next/image'; import Image from 'next/image';
@@ -37,10 +36,10 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
}; };
return ( 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 <button
onClick={onClose} 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" aria-label="Close lightbox"
> >
× ×
@@ -48,7 +47,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
<button <button
onClick={prevImage} 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" aria-label="Previous image"
> >
‹ ‹
@@ -56,21 +55,21 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
<button <button
onClick={nextImage} 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" aria-label="Next image"
> >
› ›
</button> </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 <Image
src={images[currentIndex]} src={images[currentIndex]}
alt={`Gallery image ${currentIndex + 1}`} alt={`Gallery image ${currentIndex + 1}`}
fill fill
className="object-contain max-h-[90vh] max-w-full" className="object-contain max-h-[90vh] max-w-full shadow-2xl"
unoptimized 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} {currentIndex + 1} / {images.length}
</div> </div>
</div> </div>