Package Exports

@lylech/react-image-magnifier
@lylech/react-image-magnifier/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lylech/react-image-magnifier) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@lylech/react-image-magnifier

A responsive image-magnifying React component for mouse and touch, with an integrated thumbnail banner. Suitable for photographs, ecommerce products, etc.

Click/tap on a thumbnail to select an image into the magnification pane. Move the mouse/drag a finger over the magnification pane to zoom-in on and pan to the corresponding area of the selected image.

Appearance of the widget components may be controlled via CSS.

Installation

npm install --save @lylech/react-image-magnifier

Basic Usage

You will have to, of course, provide your own images img1..img-n. This works great for images present on your system at build-time. For run-time, web based images are also supported as entries in arrayOfImagePaths.

import {RIMagnifier} from '@lylech/react-image-magnifier';
import img1 from "../img/img-01.jpeg";
import img2 from "../img/img-02.jpeg";
...
import img-n from "../img/img-n.jpeg";
...

export default function MyMagnifier() {
  const refMagnifier = useRef(null);

  const onThumbnailClick=(idxImage)=>{
    console.log("@ onThumbnailClick: Clicked on image# %o.", idxImage);
  };

  useEffect( ()=>{
    new RIMagnifier({
      container: refMagnifier.current,
      arrayOfImagePaths: [img1, img2, ... img-n],
      fnClickHandler: onThumbnailClick,
    });
  });
  return (
    <div className='simple-magnifier' ref={refMagnifier} />
  )
}

Details for the Technically Inclined

The design philosophy that drove the development of this widget:

to create an easy-to-use widget, with minimal fluff,
to favour rock-solid functionality for mouse and touch enabled devices,
to offer a full set of cosmetic customization options, or cosmetications.

In other words, that which it purports to do i.e. image magnification, it should do well, and for that which it does not do well i.e. look pretty, to allow users to cosmeticate to their heart's content.

Magnifier Components:

Lean, unpretentious and authored in Javascript, this widget supports a plethora of cosmetications.

Main View

The Main View is composed of two parts - the Magnification Pane and the Thumbnail Ribbon.

Magnification Pane

Move the mouse into this area to zoom-in on the selected image. Move the mouse within this area to pan the zoomed image accordingly. Move the mouse outside this area to restore the image.

For touch devices, single tap in this area to zoom-in on the selected image. Drag within this area to pan the zoomed image. Tap outside this area to restore the image.

Zoom values may be specified on a per-image basis when invoking the constructor.

Thumbnail Ribbon

Thumbnails of images available for selection are displayed in this area. Click or tap on a thumbnail to select it into the Magnification Pane.

Thumbnail images are generated automatically from the given images and sized to fit either the height or width of each thumbnail container while maintaining the original aspect ratio.

Parameters

container Required. A reference to the HTML element in which this widget is to be displayed.

arrayOfImagePaths Required. An array of images. A Thumbnail Tile will be generated for each image. Local and Web based images are supported.

arrayOfImageZoomFactors Optional. The amount of zoom for each corresponding image. By default, this is 2 for each image. i.e. the zoomed-in view will be double the width and double the height for each image. Presently there are no plans to decouple the zoom for width and height.

fnClickHandler Optional. The function to be invoked on a click/tap of a Thumbnail Tile. The index of the selected image is passed as the only argument.

initialSelection Optional. The index of the image to be displayed initially. By default, this is the first entry of arrayOfImagePaths.

Customizing the Appearance

This section identifies the CSS classes which control the appearance of this widget. The default behaviour may be overridden by defining more specific CSS rules e.g. in your own CSS file, precede each rule with the (class name or ID of the) container.

Main View

CSS Class: div.lfc-rim-product
- By default, the Main View occupies the entire width and height of its container.

Magnification Pane

CSS Class: div.lfc-rim-product
- By default the Magnification Pane occupies the entire width of the container and the top four-fifths height of the container.
CSS Class: div.lfc-rim-product.selected
- selected class is toggled when a new thumbnail is selected and is used to trigger an effect, animation or transition.

Thumbnail Ribbon

CSS Class: lfc-rim-thumbnails
- By default the Thumbnail Ribbon occupies entire width and the bottom fifth of the container.
- Scrolling thumbnails within the ribbon is not presently supported.

Thumbnail Tile

CSS Class: lfc-rim-thumbnail
- By default a Thumbnail Tile is displayed for each provided imags. In other words, the width of each tile varies according to the the number of tiles required to occupy the full width of the container.
CSS Class: lfc-rim-thumbnail.active
- active marks the currently selected image.