Type Definitions Missing for lgMediumZoom Plugin Options in TypeScript

[Anders Rådal]

Description

When using lightGallery with the lgMediumZoom plugin in a SvelteKit project, specifying plugin-specific settings such as backgroundColor for lgMediumZoom results in a TypeScript error. This is because the backgroundColor property does not exist in the type Partial<LightGalleryAllSettings>, indicating that the type definitions do not currently support lgMediumZoom plugin options.

Steps to reproduce

1. Initialize lightGallery in a Svelte component with the lgMediumZoom plugin.
2. Attempt to set the backgroundColor option within the lgMediumZoom plugin options.
3. TypeScript error occurs indicating that backgroundColor does not exist in type Partial<LightGalleryAllSettings>.

Unfortunately, I cannot provide a live demo project, but I have included the relevant JS code and sample HTML markup below.

JS code that you use to initialize lightGallery

import { onMount } from 'svelte';
import lightGallery from 'lightgallery';
import 'lightgallery/css/lightgallery.css';  
import 'lightgallery/css/lg-medium-zoom.css';
import lgMediumZoom from 'lightgallery/plugins/mediumZoom';
onMount(() => {

const articleElement = document.querySelector('.attachLightGallery');
if (articleElement instanceof HTMLElement) {
    lightGallery(articleElement, {
        plugins: [lgMediumZoom],
        selector: '.zooming-white-bg',
        licenseKey: 'A7D7BC77-424B-4F41-9D39-CC54DE0C34AC',
        backgroundColor: 'rgba(255,255,255, .985)',
        margin: 104,
        scale: 2,
        zoom: true,
        mediumZoom: true,
        closeOnScroll: true,
        closeOnTap: true, 
        zoomFromOrigin: true,
    });
}

});

Sample HTML markup

<div class="attachLightGallery">
    <!-- Images to be zoomed with lgMediumZoom -->
</div>

Environment

• Browser and version: Arc 1.33.0 (Chromium-based)
• lightGallery version: "^2.8.0-beta.1" and tested with "2.7.2" as well
• SvelteKit version: "^2.5.0"

Additional context

The issue seems to stem from incomplete type definitions for lightGallery settings, particularly when trying to configure options for plugins like lgMediumZoom. This makes it challenging to use lightGallery in TypeScript projects where type safety is a concern, especially in SvelteKit applications.

[bytesandbots3]

@Andyradall , Thanks for highlighting the issue with lightGallery and the lgMediumZoom plugin in TypeScript! It seems we missed the types for plugin-specific options like backgroundColor, margin, mediumZoom ..etc .
Here's a quick fix you can try: extend LightGalleryAllSettings to include the missing properties (d.ts):

import 'lightgallery';

declare module 'lightgallery' {
    interface LightGalleryAllSettings {
        backgroundColor?: string;
        // Include any other plugin-specific settings here
    }
}

This workaround will help you avoid TypeScript errors for now. We're on it, and we'll include the complete types in our next release.

[stale]

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.