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:
- Thumbnail Image
Make it smaller to lower the file size for faster loading speed.
- 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:
- Thumbnail Image
Make it smaller to lower the file size for faster loading speed.
- 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:
- Thumbnail Image
Make it smaller to lower the file size for faster loading speed.
- 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).
