Cannot read properties of undefined (reading 'height')
vishal-ranjan-codes opened this issue · comments
vishal-ranjan-codes commented
Description
I am getting this error in my next.js 14 project -
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'height')
Call Stack
Zoom.getDragAllowedAxises
node_modules\lightgallery\plugins\zoom\lg-zoom.es5.js (175:0)
HTMLDivElement.eval
node_modules\lightgallery\plugins\zoom\lg-zoom.es5.js (914:0)
Steps to reproduce
When I zoom-in by double-clicking a few times, I get this error.
JS code that you use to initialize lightGallery.
The component -
"use client";
import LightGallery from 'lightgallery/react';
import lgZoom from 'lightgallery/plugins/zoom';
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-thumbnail.css';
import Image from "next/image";
interface LightBoxImageProps {
className: string;
src: string;
alt: string;
width: number;
height: number;
}
const LightBoxImage: React.FC<LightBoxImageProps> = ({ className, src, alt, width, height }) => {
return (
<LightGallery speed={500} plugins={[lgZoom]} >
<a className="cursor-zoom-in" href={src}>
<Image className={className} src={src} alt={alt} width={width} height={height}/>
</a>
</LightGallery>
)
}
export default LightBoxImage
Sample HTML markup
<div className="project-media-block">
<LightBoxImage className="theme-br-b" src={'/Localizer - Information Architecture.webp'} alt="Localizer Journey Mapping" width={1400} height={1120}/>
</div>
Environment
- Browser and version - Chrome - latest
- OS - Windows 10
- lightGallery version - 2.7.2
stale commented
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
zemkogabor commented