load the image when the slide is active

src/fitted-image/fitted-image.html

@@ -1,10 +1,12 @@
 <div class="fitted-image">
  <ion-spinner [hidden]="!loading"></ion-spinner>
- <img
- [src]="photo.url"
+ <img *ngIf="photoUrl"
+ [src]="photoUrl"
  [ngStyle]="imageStyle"
  (load)="imageLoad($event)"
  [hidden]="loading"
  alt=""
  />
+
+
 </div>

src/fitted-image/fitted-image.scss

@@ -3,7 +3,7 @@
 
  .fitted-image {
  display: inline-block;
- position: relative;
+ //position: relative;
 
  transform-origin: left top;
 
@@ -19,6 +19,8 @@
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
+ width:100px;
+ height:100px;
  }
 
  img {

src/fitted-image/fitted-image.ts

@@ -1,21 +1,29 @@
+import { Photo } from '../interfaces/photo-interface';
+import { TokenObj } from '../interfaces/tokenObj-interface';
 import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { Http,Headers, RequestOptions,ResponseContentType } from '@angular/http';
 import { ViewController, Scroll } from 'ionic-angular';
 import { Subject } from 'rxjs/Subject';
+import {DomSanitizer} from '@angular/platform-browser';
+import 'rxjs/Rx';
 
 @Component({
  selector: 'fitted-image',
  templateUrl: './fitted-image.html',
  styleUrls: ['./fitted-image.scss'],
 })
 export class FittedImage implements OnInit, OnDestroy {
+
  @Input() photo: any;
+ @Input() tokenObj: TokenObj; 
  @Input() resizeTriggerer: Subject<any>;
  @Input() wrapperWidth: number;
  @Input() wrapperHeight: number;
 
  @Output() onImageResized = new EventEmitter();
 
  private loading: boolean = true;
+ private httpHeaders:Headers;
 
  private currentDimensions: any = {
  width: 0,
@@ -30,7 +38,12 @@ export class FittedImage implements OnInit, OnDestroy {
  private imageStyle: any = {};
  private resizeSubscription: any;
 
- constructor() {
+ private photoUrl:any;
+
+ constructor(
+ public http:Http,
+ public sanitizer:DomSanitizer
+ ) {
  }
 
  public ngOnInit() {
@@ -39,6 +52,16 @@ export class FittedImage implements OnInit, OnDestroy {
  this.resizeSubscription = this.resizeTriggerer.subscribe(event => {
  this.resize(event);
  });
+
+
+ if (this.tokenObj) {
+
+ this.httpHeaders = new Headers(); 
+ this.httpHeaders.set(this.tokenObj.header, this.tokenObj.token); 
+ }
+
+ this.getPhotoUrl();
+
  }
 
  public ngOnDestroy() {
@@ -53,6 +76,46 @@ export class FittedImage implements OnInit, OnDestroy {
  this.saveImageDimensions();
  }
 
+ async _http_call(picUrl) {
+
+ let response; 
+
+ let requestOptionsProperties = { 
+ method:'get',
+ headers: this.httpHeaders,
+ responseType: ResponseContentType.Blob, 
+ url:picUrl 
+ };
+
+ try { 
+
+ let requestOptionsObj = new RequestOptions(requestOptionsProperties); 
+ response = await this.http.request(picUrl,requestOptionsObj).toPromise(); 
+
+ }
+ catch(res_error) {
+ response = res_error; 
+ } 
+
+ return response;
+
+ }
+
+ getPhotoUrl() {
+
+ if (this.tokenObj) {
+
+ let urlCreator = window.URL; 
+ this._http_call(this.photo.url).then((imgRes)=>{ 
+ this.photoUrl = this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(imgRes._body));
+ }); 
+
+ } 
+ else 
+ this.photoUrl=this.photo.url;
+
+ }
+
  /**
  * Get the real image dimensions and other useful stuff
  */

src/gallery-modal/gallery-modal.html

@@ -12,6 +12,7 @@
  <div class="image-on-top" [hidden]="sliderLoaded">
  <zoomable-image
  [photo]="initialImage"
+ [tokenObj]="tokenObj"
  [resizeTriggerer]="resizeTriggerer"
  [wrapperWidth]="width"
  [wrapperHeight]="height"
@@ -26,14 +27,18 @@
  [ngStyle]="slidesStyle"
  touch-events
  (ionSlideDrag)="slidesDrag($event)"
+ (ionSlideDidChange)="slideDidChange($event)"
  (panup)="panUpDownEvent($event)"
  (pandown)="panUpDownEvent($event)"
  (panend)="panEndEvent($event)"
  (pancancel)="panEndEvent($event)"
  >
- <ion-slide *ngFor="let photo of photos;">
+ <ion-slide *ngFor="let photo of photos; let i=index;">
  <zoomable-image
  [photo]="photo"
+ [tokenObj]="tokenObj"
+ [picIndex]="i"
+ [visibleSlide]="visibleSlide"
  [resizeTriggerer]="resizeTriggerer"
  [wrapperWidth]="width"
  [wrapperHeight]="height"

src/gallery-modal/gallery-modal.ts

@@ -2,6 +2,7 @@ import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { ViewController, NavParams, Slides, Platform } from 'ionic-angular';
 import { Photo } from '../interfaces/photo-interface';
+import { TokenObj } from '../interfaces/tokenObj-interface';
 import { Subject } from 'rxjs/Subject';
 
 @Component({
@@ -17,7 +18,9 @@ export class GalleryModal implements OnInit {
  public photos: Photo[];
  private sliderDisabled: boolean = false;
  private initialSlide: number = 0;
+ private visibleSlide:number; 
  private currentSlide: number = 0;
+ private tokenObj:TokenObj;
  private sliderLoaded: boolean = false;
  private closeIcon: string = 'arrow-back';
  private resizeTriggerer: Subject<any> = new Subject();
@@ -39,12 +42,15 @@ export class GalleryModal implements OnInit {
  private transitionDuration: string = '200ms';
  private transitionTimingFunction: string = 'cubic-bezier(0.33, 0.66, 0.66, 1)';
 
+
  constructor(private viewCtrl: ViewController, params: NavParams, private element: ElementRef, private platform: Platform, private domSanitizer: DomSanitizer) {
  this.photos = params.get('photos') || [];
  this.closeIcon = params.get('closeIcon') || 'arrow-back';
  this.initialSlide = params.get('initialSlide') || 0;
-
+ this.visibleSlide=this.initialSlide;
+ this.tokenObj = params.get('auth_token') || null;
  this.initialImage = this.photos[this.initialSlide] || {};
+
  }
 
  public ngOnInit() {
@@ -121,6 +127,10 @@ export class GalleryModal implements OnInit {
  this.slidesDragging = true;
  }
 
+ private slideDidChange(event) { 
+ this.visibleSlide=event._activeIndex;
+ }
+
  /**
  * Called when the user pans up/down
  *

src/interfaces/tokenObj-interface.ts

@@ -0,0 +1,4 @@
+export interface TokenObj {
+ header: string;
+ token: string;
+}

src/zoomable-image/zoomable-image.html

@@ -9,8 +9,9 @@
  (onpan)="panEvent($event)"
  [ngStyle]="containerStyle"
  >
-  <fitted-image
+ <fitted-image *ngIf="canShow"
  [photo]="photo"
+ [tokenObj]="tokenObj"
  [ngStyle]="imageStyle"
  [resizeTriggerer]="resizeTriggerer"
  [wrapperWidth]="wrapperWidth"

src/zoomable-image/zoomable-image.ts

@@ -1,3 +1,4 @@
+import { TokenObj } from '../interfaces/tokenObj-interface';
 import { Component, OnInit, OnDestroy, Input, Output, ViewChild, EventEmitter, ElementRef } from '@angular/core';
 import { ViewController, Scroll } from 'ionic-angular';
 import { Subject } from 'rxjs/Subject';
@@ -11,6 +12,17 @@ export class ZoomableImage implements OnInit, OnDestroy {
  @ViewChild('ionScrollContainer', { read: ElementRef }) ionScrollContainer: ElementRef;
 
  @Input() photo: any;
+ @Input()
+ set visibleSlide(visibleSlide: number) { 
+ this._visibleSlide = visibleSlide; 
+
+ if (this.picIndex == this._visibleSlide)
+ this.canShow = true;
+
+ }
+
+ @Input() picIndex: number;
+ @Input() tokenObj: TokenObj;
  @Input() resizeTriggerer: Subject<any>;
  @Input() wrapperWidth: number;
  @Input() wrapperHeight: number;
@@ -19,6 +31,8 @@ export class ZoomableImage implements OnInit, OnDestroy {
  @Output() enableScroll = new EventEmitter();
  @Output() zoomChange = new EventEmitter();
 
+ private _visibleSlide:number;
+ private canShow:boolean=false;
  private scrollableElement: any;
  private scrollListener: any;
 
@@ -76,6 +90,9 @@ export class ZoomableImage implements OnInit, OnDestroy {
  this.resizeSubscription = this.resizeTriggerer.subscribe(event => {
  this.resize(event);
  });
+
+ if (this.picIndex == this._visibleSlide)
+ this.canShow = true;
  }
 
  public ngOnDestroy() {