@@ -80,6 +89,7 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
@ViewChild('navArrow', { static: false }) _navArrowElem: ElementRef;
@ViewChild('dataContainer', { static: false }) _dataContainerElem: ElementRef;
@ViewChild('image', { static: false }) _imageElem: ElementRef;
+ @ViewChild('iframe', { static: false }) _iframeElem: ElementRef;
@ViewChild('caption', { static: false }) _captionElem: ElementRef;
@ViewChild('number', { static: false }) _numberElem: ElementRef;
public content: any;
@@ -155,10 +165,10 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
containerRightPadding: Math.round(this._getCssStyleValue(this._containerElem, 'padding-right')),
containerBottomPadding: Math.round(this._getCssStyleValue(this._containerElem, 'padding-bottom')),
containerLeftPadding: Math.round(this._getCssStyleValue(this._containerElem, 'padding-left')),
- imageBorderWidthTop: Math.round(this._getCssStyleValue(this._imageElem, 'border-top-width')),
- imageBorderWidthBottom: Math.round(this._getCssStyleValue(this._imageElem, 'border-bottom-width')),
- imageBorderWidthLeft: Math.round(this._getCssStyleValue(this._imageElem, 'border-left-width')),
- imageBorderWidthRight: Math.round(this._getCssStyleValue(this._imageElem, 'border-right-width'))
+ imageBorderWidthTop: Math.round(this._getCssStyleValue(this._imageElem || this._iframeElem, 'border-top-width')),
+ imageBorderWidthBottom: Math.round(this._getCssStyleValue(this._imageElem || this._iframeElem, 'border-bottom-width')),
+ imageBorderWidthLeft: Math.round(this._getCssStyleValue(this._imageElem || this._iframeElem, 'border-left-width')),
+ imageBorderWidthRight: Math.round(this._getCssStyleValue(this._imageElem || this._iframeElem, 'border-right-width'))
};
if (this._validateInputData()) {
@@ -246,8 +256,12 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
private _resetImage(): void {
this.rotate = 0;
- this._documentRef.getElementById('image').style.transform = `rotate(${this.rotate}deg)`;
- this._documentRef.getElementById('image').style.webkitTransform = `rotate(${this.rotate}deg)`;
+ const image = this._documentRef.getElementById('image');
+ if (image) {
+ image.style.transform = `rotate(${this.rotate}deg)`;
+ image.style.webkitTransform = `rotate(${this.rotate}deg)`;
+ }
+
}
private _calcTransformPoint(): void {
@@ -315,13 +329,25 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
}
private _registerImageLoadingEvent(): void {
+ const src: any = this.album[this.currentImageIndex].src;
+
+ if (this.album[this.currentImageIndex].iframe || this.needsIframe(src)) {
+ setTimeout( () => {
+ this._onLoadImageSuccess();
+ });
+ return;
+ }
+
const preloader = new Image();
preloader.onload = () => {
this._onLoadImageSuccess();
}
- const src: any = this.album[this.currentImageIndex].src;
+ preloader.onerror = (e) => {
+ this._lightboxEvent.broadcastLightboxEvent({ id: LIGHTBOX_EVENT.FILE_NOT_FOUND, data: e });
+ }
+
preloader.src = this._sanitizer.sanitize(SecurityContext.URL, src);
}
@@ -344,8 +370,8 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
let naturalImageHeight;
// set default width and height of image to be its natural
- imageWidth = naturalImageWidth = this._imageElem.nativeElement.naturalWidth;
- imageHeight = naturalImageHeight = this._imageElem.nativeElement.naturalHeight;
+ imageWidth = naturalImageWidth = this._imageElem ? this._imageElem.nativeElement.naturalWidth : this._windowRef.innerWidth * .8;
+ imageHeight = naturalImageHeight = this._imageElem ? this._imageElem.nativeElement.naturalHeight : this._windowRef.innerHeight * .8;
if (this.options.fitImageInViewPort) {
windowWidth = this._windowRef.innerWidth;
windowHeight = this._windowRef.innerHeight;
@@ -365,8 +391,8 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
}
}
- this._rendererRef.setStyle(this._imageElem.nativeElement, 'width', `${imageWidth}px`);
- this._rendererRef.setStyle(this._imageElem.nativeElement, 'height', `${imageHeight}px`);
+ this._rendererRef.setStyle((this._imageElem || this._iframeElem).nativeElement, 'width', `${imageWidth}px`);
+ this._rendererRef.setStyle((this._imageElem || this._iframeElem).nativeElement, 'height', `${imageHeight}px`);
}
this._sizeContainer(imageWidth, imageHeight);
@@ -495,9 +521,9 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
'-webkit-animation-duration', `${fadeDuration}s`);
this._rendererRef.setStyle(this._dataContainerElem.nativeElement,
'animation-duration', `${fadeDuration}s`);
- this._rendererRef.setStyle(this._imageElem.nativeElement,
+ this._rendererRef.setStyle((this._imageElem || this._iframeElem).nativeElement,
'-webkit-animation-duration', `${fadeDuration}s`);
- this._rendererRef.setStyle(this._imageElem.nativeElement,
+ this._rendererRef.setStyle((this._imageElem || this._iframeElem).nativeElement,
'animation-duration', `${fadeDuration}s`);
this._rendererRef.setStyle(this._captionElem.nativeElement,
'-webkit-animation-duration', `${fadeDuration}s`);
@@ -667,4 +693,13 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
break;
}
}
-}
\ No newline at end of file
+
+ public needsIframe(src: string) {
+ // const sanitizedUrl = this._sanitizer.sanitize(SecurityContext.URL, src);
+ if (src.match(/\.pdf$/)) {
+ return true;
+ }
+ return false;
+ }
+}
+
diff --git a/src/lightbox.css b/src/lightbox.css
index 2684012..ce5c1b3 100644
--- a/src/lightbox.css
+++ b/src/lightbox.css
@@ -31,6 +31,14 @@ html.lb-disable-scrolling {
border-radius: 3px;
}
+.lightbox .lb-iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
.lightbox a img {
border: none;
}
@@ -81,6 +89,16 @@ html.lb-disable-scrolling {
z-index: 10;
}
+.lb-iframe ~ .lb-nav {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ height: 45px;
+ width: 100%;
+ z-index: 10;
+ transform: translateY(-50%);
+}
+
.lb-container > .nav {
left: 0;
}
@@ -109,6 +127,10 @@ html.lb-disable-scrolling {
transition: opacity 0.6s;
}
+.lb-iframe ~ .lb-nav a.lb-prev {
+ width: 55px;
+}
+
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
@@ -127,6 +149,10 @@ html.lb-disable-scrolling {
transition: opacity 0.6s;
}
+.lb-iframe ~ .lb-nav a.lb-next {
+ width: 55px;
+}
+
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
diff --git a/src/lightbox.module.ts b/src/lightbox.module.ts
index 57e58db..09640c7 100644
--- a/src/lightbox.module.ts
+++ b/src/lightbox.module.ts
@@ -1,12 +1,14 @@
import { Lightbox } from './lightbox.service';
-import { LightboxComponent } from './lightbox.component';
+import {LightboxComponent, SafePipe} from './lightbox.component';
import { LightboxConfig } from './lightbox-config.service';
import { LightboxEvent, LightboxWindowRef } from './lightbox-event.service';
import { LightboxOverlayComponent } from './lightbox-overlay.component';
import { NgModule } from '@angular/core';
+import {CommonModule} from '@angular/common';
@NgModule({
- declarations: [ LightboxOverlayComponent, LightboxComponent ],
+ imports: [ CommonModule ],
+ declarations: [ LightboxOverlayComponent, LightboxComponent, SafePipe ],
providers: [
Lightbox,
LightboxConfig,