How can I add a small delete button to the top right corner of an image, along with a delete event, so that the button appears when the mouse hovers over it and hides when the mouse moves away? I have tried modifying the source code, but I cannot achieve this effect. #53
private addImagesToGallery(images: IMasonryGalleryImage[]): void {
if (!this.grid) {
throw Error(
'Grid element is not yet ready, are you trying to add image too soon?'
);
}
const imagesWrapper = this.renderer.createElement('span');
images.forEach((image) => {
const imgDivContainer = this.renderer.createElement('div');
imgDivContainer.className = 'imgDiv';
// generate unique image id
const imageId = this.getImageId();
// create element
const imageElem = this.renderer.createElement('img');
imageElem.setAttribute('id', imageId);
imageElem.setAttribute('alt', image.alt ? image.alt : 'no description');
imageElem.setAttribute('src', image.imageUrl);
// note - images are hidden by default and should be shown only after they are loaded
imageElem.setAttribute(
'style',
`display: block; width: ${this.width}px; margin-bottom: ${this.verticalGutter}px`
);
imageElem.className = this.getImageClass();
imageElem.addEventListener('click', () => {
this.handleClick(image);
});
// store guid with this image
this.activeImages.push({
id: imageId,
image: image,
});
this.renderer.appendChild(imgDivContainer, imageElem);
const deleteIconDiv = this.renderer.createElement('a');
deleteIconDiv.href = '#';
const deleteIcon = this.renderer.createElement('img');
// deleteIcon.setAttribute('id', this.getImageId());
deleteIcon.setAttribute('src', this.deleteIconBase64);
deleteIcon.className = 'delete';
this.renderer.appendChild(deleteIconDiv, deleteIcon);
this.renderer.appendChild(imgDivContainer, deleteIconDiv);
// add to dom and mansory & refresh layout
this.renderer.appendChild(imagesWrapper, imgDivContainer);
});
// add html to dom
this.renderer.appendChild(this.grid, imagesWrapper);
// add images once they are loaded
const imgLoad = imagesLoaded(imagesWrapper);
imgLoad.on('progress', (instance, image) => {
if (
image &&
image.isLoaded &&
this.msnry &&
this.msnry.appended &&
this.msnry.reloadItems
) {
// this.renderer.appendChild(this.grid, image.img);
// unhide image
// this.renderer.setStyle(image.img, "display", "block");
// remove image from gallery
this.msnry?.addItems?.([image.img]);
// refresh layout
this.msnry?.layout?.();
}
});
private addImagesToGallery(images: IMasonryGalleryImage[]): void { if (!this.grid) { throw Error( 'Grid element is not yet ready, are you trying to add image too soon?' ); }
}