diff --git a/README.md b/README.md index baf61df..3a679e0 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,8 @@ Each `object` of `album` array inside your component may contains 3 properties : | src | Required | The source image to your thumbnail that you want to with use lightbox when user click on `thumbnail` image | | caption | Optional | Your caption corresponding with your image | | thumb | Optional | Source of your thumbnail. It is being used inside your component markup so this properties depends on your naming. | +| downloadUrl | Optional | Download url other than `src`. For ex. high resolution image url. | +| downloadName | Optional | Name for downloaded file. If it's not set, it will be taken from `src` url. | 3. Listen to lightbox event diff --git a/src/lightbox-event.service.ts b/src/lightbox-event.service.ts index b2a5c76..86e70d5 100644 --- a/src/lightbox-event.service.ts +++ b/src/lightbox-event.service.ts @@ -12,6 +12,7 @@ export interface IAlbum { caption?: string; thumb: string; downloadUrl?: string; + downloadName?: string; } export const LIGHTBOX_EVENT = { diff --git a/src/lightbox.component.ts b/src/lightbox.component.ts index be1c73c..46e68b3 100755 --- a/src/lightbox.component.ts +++ b/src/lightbox.component.ts @@ -196,10 +196,19 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn public download($event: any): void { $event.stopPropagation(); - const url = this.album[this.currentImageIndex].src; - const downloadUrl = this.album[this.currentImageIndex].downloadUrl; - const parts = url.split('/'); - const fileName = parts[parts.length - 1]; + + const file = this.album[this.currentImageIndex]; + const url = file.src; + const downloadUrl = file.downloadUrl; + + let fileName = ''; + if (file.downloadName) { + fileName = file.downloadName; + } else { + const parts = url.split('/'); + fileName = parts[parts.length - 1]; + } + const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const preloader = new Image();