Created
October 7, 2019 18:12
-
-
Save romanoffs/bf05a69094c40640f735e63c2d018829 to your computer and use it in GitHub Desktop.
PhotoSwipe dynamically getting images sizes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
private openPhotoSwipe(index: number): boolean { | |
const options = { | |
addCaptionHTMLFn: (item, captionEl, isFake) => { | |
if (!_.isString(item.title)) { | |
captionEl.children[0].innerHTML = ''; | |
return false; | |
} | |
captionEl.children[0].innerHTML = item.title; | |
if (_.isString(item.author)) { | |
captionEl.children[0].innerHTML += `<br><small>${item.author}</small>`; | |
} | |
return true; | |
}, | |
preload: [1, 1], | |
bgOpacity: 0.85, | |
showHideOpacity: true, | |
history: false, | |
closeOnScroll: false, | |
errorMsg: 'Ошибка при загрузке.', | |
index: index | |
}; | |
const PSWP: HTMLElement = <HTMLElement>this.ngp.LightboxElement.nativeElement; | |
const photoSwipe: PhotoSwipe<PhotoSwipeUI_Default.Options> = new PhotoSwipe(PSWP, PhotoSwipeUI_Default, this.photoSwipeImages, options); | |
photoSwipe.listen('imageLoadComplete', (index, item) => { | |
console.log(index); | |
if (item.w < 1 || item.h < 1) { // unknown size | |
const img = new Image(); | |
img.onload = () => { // will get size after load | |
item.w = img.width; // set image width | |
item.h = img.height; // set image height | |
photoSwipe.invalidateCurrItems(); // reinit Items | |
photoSwipe.updateSize(true); // reinit Items | |
}; | |
img.src = item.src; // let's download image | |
} | |
}); | |
photoSwipe.init(); | |
return false; | |
} | |
private _initPhotoSwipeImages(portfolio: Portfolio): void { | |
this.photoSwipeImages = _.map(portfolio.images, (x, i) => { | |
return { | |
src: x.fileName, | |
w: 0, | |
h: 0, | |
id: i, | |
title: `${x.title} ${x.description}`, | |
author: `${this.user.firstname} ${this.user.lastname}. Добавлено: ${x.createdDate}` | |
}; | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment