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!

Setting up Our App

Like always we start with a blank app and add another page that we will display as a modal later so go start with:

In order to use the page as a modal we’ll have to import it to our main module so open your app/app.module.ts and add it like this:

You’ll receive errors if you try to present the modal otherwise later so make sure you got this part right.

Before you continue make sure you got some images, so in my case I added 1.png, 2.png and 3.png to assets/img where these images are whatever you like.

Creating the Image Gallery

First of all we create the basic gallery. This already makes use of the slides and some of the options that we can pass into the slides.

This allows us to create this “cut” effect where we already see part of the next slide (image) and we don’t need any special tricky CSS for it at all!

We’ll also add a click event to each image so we can directly open the preview with zooming later on, so goa ahead and change your app/home/home.page.html to:

I’ve just added a very dummy iteration for the 3 images I added upfront, make sure your iteration has the names of your images if you don’t pick these numbers.

Also we can add some optional CSS to make the gallery look better. But this is nothing that’s needed in the end, just some sugar if you want to which you can add to your app/home/home.page.scss:

The important part is now the sliderOpts where we can define a bunch of options for our slider. Not all of these are documented on the Ionic slider but you can find them in the official Swiper API!

For now we disabled the zoom in these slides and make them appear so we always have a slide in the middle of the screen but also already see the start/end of the previous/next image.

Also, when we want to open the modal page to display our image fullscreen we can directly use the ModalController and pass in the image name (or here just the number) as componentProps and get the value inside the page later!

Go ahead and change your app/home/home.page.ts to:

This basic code gives us now already a great gallery interface. All of this without CSS to move the views or trick the slider, it’s all about basic settings!

Creating the Zoom View

Once we open the modal for a page we need to retrieve the value for the image we want to display and also set the zoom object for our slides. Yes, we will simply wrap the image inside a slide again!

For the zoom object you could set true or define more values like the maxRatio which defines how “deep” you can zoom into the image.

Another cool thing: You can actually grab a reference to the Swiper by first using the @ViewChild annotation and then later digging into the native element to access the swiper zoom! On this object you can call functions but apparently you can only zoom in/out completely.

You can’t zoom to a specific value like within Google maps and I haven’t found a hack for this. If you found anything, please let us know below!

Anyway, it’s already quite nice that we can access it from code so here’s what you can add to your app/image-modal/image-modal.page.ts now:

As I said we will wrap our image inside a Slide, but the tiny addition is that we use another div with the class swiper-zoom-container and this is what makes our image zoomable!

I’ve also added some buttons to the page and removed the header in order to get a semi transparent overlay effect (with some CSS) in a second, but for now add the code for the view to your app/image-modal/image-modal.page.html:

So just a single slide with the container and then the image. It just works!

To finally style the preview modal like a cool overlay you can add this styling to your app/image-modal/image-modal.page.scss:

This will now give you the final look for the zoomable image overlay.

Conclusion

It’s actually not hard to use the default components and Swiper API to create a zoomable view for your images with Ionic 4.

Perhaps there will be more awesome modules in the future that we can plug into our app but for now this should work great inside your apps!

You can also find a video version of this Quick Win below.

Tweet
Reddit
+1
Share35
Email
35 Shares