Skip to content

Instantly share code, notes, and snippets.

@romanoffs
Created October 7, 2019 18:12
Show Gist options
  • Save romanoffs/bf05a69094c40640f735e63c2d018829 to your computer and use it in GitHub Desktop.
Save romanoffs/bf05a69094c40640f735e63c2d018829 to your computer and use it in GitHub Desktop.
PhotoSwipe dynamically getting images sizes
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