Building an Ionic Image Gallery [v3]

If you app works with images, chances are high you want to allow your users some interaction with the images or at least show a bigger version of images. A good way to show multiple images is a gallery, and as we will see it’s actually super easy to implement.

In this Quick Win we will add the Ionic Gallery Modal package to an Ionic app and display a gallery of a few images. We don’t need any special HTML or CSS (although we can change that if we want to), so this is one of the fastest ways I can think of to achieve something like in the image below!

image-callery-animated-qw

Starting a new App

Like always we create a new app and install the plugin we want to use, so go ahead and run:

Are you ready to start learning?

Join the Ionic Academy

Next we need to import the package to our module and at the same time provide a special class from the package to override some behaviour of the Hammer config, so open your app/app.module.ts and change it to:

That’s all for the configuration of the package, now we continue with the actual usage.

Opening the Ionic Image Gallery Modal

First of all we need a way to open our gallery, therefore add a button or already work this into your own app at the right point. If you followed along, open your pages/home/home.html and add the button:

Nothing really fancy, and it won’t get hard now either.

The gallery package needs an array of images, therefore I added 4 images into my assets/imgs folder. You can pick whatever image you like, just make sure you got something to display.

Besides images the information we provide for the gallery can also contain a title which will be displayed below the image inside the gallery.

When you got all your information prepared, opening the gallery is as simple as creating a regular modal with Ionic!

The only difference is that we now pass in the GalleryModal to the modal and along with it information about the images and optional the initial slide index and also the icon to close the modal.

Go ahead and change your pages/home/home.ts to this now:

This is already enough o show the nice gallery modal view!

From my side, I kinda like the effect of having a transparent background with a gallery, so if you want to change your background color for the modal you can do it like this right inside your pages/home/home.scss:

Note: The gallery modal page is on top of the Home page, therefore we need the CSS to be outside of the actual class for the home page. Otherwise you could also add it to the general app.scss if you want to apply it in general to the gallery modal!

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

Tweet
Reddit
+1
Share25
Email
25 Shares