How to Create an Ionic 4 Image Gallery with Zoom [v4]

ionic-4-image-gallery-zoom

With Ionic 4 the old ion-scroll is gone and with it the way we created a zoomable view. The good news is the Slides are still there and we can use them to create great effects and zooming inside our Ionic 4 app!

In the past we have used packages that allowed us to zoom in or a general package to create an image gallery. The problem is that if we rely on those packages and a new version like v4 comes out, we are lost.

Some packages are created once but then never really maintained (no offense, it is hard work!) so in this Quick Win we will use the standard components that we got to implement an image gallery with additional modal preview page and zoom.

ionic-4-gallery-zoom-app

The important aspect of the Ionic slides element is that it is based on the Swiper package and we can use basically everything this package offers even if it’s not (yet) documented on the official Ionic page!

The full quick win with snippets is only available to Ionic Academy members.
Join now for

  • Unlimited access to all quick wins
  • Library of 40+ step-by-step video courses
  • Support for Ionic questions via Slack & private community

Join now & Unlock