104 lines
3.8 KiB
JavaScript
104 lines
3.8 KiB
JavaScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
import LightGallery from 'lightgallery/react';
|
|
import lgZoom from 'lightgallery/plugins/zoom';
|
|
import lgHash from 'lightgallery/plugins/hash';
|
|
import 'lightgallery/css/lightgallery.css';
|
|
|
|
const LcpGallery = (props) => {
|
|
const [settings, setSettings] = useState({
|
|
elementClassNames: 'lcp-gallery grid',
|
|
plugins: [],
|
|
zoom: false,
|
|
hash: false,
|
|
download: false
|
|
});
|
|
|
|
const lightGallery = useRef(null);
|
|
|
|
// onInit callback to initialize the lightGallery instance
|
|
const onInit = useCallback((detail) => {
|
|
if (detail) {
|
|
lightGallery.current = detail.instance;
|
|
}
|
|
}, []);
|
|
|
|
// Update settings based on the props
|
|
useEffect(() => {
|
|
console.log("Props received:", props);
|
|
|
|
const plugins = [];
|
|
|
|
// Convert plugin strings to actual plugin functions
|
|
if (props.plugins) {
|
|
props.plugins.forEach((plugin) => {
|
|
console.log(`Adding plugin: ${plugin}`);
|
|
if (plugin === 'lgZoom') {
|
|
plugins.push(lgZoom); // Add lgZoom function
|
|
} else if (plugin === 'lgHash') {
|
|
plugins.push(lgHash); // Add lgHash function
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update settings with new plugins and options
|
|
setSettings((prevSettings) => ({
|
|
...prevSettings,
|
|
plugins, // Updated plugins
|
|
zoom: props.zoom || false, // Default zoom option
|
|
hash: props.hash || false, // Default hash option
|
|
download: props.download || false
|
|
}));
|
|
}, [props]);
|
|
|
|
// Reinitialize gallery when settings change (with careful timing)
|
|
useEffect(() => {
|
|
console.log("Settings changed:", settings);
|
|
|
|
// Check if gallery instance exists and only refresh if initialized
|
|
if (lightGallery.current) {
|
|
console.log("Refreshing gallery...");
|
|
lightGallery.current.refresh(); // Refresh the gallery instance
|
|
}
|
|
}, [settings]);
|
|
|
|
return (
|
|
<LightGallery
|
|
ref={lightGallery}
|
|
plugins={settings.plugins}
|
|
elementClassNames={settings.elementClassNames}
|
|
zoom={settings.zoom}
|
|
hash={settings.hash}
|
|
download={settings.download}
|
|
onInit={onInit} // Pass the onInit callback to initialize the gallery instance
|
|
>
|
|
{/* Gallery Items */}
|
|
<a
|
|
data-lg-size="1600-1067"
|
|
className="gallery-item"
|
|
data-src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80"
|
|
data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@tobbes_rd' >Tobias Rademacher </a></h4><p> Location - <a href='https://unsplash.com/s/photos/puezgruppe%2C-wolkenstein-in-gr%C3%B6den%2C-s%C3%BCdtirol%2C-italien'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>"
|
|
>
|
|
<img
|
|
alt="layers of blue."
|
|
className="img-responsive"
|
|
src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80"
|
|
/>
|
|
</a>
|
|
|
|
<a
|
|
data-lg-size="1600-2400"
|
|
className="gallery-item"
|
|
data-src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80"
|
|
data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@therawhunter' >Massimiliano Morosinotto </a></h4><p> Location - <a href='https://unsplash.com/s/photos/tre-cime-di-lavaredo%2C-italia'>Tre Cime di Lavaredo, Italia</a>This is the Way</p>"
|
|
>
|
|
<img
|
|
className="img-responsive"
|
|
src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80"
|
|
/>
|
|
</a>
|
|
</LightGallery>
|
|
);
|
|
};
|
|
|
|
export default LcpGallery;
|