Magnify Image

Magnifying interaction demo and cloneable. Suitable for ecommerce product images.

Only works on Desktop view.

Magnify image - Landscape

Magnifying interaction demo for landscape image.

Two images required:

  1. Thumbnail Image
    Make it smaller to lower the file size for faster loading speed.
  2. Enlarged Image
    Must be same ratio with thumbnail image and twice the size. (Eg. If thumbnail image is 500*300pixel, enlarged image should be 1000*600pixel).

Magnify image - Portrait

Magnifying interaction demo for potrait image.

Two images required:

  1. Thumbnail Image
    Make it smaller to lower the file size for faster loading speed.
  2. Enlarged Image
    Must be same ratio with thumbnail image and twice the size. (Eg. If thumbnail image is 300*500pixel, enlarged image should be 600*1000pixel).

Magnify image - with Lightbox

Magnifying interaction demo with lightbox.

Similar to above, using the native Lightbox element, remove the default image and replace it with the 'c-demo-img' element.

Two images required:

  1. Thumbnail Image
    Make it smaller to lower the file size for faster loading speed.
  2. Enlarged Image
    Must be same ratio with thumbnail image and twice the size. (Eg. If thumbnail image is 300*500pixel, enlarged image should be 600*1000pixel).