Hello guys,
I am having so much fun using Ionic2.
i wanted to know how to do a gallery like layout using the framework.
Hi did you ever get this resolved
Okay, so I don’t know what you’re exactly looking for, but I can provide an example based on a simple grid. I assume some knowledge of the framework and angular2, otherwise it would take me a little bit too much time to write this example post.
We’re going to create two views. One to display a grid of images, another one to serve as a view with some details about the image.
Let’s call our first view gallery. Create your GalleryPage with the following code:
<ion-header>
<ion-navbar color="primary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Gallery</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="image__grid">
<div class="image__square" *ngFor="let image of images; let i = index" (click)="openPhoto(i)">
<img [src]="image.trusted_source" />
</div>
</div>
</ion-content>
I make no assumptions where the images are coming from. You could already have them inside your app, or just fetched them through an http call or something like that.
This is some pretty basic templating. As you can see I’ve created a custom grid, since it levers some fine grained control over what it’s going to look like. You could always use the ion-grid as well, since this also allows you to tweak it in any way you want.
Inside the grid we loop over an array of objects (which are actually images with some additional information in this case). I’ve also created a click handler for openPhoto and the index of the image is getting passed into that function whenever it get’s called. To create the gallery look I assumed four images next to each other (could be three, five or whatever you want off course). Your gallery.scss could look like this:
page-gallery {
.image__grid {
margin-top: 5px;
overflow: hidden;
.image__square:nth-child(4n+4){
padding-right: 5px;
}
.image__square {
height: 25vw;
width: 25vw;
float: left;
padding: 0px 0px 5px 5px;
img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
}
}
Now we have an awesome grid view which looks something like this:
Now, remember I said we would create a second view? This one is going to be a modal. Inside this modal we’re going to display a single picture, with optional description, date taken and the possibility to slide back and forth to previous and upcoming pictures.
This second view is going to be called photoDetailPage and I’m going to use it as a Modal.
Your HTML of this page could be something like this:
<ion-header no-border>
<ion-navbar color="dark">
<ion-buttons right>
<button ion-button icon-only (click)="close()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content color="dark">
<ion-slides pager="true" [initialSlide]="open_at_index">
<ion-slide *ngFor="let image of images">
<img [src]="image.trusted_source" class="slider__image"/>
<p class="slider__imagecaption">{{ image.caption }}</p>
</ion-slide>
</ion-slides>
</ion-content>
Also pretty straightforward right? It actually uses ion-slides. The general idea is that if we tap an image on view one, we open it up as a bigger image in photoDetailPage with a description. Also we can swipe left or right, hence the ion-slides.
Let’s add some scss styles inside your photoGalleryPage.scss to give it a nice look:
page-photo-detail {
.content {
background-color: color($colors, dark);
}
.slider__image {
width: 100%;
}
.slider__imagecaption {
color: #FFF;
font-weight: bold;
font-size: 0.8em;
}
.swiper-pagination-bullet {
background: #969696;
}
.swiper-pagination-bullet-active {
background: #FFF;
}
}
It should become something that looks like this:
Now we have created two different views. Let’s wire them up so they work together. Inside gallery.ts you should create a handler for opening up the photo’s in the second created view. We have to import the modalController for that.
import { ModalController } from 'ionic-angular';
Now add it to your constructor:
constructor(public modalCtrl: ModalController) {}
And create a function which is hooked up to our gallery.html template:
openPhoto(index){
let modal = this.modalCtrl.create(PhotoDetailPage, { photo_index: index });
modal.present();
}
This opens up the modal with the PhotoGalleryPage. We pass the index of the image so we now which photo to open up in the detail view. Inside the detail view we’re going to extract this information from the navparams. Create a variable inside your detailPage to which we connect the index we’re going to pass to the detailview.
Inside PhotoGalleryDetail.ts we do this in the constructor:
this.open_at_index = this.navParams.get('photo_index'); which actually get’s the the passed index from the navparams and set it to the variable we’ve created in the PhotoGalleryDetail.ts. Since we bound our initialSide inside our template to open_at_index, the slider knows on which page to open up the slider.
Very cool! But where are those images coming from in our detail view? The best way would be to share them through a service, which both the gallery and photodetail can access. If you don’t have to many images, you could always pass them through the navparams (though I don’t encourage that).
If you decide to use a service, import the service on both pages (and declare it inside the constructor). Create a variable inside your service called gallery_images and whenever you wan’t you can access that variable from wherever you import your service. Good luck!
4 Likes