Overview

This article goes over an example image carousel with zoom functionality, similar to what you see on e-commerce platforms like Amazon. In this tutorial, we will explore how to create an image carousel using the React libraries: react-image-gallery and react-image-magnify. With this example, you’ll be able to showcase E-Commerce product images in an interactive way.

This post covers a simple example of how to use of React Responsive Carousel and Medium Image Zoom libraries. The end result is an image carousel with zoom similar to viewing a product from Amazon.

Images used for this example were downloaded from https://picsum.photos/. Picsum Photos is a great source for generating test images with their URLs.

Example Source Code

GitHub

About The Example Project

The example project is a Next.js application with a single page. There are two components under the ‘./components’ folder.If you just want to use react, then install the carousel related libraries and take the two components ImageGalleryComp.jsx and ImageMagnifyComp.jsx below.

If you clone the repository just run the following npm commands.

npm install

To start the application

npm run dev

Libraries Needed

MUI – Material UI v5.4.3

Material UI library for React

npm install @mui/material @mui/lab @emotion/react @emotion/styled

React Responsive Carousel and Medium Image Zoom libraries. At the time I wrote this article, I have had some issues with the latest version of react-medium-image-zoom. I recommend trying the versions below to get the carousel and zoom working.

npm install react-image-gallery react-image-magnify react-images-zoom react-zoom-carousel

Example Package.json Contents

This example uses Material Version 5.11.x. This is not necessary and I use MUI or Tailwind in all my examples and real world projects.

{
  "name": "nextjs",
  "version": "5.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
  },
  "dependencies": {
    "@emotion/cache": "^11.10.5",
    "@emotion/react": "^11.10.6",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.15",
    "@next/font": "^13.2.4",
    "next": "13.2.4",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-image-gallery": "1.2.12",
    "react-image-magnify": "2.7.4",
    "react-images-zoom": "1.0.7",
    "react-zoom-carousel": "1.17.0"
  },
  "devDependencies": {
    "eslint": "latest",
    "eslint-config-next": "latest"
  }
}

ImageMagnifyComp Component

Wrap the HTML ‘img’ with ‘Zoom’ from react-medium-image-zoom.

Source code below is for ‘ImageMagnifyComp.jsx’.

import ReactImageMagnify from "react-image-magnify";

export default function ImageMagnifyComp(props) {
    
    return (
      <ReactImageMagnify
        {...{
          smallImage: {
            alt: "Wristwatch by Ted Baker London",
            isFluidWidth: true,
            width: 400,
            height: 400,
            src: props.image.thumbnail
          },
          largeImage: {
            src: props.image.original,
            width: 1280,
            height: 968
          },
          enlargedImagePortalId: "myPortal"
        }}
      />
    ); 
}

ImageGallery Component

The ‘ImageGalleryComp.jsx’ file imports the ‘ImageMagnifyComp.jsx’ component and renders it inside a MUI <Container/>.
A constant is defined to hold three URLs to placeimg.com.

import React, { Component } from "react";
import ImageGallery from "react-image-gallery";
import "react-image-gallery/styles/css/image-gallery.css";
import ImageMagnifyCompfrom "./ImageMagnifyComp";

function renderItem(image) {      
  return <ImageMagnifyComp image={image}/>
}

export default function ImageGalleryComp(props) {

   
    return (
      
            <ImageGallery key={1}
                        items={images}
                        startIndex={1}
                        thumbnailPosition="left"
                        renderItem= {(e) => renderItem(e)}
                        showPlayButton={false}
                        showFullscreenButton={false}
                        showNav={false}/>
          )
 }

const images = [
  {
    original: "images/lg_img_1.jpg",
    thumbnail: "images/sm_img_1.jpg"
  },
  {
    original: "images/lg_img_2.jpg",
    thumbnail: "images/sm_img_2.jpg"
  },
  {
    original: "images/lg_img_3.jpg",
    thumbnail: "images/sm_img_3.jpg"
  },
  {
    original: "images/lg_img_4.jpg",
    thumbnail: "images/sm_img_4.jpg"
  }
]

_App.js Component

The ‘app.js’ file imports the ImageCarouselBigPic component and renders it inside a MUI <Container/>.

import React, { useState } from "react";

import Grid from "@mui/material/Grid";
import Container from "@mui/material/Container";
import "react-image-gallery/styles/css/image-gallery.css";
import ImageGalleryComp from "../components/typescript/ImageGalleryComp";

export default function Index() {
  const divStyles = {    
    padding: '1px',
    objectFit: 'contain',
    filter: 'drop-shadow(0 0 10px gray) drop-shadow(0 0 10px gray)'
  };
  
  return (
    <Container maxWidth='lg'>
    <Grid container spacing={4}>
      <Grid item xs={5}>
        <ImageGalleryComp />
      </Grid>
      <Grid item xs={7} >    
        <div id="myPortal" style={divStyles}/>                                 
      </Grid>
    </Grid>
    </Container>
  );
}

Adding Some Style To The Magnified Image

Add a shadow box so it pops pops out a little.

  const divStyles = {    
    padding: '1px',
    objectFit: 'contain',
    filter: 'drop-shadow(0 0 10px gray) drop-shadow(0 0 10px gray)'
  };
  
  return (
...
        <div id="myPortal" style={divStyles}/>                                 
...

Conclusion

In conclusion, the image carousel with zoom functionality created using the react-image-gallery and react-image-magnify libraries, adds a professional and engaging touch to your site. By allowing your readers to explore more details by magnifying your images, you provide them with an immersive visual experience that gives them confidence in their research. Whether you’re showcasing product images, travel destinations, or any other captivating visuals, this image carousel is a powerful tool that elevates the appeal of your site. With the step-by-step guide provided, you now have the knowledge and resources to implement this feature to any of your existing projects. So go ahead, integrate the image carousel with zoom and take it to the next level!