damien/neroshitron
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/neroshitron.git synced 2025-03-14 10:05:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix:center iamge

Browse Source
This commit is contained in:
Damien Ostler 2024-05-26 21:16:47 -04:00
parent f53ea97c3e
commit b1bd8ab67e
2 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/gallery/page.tsx
View File

@ -112,7 +112,7 @@ function PageComponent() {
<div className="absolute w-full h-full overflow-hidden z-0 animate-fade-left animate-fade-left animate-once animate-duration-[2000ms] animate-normal animate-fill-forwards"> <div className="absolute w-full h-full overflow-hidden z-0 animate-fade-left animate-fade-left animate-once animate-duration-[2000ms] animate-normal animate-fill-forwards">
<img <img
src="gallery_girl.png" src="gallery_girl.png"
className="float-right object-cover h-screen w-3/6 opacity-50" className="float-right object-cover h-screen w-3/6 opacity-50 overflow-hidden"
alt="Background" alt="Background"
/> />
</div> </div>

72
components/ui/gallery.tsx
View File

@ -174,43 +174,45 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
Back Back
</button> </button>
{renderButtons()} {renderButtons()}
{selectedImage ? (<PanZoom> {selectedImage ? (
<PanZoom
<img autoCenter={true}
src={images[currentIndex]} >
style={{ objectFit: "contain", maxWidth: "100%", maxHeight: "calc(100vh - 20px)", pointerEvents:"none" }} <img
className="cursor-pointer animate-in w-full h-auto" src={images[currentIndex]}
onClick={() => close()} style={{ objectFit: "contain", maxWidth: "100%", maxHeight: "calc(100vh - 20px)", pointerEvents:"none" }}
/> className="cursor-pointer animate-in w-full h-auto"
</PanZoom> onClick={() => close()}
) : ( />
<div </PanZoom>
className="z-30 pb-10" ) : (
style={{ <div
display: selectedImage ? "flex" : "block", className="z-30 pb-10"
alignItems: "flex-start", style={{
}} display: selectedImage ? "flex" : "block",
> alignItems: "flex-start",
<Masonry }}
breakpointCols={columns} >
className="my-masonry-grid" <Masonry
style={{ width: selectedImage ? "50%" : "100%" }} breakpointCols={columns}
> className="my-masonry-grid"
{images style={{ width: selectedImage ? "50%" : "100%" }}
.filter((img) => img !== selectedImage) >
.map((image, index) => ( {images
<img .filter((img) => img !== selectedImage)
src={image} .map((image, index) => (
onClick={() => handleClick(image)} <img
className={`animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse hover:scale-105 p-2 cursor-pointer my-2 transition-all opacity-100 duration-500 ease-in-out transform`} src={image}
/> onClick={() => handleClick(image)}
))} className={`animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse hover:scale-105 p-2 cursor-pointer my-2 transition-all opacity-100 duration-500 ease-in-out transform`}
</Masonry> />
<> ))}
</Masonry>
<>
</> </>
</div> </div>
)} )}
</div> </div>
); );
} }