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



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

  1. asammarco says:

    I did not understand this code very well:
    @ViewChild('slider', { read: ElementRef })slider: ElementRef;

    Another step I did not understand:
    let zoom = this.slider.nativeElement.swiper.zoom;

    Thank you! This will helpful!

    1. Hey, the @ViewChild basically grabs a reference to the according DOM element and because it’s a shadow DOM component from Ionic we need to tell Angular to read the ElementRef!

      For the zoom, this is just something I have found inside the documentation of the slider here: https://idangero.us/swiper/api/#zoom

      1. asammarco says:

        Thank you Simon!

  2. JD says:

    Thank you sir! This is Great!!!

  3. This is what I get:

    Module not found: Error: Can’t resolve ‘./image-modal/image-modal.module’

    Am I missing some import or something?

  4. JD says:

    In image-modal.page.html ion-slide not working, i mean next slide image not showing

    1. Selast Lambou says:

      You may need to increase the number of slides.

Leave a Reply

Your email address will not be published. Required fields are marked *