extern/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2024-11-22 16:23:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

handle image click

Browse Source
This commit is contained in:
aleensd 2024-11-18 20:50:52 +02:00
parent 490f4de01d
commit eb04b02c48
1 changed files with 13 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/static/js/components/media-viewer/ImageViewer.js
View File

@ -46,7 +46,7 @@ export default function ImageViewer() {
}, [image]);
useEffect(() => {
MediaPageStore.on('loaded_image_data', onImageLoad);
MediaPageStore.on('page_init', onImageLoad);
return () => MediaPageStore.removeListener('loaded_image_data', onImageLoad);
}, []);
@ -55,46 +55,35 @@ export default function ImageViewer() {
};
const handlePrevious = () => {
setCurrentIndex((prevIndex) =>
(prevIndex - 1 + slideshowItems.length) % slideshowItems.length
);
setCurrentIndex((prevIndex) => (prevIndex - 1 + slideshowItems.length) % slideshowItems.length);
};
const handleDotClick = (index) => {
setCurrentIndex(index);
};
console.log(slideshowItems[currentIndex]?.original_media_url)
const handleImageClick = (index) => {
const mediaPageUrl = site.url + slideshowItems[index]?.url;
window.location = mediaPageUrl;
};
return !image ? null : (
<div className="viewer-image-container">
<img src={image} alt={MediaPageStore.get('media-data').title || null} onClick={() => setIsModalOpen(true)} />
{/* {slideshowItems && <div>{slideshowItems.map((i)=><li>{i.poster_url}</li>)}</div>} */}
{isModalOpen && (
{isModalOpen && slideshowItems && (
<div className="modal-overlay" onClick={() => setIsModalOpen(false)}>
<div
className="slideshow-container"
onClick={(e) => e.stopPropagation()}
>
<button
className="arrow left"
onClick={handlePrevious}
aria-label="Previous slide"
>
<div className="slideshow-container" onClick={(e) => e.stopPropagation()}>
<button className="arrow left" onClick={handlePrevious} aria-label="Previous slide">
&#8249;
</button>
<div className="slideshow-image">
<img
src={site.url + '/' + slideshowItems[currentIndex]?.original_media_url}
alt={`Slide ${currentIndex + 1}`}
onClick={() => handleImageClick(currentIndex)}
/>
</div>
<button
className="arrow right"
onClick={handleNext}
aria-label="Next slide"
>
<button className="arrow right" onClick={handleNext} aria-label="Next slide">
&#8250;
</button>
<div className="dots">