mrkhosravian / next-image-zoom

Medium.com style image zoom for nextjs

Next Image Zoom

Medium.com image zoom style for Next.js optimized image component

Demo

Please check Demo here.

Installation

Install package with npm

NPM

  npm install --save next-image-zoom

Yarn

  yarn add next-image-zoom

Usage/Examples

First import Zoom component

import Zoom from "next-image-zoom";

layout={'responsive'}

import Zoom from "next-image-zoom";

<div style={{width: 700}}>
    <Zoom src={image1} layout={"responsive"}/>
</div>

layout={'fill'}

import Zoom from "next-image-zoom";

<div style={{flex: "1", height: 300, backgroundColor: "yellow"}}>
    <Zoom src={image4} layout={"fill"} objectFit={"contain"}/>
</div>

layout={'fixed'}

import Zoom from "next-image-zoom";

<Zoom src={image2} layout={"fixed"} width={200} height={400}/>

import Zoom from "next-image-zoom";

<Zoom src={"/surface-LCOnczVeFio-unsplash-2.jpg"} layout={"responsive"} width={800} height={500}/>

License

MIT

Support

For support, email [email protected].

🚀 About Me

I'm a full stack web developer that has hunger for learning new things 😋

🔗 Links

next-image-zoom's Issues

Feature request - close onclick image

When my image is clicked / zoomed, I would like clicking on the image (not just the backdrop) to close it again.

I can add this in and PR if you approve of this concept. If prop.closeOnImageClick, don't check if the ref is being clicked.