The Ionic image gallery is a classic pattern used in many applications which need to display any kind of grid with pictures or photos to the user. If you have specific requirements, there might not be an out of the box solution that works fine for you, that’s why we will create our own Ionic image gallery.
We will display images in a gallery like infinite loop where we can always see the end of the previous image and the start of the following. This question came up inside the forum and the solution we found should do the trick. Additional we make use of the Ionic-img-viewer component which helps us to display a selected picture in fullscreen with zooming options.
I tried to implement zooming on my own, but at the time writing this article (v3.0.1) the ion-scroll property for zooming does not really work. Hopefully in the future we will be able to use that zoom to build our own zooming view!
Setting up our Image Gallery App
For the start we need only a blank Ionic app and install already the npm package for our image preview, so go ahead and run:
|
1 2 3 |
ionic start ImageGallery blank cd ImageGallery npm install --save ionic-img-viewer |
Before we do the rest of our work, we need to connect everything inside our src/app/app.module.ts to load the module we have just installed:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { IonicImageViewerModule } from 'ionic-img-viewer'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), IonicImageViewerModule ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} |
Very basic, nothing really special at this time!
Building our Image Gallery
If you want to display some images, make sure to add some to your project. In my case I copied 4 images to the src/assets/img folder, named “1.jpg” and so on.
To load these images we create a very simple array inside our page, so go ahead and add it to the src/pages/home/home.ts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']; constructor(public navCtrl: NavController) { } } |
Next the actual view for the image gallery. We can make use of the ion-slides component, which is normally displaying full pages of content where you can swipe through.
However, with some properties and CSS we can finally achieve the desired look for our gallery!
Also, this component is based on the official Swiper component, where you can find many examples for animation of this component, including different effects and how the properties change the behaviour.
Almost all of these work with the Ionic component as well, so if you want some cool effects for example try adding effect="coverflow" for a nice coverflow effect with your Ionic slides!
Back to our view, we loop through our images, create the slides and display the according image in each of them. There we also add the imageViewer property which will take care of the click event on an image and display the special image viewer!
Now go ahead and insert to your src/pagges/home/home.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ion-header> <ion-navbar> <ion-title>Image Gallery</ion-title> </ion-navbar> </ion-header> <ion-content> <ion-slides class="image-slider" loop="true" slidesPerView="2"> <ion-slide *ngFor="let img of images"> <img src="assets/img/{{img}}" class="thumb-img" imageViewer/> </ion-slide> </ion-slides> </ion-content> |
As said before this is not yet the desired outcome, therefore we need to apply a tiny CSS tweak and make it look a bit better as well. Put the code below into the src/pages/home/home.scss:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
page-home { ion-slide.swiper-slide { left: 25%; } .slide-zoom { background: #e6e6e6; } .thumb-img { padding: 10px; } } |
Now your image slider should do exactly as we want, and the result will look like the images below. First, the gallery inside your view:
By using 2 slides per view but adding the distance to the left and setting the size of each slide to only 50% we were able to craft this tricky view.
If you now select one image, the image viewer component comes up where you can zoom in and swipe down to leave the view (or use the button at the top):
Conclusion
It actually don’t takes a lot of code to build a gallery, but if you want it in a special way you might have to tinker around with some CSS that works for you. Also, using an external module for the zooming view is not really perfect (although many thanks to Riron for creating it!), but hopefully this will be fixed in an upcoming Ionic release.
For now enjoy your Ionic image gallery with zooming functions!
You can watch the video version of this article below.
Happy Coding,
Simon
Runtime Error
Cannot find module “ionic-angular/gestures/pan-gesture”
I have fixed this issue by correcting right gesture file. I have raised a pull request for it. If you want to fix it quickly change it to “ionic-angular/gestures/drag-gesture”
I’ve tried these changes but had no success on making it work. =/
The problem is with respect to version difference of the ionic 3 and ionic2.
You may sort out the by removing the reference of the “ionic-angular/gestures/pan-gesture” to
“ionic-angular”
I hope this may help you !!!!!
on which file ???
Same issue i am facing but not able to get answer , 🙁
What about video, can i introduce a vimeo Url?
hardware backbutton does not close the viewer
I have a problem, if I put
import { IonicImageViewerModule } from ‘ionic-img-viewer’;
and IonicImageViewerModule in my code, when I run the app I have this error ” Cannot find module “rxjs/operators””
What is it?
need you “rxjs/operators”
import add project
Hi, How slides images in lightbox?
Hello sir, How can i show all images from folder without add name like you added, just add folder name and display all image present in folder display in slide?