### Installing lightGallery via Bower

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/getting-started.md

This snippet illustrates the installation of lightGallery using Bower, a package manager specifically designed for front-end web packages. It's an option for projects that utilize Bower for dependency management.

```sh
bower install lightgallery --save
```

--------------------------------

### Installing lightGallery via Yarn

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/getting-started.md

This snippet shows how to install lightGallery using Yarn, an alternative and popular package manager for JavaScript. Yarn offers similar functionality to NPM but with potentially faster and more reliable installations.

```sh
yarn add lightgallery
```

--------------------------------

### Starting Development Server with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-lit/README.md

This command starts a local development server using `@web/dev-server`. It handles bare import specifiers, transpilation, and polyfills, allowing for live previewing of the project.

```bash
npm run serve
```

--------------------------------

### Serving Static Site Locally with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-lit/README.md

This command starts a local server to preview the generated static site. It allows developers to view the documentation site before deployment, typically accessible at `http://localhost:8000`.

```bash
npm run docs:serve
```

--------------------------------

### Installing Project Dependencies with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-lit/README.md

This command installs all necessary project dependencies as defined in the `package.json` file. It's the first step to set up the development environment.

```bash
npm i
```

--------------------------------

### Starting lightgallery-react Development Server

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-react/README.md

This command starts the development server for the `lightgallery-react` project, allowing you to view the application in a web browser at `http://localhost:3000`. It enables live reloading on code changes.

```Shell
npm run start
```

--------------------------------

### Installing lightGallery via NPM

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/getting-started.md

This snippet demonstrates how to install the lightGallery library using the Node Package Manager (NPM). NPM is a widely used package manager for the JavaScript programming language, simplifying dependency management.

```sh
npm install lightgallery
```

--------------------------------

### Defining lightGallery HTML Markup

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/getting-started.md

This HTML snippet provides an example of the basic markup structure for a lightGallery instance. Each <a> tag represents an image, with the href attribute pointing to the full-size image and the optional data-lg-size attribute providing dimensions for the initial zoom animation.

```HTML
<div id="lightgallery">
    <a href="img/img1.jpg" data-lg-size="1600-2400">
        <img alt="img1" src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg" data-lg-size="1024-800">
        <img alt="img2" src="img/thumb2.jpg" />
    </a>
    ...
</div>
```

--------------------------------

### Setting Up lightGallery Development Environment

Source: https://github.com/sachinchoolur/lightgallery/blob/master/contributing.md

This snippet outlines the steps to set up the lightGallery development environment, including installing dependencies, starting the build in watch mode, and compiling specific or all plugins. It also provides instructions for viewing the preview documentation site.

```Shell
npm install
npm npm start
LG_PLUGINS=['thumbnails','pager'] npm start
LG_PLUGINS='all' npm start
cd site && npm run start
```

--------------------------------

### Installing Project Dependencies with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-vue/README.md

This command installs all necessary project dependencies listed in the 'package.json' file. It is the initial step required to set up the project for development or production use.

```Shell
npm install
```

--------------------------------

### Serving Development Files (NPM)

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-lit/dev/README.md

This NPM script command starts a local development server to serve the HTML files and other assets from the development directory. It enables viewing the element in a browser during development without the need for a bundled output.

```Shell
npm run serve
```

--------------------------------

### Initializing lightGallery with Plugins in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/getting-started.md

This snippet demonstrates how to initialize the lightGallery library on an HTML element. It shows how to pass an array of plugins (e.g., lgZoom, lgThumbnail) and a licenseKey as part of the configuration object. The speed property and other settings can also be defined here.

```javascript
<script type="text/javascript">
    lightGallery(document.getElementById('lightgallery'), {
        plugins: [lgZoom, lgThumbnail],
        licenseKey: 'your_license_key',
        speed: 500,
        // ... other settings
    });
</script>
```

--------------------------------

### Importing lightGallery and Plugins (ES6 Modules)

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/getting-started.md

This JavaScript snippet demonstrates how to import lightGallery and its plugins using ES6 module syntax. This approach is suitable for modern JavaScript development environments that utilize module bundlers like Webpack or Rollup.

```JavaScript
import lightGallery from 'lightgallery';

// Plugins
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'

```

--------------------------------

### Compiling and Hot-Reloading for Development with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-vue/README.md

This command compiles the application and starts a hot-reloading development server. It is primarily used for local development, allowing real-time testing of changes.

```Shell
npm run serve
```

--------------------------------

### Starting React Development Server with Yarn

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-react/README.md

Runs the React application in development mode using Yarn. It opens the app in the browser at `http://localhost:3000` and reloads the page upon edits, displaying lint errors in the console.

```Shell
yarn start
```

--------------------------------

### Starting Development Server - Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/12/README.md

Runs the Angular development server, making the application accessible via a web browser at `http://localhost:4200/`. It automatically reloads the app upon source file changes.

```Shell
ng serve
```

--------------------------------

### Building Static Site with Eleventy and npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-lit/README.md

This command generates the static website using Eleventy, based on templates and pages in `/docs-src`. The output is placed in the `/docs` directory, suitable for GitHub Pages.

```bash
npm run docs
```

--------------------------------

### Installing lightGallery via NPM

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/angular-image-video-gallery.md

This command installs the lightGallery package using npm, which is the first step to integrate the library into an Angular application.

```npm
npm install lightgallery
```

--------------------------------

### Running Project Tests with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-lit/README.md

This command executes the project's test suite using `@web/test-runner` along with Mocha and Chai. It verifies the functionality and correctness of the components.

```bash
npm test
```

--------------------------------

### Installing lightGallery via NPM

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/react-image-video-gallery.md

This command installs the lightGallery package, which includes the React component, into your project's `node_modules` directory. It's the first step to integrate lightGallery into a React application.

```bash
npm install lightgallery
```

--------------------------------

### Creating New Angular Build for lightGallery

Source: https://github.com/sachinchoolur/lightgallery/blob/master/contributing.md

This snippet provides a step-by-step guide to set up a new Angular workspace, generate an application and a library, and configure the build process for the lightGallery Angular component. It includes commands for installing Angular CLI, creating a new workspace, generating an application and a library, and linking the lightGallery core.

```Shell
cd lightgallery-angular
npm install @angular/cli@17.0.4
ng new 17 --create-application false
cd 17
ng generate application angular-demo
ng generate library lightgallery-angular (Uses folder name as package name)
# open package.json and add "build:library": "ng build lightgallery-angular"
# Go to lightGallery dist folder and run npm link
# Go to lightgallery-angular/17 folder and run npm link lightgallery
# Change package name to lightgallery/angular/17
# Need to compile library before using it
# Replace both lib and app folder from previous version
```

--------------------------------

### Including lightGallery CSS Files in HTML

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/getting-started.md

This HTML snippet demonstrates how to link lightGallery's core and plugin CSS files, or the bundled CSS, within the <head> section of your document. Proper inclusion of these stylesheets is crucial for the gallery's visual presentation and styling.

```HTML
<head>
    <link type="text/css" rel="stylesheet" href="css/lightgallery.css" />

    <!-- lightgallery plugins -->
    <link type="text/css" rel="stylesheet" href="css/lg-zoom.css" />
    <link type="text/css" rel="stylesheet" href="css/lg-thumbnail.css" />


    <!-- OR -->

    <link type="text/css" rel="stylesheet" href="css/lightgallery-bundle.css" />
</head>
```

--------------------------------

### Installing lightGallery with Bower

Source: https://github.com/sachinchoolur/lightgallery/blob/master/README.md

Command to install the lightGallery library using Bower, a package manager for the web. The --save flag adds it to the project's bower.json dependencies.

```sh
bower install lightgallery --save
```

--------------------------------

### Installing lightGallery with NPM

Source: https://github.com/sachinchoolur/lightgallery/blob/master/README.md

Command to install the lightGallery library using the Node Package Manager (NPM). This is the standard way to add lightGallery as a dependency to a JavaScript project.

```sh
npm install lightgallery
```

--------------------------------

### Including lightGallery JavaScript Files in HTML

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/getting-started.md

This HTML snippet shows how to include lightGallery's core JavaScript file (lightgallery.umd.js or its minified version) and optional plugin JavaScript files in the <body> section of your document. These scripts provide the interactive functionality of the gallery.

```HTML
<body>
    ....

    <script src="js/lightgallery.umd.js"></script>
    <!-- Or use the minified version -->
    <script src="js/lightgallery.min.js"></script>

    <!-- lightgallery plugins -->
    <script src="js/plugins/lg-thumbnail.umd.js"></script>
    <script src="js/plugins/lg-zoom.umd.js"></script>
</body>
```

--------------------------------

### Building lightgallery Core Library

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-react/README.md

This command builds the core `lightgallery` library from its root path, generating a `dist` folder containing the compiled assets. It's a prerequisite for linking `lightgallery` with `lightgallery-react`.

```Shell
npm run build
```

--------------------------------

### Starting Development Server with Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/10/README.md

This command starts a local development server for the Angular application. It automatically reloads the app when source files change, accessible at `http://localhost:4200/`.

```Shell
ng serve
```

--------------------------------

### Watching Static Site Files for Automatic Rebuilds with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-lit/README.md

This command watches for changes in the static site's source files and automatically rebuilds the site. It's useful for live development of the documentation.

```bash
npm run docs:watch
```

--------------------------------

### Installing lightGallery with Yarn

Source: https://github.com/sachinchoolur/lightgallery/blob/master/README.md

Command to install the lightGallery library using Yarn, an alternative package manager for JavaScript. This provides another option for managing project dependencies.

```sh
yarn add lightgallery
```

--------------------------------

### Running Unit Tests with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-vue/README.md

This command executes the project's unit tests, which are designed to verify individual components or functions in isolation. It ensures that specific parts of the codebase function as expected.

```Shell
npm run test:unit
```

--------------------------------

### Compiling and Minifying for Production with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-vue/README.md

This command compiles and minifies the project's source code, optimizing it for production deployment. The output is designed for efficiency and reduced file size.

```Shell
npm run build
```

--------------------------------

### Running Development Server with Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/17/README.md

This command starts a local development server for an Angular application. It automatically reloads the application in the browser when source files are changed, facilitating rapid development.

```Shell
ng serve
```

--------------------------------

### Installing lightGallery via NPM

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/vue-image-video-gallery.md

This command installs the lightGallery package, which includes the Vue component, into your project's `node_modules` directory. It is the first step required to use lightGallery in a Vue.js application.

```bash
npm install lightgallery
```

--------------------------------

### Building Project for Production - Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/12/README.md

Compiles the Angular project into deployable artifacts, storing them in the `dist/` directory. This command prepares the application for production deployment.

```Shell
ng build
```

--------------------------------

### Linking lightgallery-react to lightgallery Core

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-react/README.md

Executed within the `lightgallery-react` project, this command links the local `lightgallery-react` project to the globally linked `lightgallery` core library, enabling local development and testing of the integration.

```Shell
npm link lightgallary
```

--------------------------------

### Building React App for Production with Yarn

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-react/README.md

Builds the React application for production to the `build` folder using Yarn. It optimizes the build for performance, minifies code, and includes hashes in filenames, preparing the app for deployment.

```Shell
yarn build
```

--------------------------------

### Initializing lightGallery with Video Plugin - JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/demos/video-gallery.md

Initializes lightGallery on an element to enable video support. This snippet demonstrates the basic setup required to play videos by including the `lgVideo` plugin.

```js
lightGallery(document.getElementById('gallery-videos-demo'), {
    plugins: [lgVideo],
});
```

--------------------------------

### Building Angular Project for Production with Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/17/README.md

This command compiles the Angular application and bundles it into deployable artifacts. The output files, optimized for production, are typically stored in the `dist/` directory.

```Shell
ng build
```

--------------------------------

### Running End-to-End Tests with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-vue/README.md

This command executes the project's end-to-end tests, which simulate user scenarios to ensure the entire application flow works correctly. These tests validate the system from a user's perspective.

```Shell
npm run test:e2e
```

--------------------------------

### Linting Project Files with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-lit/README.md

This command runs ESLint and lit-analyzer to check TypeScript files and lit-html templates for code quality and style issues. Rules can be adjusted in `.eslintrc.json` and `tsconfig.json`.

```bash
npm run lint
```

--------------------------------

### Dynamic Documentation Rendering with Hugo Template

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/layouts/shortcodes/attributes.html

This Hugo template processes site data to render documentation for interfaces and variables. It retrieves data based on `interfaceName` and `variableName` parameters, displays their names and descriptions, and conditionally renders content based on a `data` parameter. It also includes logic to highlight code examples found within `example` comment tags.

```Go Template
{{$data := .Get "data"}} {{$interface := dict}} {{$variable := dict}} {{$interfaceName := .Get "interface"}} {{$variableName := .Get "variable"}} {{ range .Site.Data.doc.children -}} {{ if eq .name $interfaceName}} {{$interface = .children}} {{ else if eq .name $variableName }} {{$variable = .children}} {{ end }} {{ end -}} {{range $index, $element := $interface}} {{ end }}

Name

Description {{$data}}

{{ if eq $data "true"}} {{ range .comment.tags -}} {{ if eq .tag "data-attr"}}

{{.text | safeHTML}} [#](#{{.text}})

{{ end}} {{ end -}} {{ else -}} {{$element.name}} [#](#{{$element.name}}) {{ end}}

{{.comment.shortText | safeHTML}} {{.comment.text | safeHTML}} {{ range .comment.tags -}} {{ if eq .tag "description"}}

{{.text | safeHTML}}

{{ end}} {{ if eq .tag "example"}} {{ highlight .text "" "" }} {{ end}} {{ end -}}
```

--------------------------------

### Linking lightgallery Core Library Globally

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-react/README.md

After building `lightgallery`, this command creates a symbolic link in the global `node_modules` directory, making the `lightgallery` package available for local development and linking to other projects.

```Shell
npm link
```

--------------------------------

### Watching for Development Changes (NPM)

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-lit/dev/README.md

This NPM script command initiates a watch process for development files, allowing changes to be reflected automatically without manual bundling. It's typically used in conjunction with a local development server to provide a live development experience.

```Shell
npm run build:watch
```

--------------------------------

### Initializing lightGallery with JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/demos/hash.md

This JavaScript code initializes lightGallery on the HTML element with the ID 'gallery-hash-demo'. It also shows commented-out examples for initializing multiple galleries by providing a unique `galleryId` for each.

```JavaScript
lightGallery(document.getElementById('gallery-hash-demo'));

// if You have multiple galleries on same page you have to set unique id for each gallery.
/*
lightGallery(document.getElementById('gallery-hash-demo-2'), {
    galleryId: 2
});
lightGallery(document.getElementById('gallery-hash-demo-3'), {
    galleryId: 3
});
*/
```

--------------------------------

### Accessing CLI Help - Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/12/README.md

Displays help information for Angular CLI commands. This provides quick access to command syntax and options directly from the terminal, aiding in command usage.

```Shell
ng help
```

--------------------------------

### Getting Help with Angular CLI Commands

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/9/README.md

This command displays comprehensive help information for Angular CLI commands. It is useful for understanding command-line options, arguments, and general usage of the Angular CLI.

```Shell
ng help
```

--------------------------------

### Installing replace-jquery CLI via npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

This command installs the `replace-jquery` CLI tool globally using npm, making it accessible from any directory in your terminal. It is the first step to begin using the tool for jQuery to JavaScript conversion.

```sh
npm install -g replace-jquery
```

--------------------------------

### Building JavaScript from TypeScript with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-lit/README.md

This command compiles the TypeScript source files into JavaScript, suitable for modern browsers. It uses the TypeScript compiler and is configured for strictness via `tsconfig.json`.

```bash
npm run build
```

--------------------------------

### Publishing LightgalleryAngular Library to npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/17/projects/lightgallery-angular/README.md

After navigating to the build output directory, this command publishes the `lightgallery-angular` library to the npm registry. This makes the package available for others to install and use, completing the deployment process.

```Shell
npm publish
```

--------------------------------

### Launching React Test Runner with Yarn

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-react/README.md

Launches the test runner for the React application in interactive watch mode using Yarn. This allows developers to run tests and see results as code changes are made.

```Shell
yarn test
```

--------------------------------

### Linting and Fixing Files with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-vue/README.md

This command lints the project files to identify and automatically fix code style and quality issues. It helps maintain consistent code formatting and catch potential errors across the codebase.

```Shell
npm run lint
```

--------------------------------

### Watching Files for Automatic Rebuilds with npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-lit/README.md

This command continuously watches for changes in project files and automatically triggers a rebuild. It's useful for development to see changes reflected instantly without manual compilation.

```bash
npm run build:watch
```

--------------------------------

### Building Angular Project - Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/16/README.md

This command compiles the Angular application into deployable artifacts. The optimized output files are stored in the `dist/` directory, ready for deployment to a web server or hosting service.

```Shell
ng build
```

--------------------------------

### Running Development Server with Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/9/README.md

This command starts a local development server for the Angular application. It enables live reloading, automatically updating the browser when source files are changed, and is typically accessible at `http://localhost:4200/`.

```Shell
ng serve
```

--------------------------------

### Starting Angular Development Server

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/13/README.md

This command launches a local development server for the Angular application. It automatically reloads the application in the browser upon changes to source files, typically accessible at `http://localhost:4200/`.

```Shell
ng serve
```

--------------------------------

### Accessing Angular CLI Help Documentation

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/17/README.md

This command displays a list of available Angular CLI commands and their descriptions directly in the terminal. It's useful for quickly looking up command syntax or understanding their purpose without leaving the command line.

```Shell
ng help
```

--------------------------------

### Generating LightGallery Method Documentation Template

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/layouts/shortcodes/methods.html

This Go template initializes variables, filters through site data to locate LightGallery method definitions, and then iterates over method signatures. For each method, it extracts and displays its name, short and long descriptions, and processes various tags like 'example' (using Hugo's `highlight` function for JavaScript), 'note', and 'see also' to render comprehensive documentation.

```Go Template
{{$interface := dict}} {{$categoryId := int 0}} {{ $categoryIds := slice }} {{$interfaceName := .Get "interface"}} {{ range .Site.Data.doc.children -}} {{ if eq .name $interfaceName}} {{$interface = .children}} {{ end }} {{ end -}}

{{ range .Site.Data.doc.children -}} {{ if eq .name "LightGallery"}} {{ range .groups -}} {{ if eq .title "Methods"}} {{ range .categories -}} {{ if eq .title "lGPublicMethods"}} {{$categoryIds = .children}} {{ end }}{{end -}} {{ end}} {{ end -}} {{ end }} {{ end }} {{$method := dict}} {{$categoryId := int 0}} {{ range .Site.Data.doc.children -}} {{ if eq .name "LightGallery"}} {{ range .children -}} {{$method := .}} {{range $categoryIds -}} {{$categoryId = .}} {{ with $method }} {{ if eq (int .id) (int $categoryId)}} {{ range .signatures -}}

**Name:** {{.name}} [#](#{{.name}})

**Description:** {{.comment.shortText}}

{{.comment.text}}

{{ range .comment.tags -}} {{ if eq .tag "description"}}

{{ .text | safeHTML }}

{{ end}} {{ if eq .tag "example"}}

**Example:**

{{ highlight .text "js" "" }}

{{ end}} {{ if eq .tag "note"}}

**Note :** {{.text | markdownify}}

{{ end}} {{ if eq .tag "see"}}

**See also:**{{.text | safeHTML}}

{{ end}} {{ end -}}

{{end -}} {{ end}} {{ end }} {{end -}} {{ end -}} {{ end }} {{ end }}
```

--------------------------------

### Running Unit Tests - Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/12/README.md

Executes the unit tests for the Angular project using Karma. This helps ensure the individual components and services function as expected, verifying code correctness.

```Shell
ng test
```

--------------------------------

### Running Development Server - Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/16/README.md

This command starts a local development server for the Angular application. It automatically reloads the application when source files are changed, making it ideal for rapid development and testing.

```Shell
ng serve
```

--------------------------------

### Publishing the Angular Library to npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/10/projects/lightgallery-angular10/README.md

After successfully building the library, these commands navigate into the compiled distribution folder and then publish the package to the npm registry. This makes the library available for public or private consumption via `npm install`.

```Shell
cd dist/lightgallery-angular10
```

```Shell
npm publish
```

--------------------------------

### Initializing lightGallery for Bootstrap Video Gallery with Plugins

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/demos/bootstrap-video-gallery.md

This JavaScript snippet initializes the lightGallery library on the HTML element with the ID 'bootstrap-video-gallery'. It configures lightGallery to use the lgThumbnail and lgVideo plugins, enabling thumbnail navigation and video playback capabilities within the gallery. This setup is crucial for making the video gallery interactive.

```javascript
window.lightGallery(document.getElementById('bootstrap-video-gallery'), {
    // Optional thumbnail plugin
    plugins: [lgThumbnail, lgVideo],
});
```

--------------------------------

### Running End-to-End Tests with Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/17/README.md

This command initiates the execution of end-to-end tests for the Angular application. It requires an external package for e2e testing capabilities, allowing comprehensive testing of user flows across the entire application.

```Shell
ng e2e
```

--------------------------------

### Generating Angular Schematics - Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/16/README.md

This command provides a versatile way to generate various Angular artifacts like directives, pipes, services, classes, guards, interfaces, enums, or modules, streamlining project setup and maintaining consistency.

```Shell
ng generate directive|pipe|service|class|guard|interface|enum|module
```

--------------------------------

### Initializing Dynamic lightGallery with JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/demos/dynamic-mode.md

This JavaScript code initializes a lightGallery instance in dynamic mode. It targets a button by its ID, sets `dynamic: true`, and populates `dynamicEl` with an array of image objects, each containing `src`, `thumb`, and `subHtml`. An event listener is attached to the button to open the gallery, optionally starting at a specific index.

```js
const $dynamicGallery = document.getElementById('dynamic-gallery-demo');
const dynamicGallery = lightGallery($dynamicGallery, {
    dynamic: true,
    dynamicEl: [
        {
            src: 'img/1.jpg',
            thumb: 'img/thumb-1.jpg',
            subHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>'
        },
        {
            src: 'img/2.jpg',
            thumb: 'img/thumb-2.jpg',
            subHtml: '<h4>Image 2 title</h4><p>Image 2 descriptions.</p>'
        },
        {
            src: 'img/3.jpg',
            thumb: 'img/thumb-3.jpg',
            subHtml: '<h4>Image 3 title</h4><p>Image 3 descriptions.</p>'
        }
    ]
});
$dynamicGallery.addEventListener('click', function () {
    // Starts with third item.(Optional).
    // This is useful if you want use dynamic mode with
    // custom thumbnails (thumbnails outside gallery),
    dynamicGallery.openGallery(2);
});
```

--------------------------------

### Importing Components and Initializing lightGallery in React

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/react-image-video-gallery.md

This snippet demonstrates how to import the `LightGallery` React component and its associated CSS/SCSS styles. It also shows how to import and register plugins like `lgThumbnail` and `lgZoom`, and how to render a basic image gallery with an `onInit` callback and custom `speed`.

```jsx
import LightGallery from 'lightgallery/react';

// import styles
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-thumbnail.css';

// If you want you can use SCSS instead of css
import 'lightgallery/scss/lightgallery.scss';
import 'lightgallery/scss/lg-zoom.scss';

// import plugins if you need
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';

function Gallery() {
    const onInit = () => {
        console.log('lightGallery has been initialized');
    };
    return (
        <div className="App">
            <LightGallery
                onInit={onInit}
                speed={500}
                plugins={[lgThumbnail, lgZoom]}
            >
                <a href="img/img1.jpg">
                    <img alt="img1" src="img/thumb1.jpg" />
                </a>
                <a href="img/img2.jpg">
                    <img alt="img2" src="img/thumb2.jpg" />
                </a>
                ...
            </LightGallery>
        </div>
    );
}
```

--------------------------------

### Getting Computed Width of Element in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

Retrieves the current computed width of the first element in the matched set. It uses `window.getComputedStyle` to get the style and parses the pixel value.

```js
width() {
  if (!this.element) {
    return 0;
  }
  const style = window.getComputedStyle(this.element, null);
  return parseFloat(style.width.replace('px', ''));
}
```

--------------------------------

### Getting or Setting Input Value in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

Gets the current value of the first element in the matched set if no `value` argument is provided. If `value` is provided, it sets the value of the current element.

```js
val(value) {
  if (!this.element) {
    return '';
  }
  if (value === undefined) {
    return this.element.value;
  }
  this.element.value = value;
}
```

--------------------------------

### Initializing ParityDeals SDK and Defining Interface in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/layouts/partials/head/head.html

This self-executing JavaScript function (IIFE) is responsible for dynamically loading the ParityDeals SDK script from a CDN and setting up the global `ParityDealsSDK` and `window.ParityDeals` objects. It includes methods for initializing the SDK and asynchronously retrieving updated prices, ensuring the SDK is ready before use.

```javascript
!function(e,t,i,n,a,c,r){e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(Array.prototype.slice.call(arguments))},c=t.createElement(i),r=t.getElementsByTagName(i)[0],c.id="parity-deals-sdk",c.async=1,c.src=a,r.parentNode.insertBefore(c,r)}(window,document,"script","ParityDealsSDK","https://cdn.paritydeals.com/sdk.js"),window.ParityDeals={init:function(e){ParityDealsSDK("init",e)},getUpdatedPrice:function(e){return new Promise((t,i)=>{!function n(){window.ParityDealsSDK&&"function"==typeof window.ParityDealsSDK.getUpdatedPrice?ParityDealsSDK.getUpdatedPrice(e).then(t).catch(i):setTimeout(()=>n(),100)}()})}};
```

--------------------------------

### Configuring PostHog with Project API Key and Host - JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/layouts/partials/head/script-header.html

This line calls the `init` method of the PostHog object, providing the project's API key (`phc_uyDcoLpTSdtPcDLf2SswgknmWiBsUfV2EzjhzYi3Ke4`) and the custom API host (`https://app.posthog.com`). This is the primary step to connect the client-side application with the PostHog analytics instance.

```JavaScript
posthog.init('phc_uyDcoLpTSdtPcDLf2SswgknmWiBsUfV2EzjhzYi3Ke4',{api_host:'https://app.posthog.com'})
```

--------------------------------

### JavaScript: `addClass` Method Usage Example

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

This example demonstrates how to use the addClass method from the custom $utils library. It selects all <li> elements within <ul> and applies two classes, 'myClass' and 'yourClass', to them.

```js
// Usage
$utils('ul li').addClass('myClass yourClass');
```

--------------------------------

### Getting or Setting Text Content in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

Gets the combined text content of the first element in the matched set if no `text` argument is provided. If `text` is provided, it sets the text content for all elements in the matched set.

```js
text(text) {
  if (text === undefined) {
    if (!this.element) {
      return '';
    }
    return this.element.textContent;
  }
  this.each((el) => {
    el.textContent = text;
  });
  return this;
}
```

--------------------------------

### Building the LightgalleryAngular Library

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/14/projects/lightgallery-angular/README.md

This command compiles the `lightgallery-angular` project, preparing it for distribution. The resulting build artifacts are stored in the `dist/` directory, ready for publishing or deployment.

```Angular CLI
ng build lightgallery-angular
```

--------------------------------

### Getting and Setting HTML Content in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

This method allows getting or setting the HTML contents of the matched elements. If no `html` argument is provided, it returns the `innerHTML` of the first element. If `html` is provided, it sets the `innerHTML` for all matched elements, effectively replacing their content.

```JavaScript
html(html) {
  if (html === undefined) {
    if (!this.element) {
      return '';
    }
    return this.element.innerHTML;
  }
  this.each((el) => {
    el.innerHTML = html;
  });
  return this;
}
```

--------------------------------

### Getting Computed Height of Element in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

This method retrieves the current computed height for the first element in the set of matched elements. It uses `window.getComputedStyle` to get the element's style and parses the `height` property, removing 'px' and converting to a float for a numerical value.

```JavaScript
height() {
  if (!this.element) {
    return 0;
  }
  const style = window.getComputedStyle(this.element, null);
  return parseFloat(style.height.replace('px', ''));
}
```

--------------------------------

### Complete Infinite Scrolling lightGallery Example

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/demos/infinite-scrolling.md

This comprehensive JavaScript example integrates lightGallery initialization, new thumbnail definition, and scroll detection. When the user scrolls to the bottom, it appends new images to the gallery and then calls `infiniteScrollingGallery.refresh()` to update the lightGallery instance with the newly added content.

```js
const $infiniteScrollGallery = document.getElementById(
    'infinite-scroll-gallery',
);
let infiniteScrollingGallery = lightGallery($infiniteScrollGallery, {
    speed: 500,
});

const thumbnails = `
    <a href="img/img3.jpg">
        <img src="img/thumb3.jpg" />
    </a>
    <a href="img/img4.jpg">
        <img src="img/thumb4.jpg" />
    </a>
    `;

const $window = $(window);
let shouldReInit = true;
$window.scroll(function () {
    if ($window.scrollTop() >= $(document).height() - $window.height() - 10) {
        $('#infinite-scroll-gallery').append(images);
        infiniteScrollingGallery.refresh();
    }
});
```

--------------------------------

### Building LightgalleryAngular Project

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/12/projects/lightgallery-angular/README.md

This command compiles the 'lightgallery-angular' library. The compiled artifacts will be placed in the 'dist/' directory, ready for distribution or publishing.

```bash
ng build lightgallery-angular
```

--------------------------------

### Setting and Getting CSS Properties in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

This utility function allows setting or getting computed style properties for elements. If a `value` is provided, it sets the CSS property for all matched elements. If `css` is an object, it sets multiple properties. Otherwise, it retrieves the computed style for a single property from the first matched element.

```JavaScript
css(css, value) {
  if (value !== undefined) {
    this.each((el) => {
      Utils.setCss(el, css, value);
    });
    return this;
  }
  if (typeof css === 'object') {
    for (const property in css) {
      if (Object.prototype.hasOwnProperty.call(css, property)) {
        this.each((el) => {
          Utils.setCss(el, property, css[property]);
        });
      }
    }
    return this;
  }
  const cssProp = Utils.camelCase(css);
  const property = Utils.styleSupport(cssProp);
  return getComputedStyle(this.element)[property];
}
```

--------------------------------

### Initializing lightGallery for srcset/sizes - JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/demos/responsive.md

This JavaScript snippet initializes the lightGallery instance on the HTML element with the ID 'lg-srcset-demo'. This enables the gallery functionality, leveraging the native `srcset` and `sizes` attributes defined in the HTML for responsive image display.

```js
lightGallery(document.getElementById('lg-srcset-demo'));
```

--------------------------------

### Building the Angular Library Project

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/10/projects/lightgallery-angular10/README.md

This command compiles the `lightgallery-angular10` project. The resulting build artifacts, which are ready for deployment or publishing, will be stored in the `dist/` directory.

```Shell
ng build lightgallery-angular10
```

--------------------------------

### Getting Sibling Elements in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

Retrieves all sibling elements of the current element, excluding itself. It filters the parent's children to return only the siblings, wrapped in a new `Utils` instance.

```js
siblings() {
  if (!this.element) {
    return this;
  }
  const elements = Array.prototype.filter.call(
    this.element.parentNode.children,
    (child) => child !== this.element
  );
  return new Utils(elements);
}
```

--------------------------------

### Running Angular End-to-End Tests

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/13/README.md

This command is used to execute end-to-end (e2e) tests for the Angular application. It requires an installed package that implements e2e testing capabilities to function.

```Shell
ng e2e
```

--------------------------------

### Displaying Angular CLI Help

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/15/README.md

This command displays general help information and a list of available commands for the Angular CLI. It's useful for discovering command options and usage details.

```CLI
ng help
```

--------------------------------

### Building LightgalleryAngular Project

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/15/projects/lightgallery-angular/README.md

This command compiles the `lightgallery-angular` project using the Angular CLI. The compiled artifacts will be stored in the `dist/` directory, ready for deployment or publishing.

```Shell
ng build lightgallery-angular
```

--------------------------------

### Generating Component - Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/12/README.md

Generates a new Angular component with the specified name. This command is part of the code scaffolding capabilities of Angular CLI, streamlining development.

```Shell
ng generate component component-name
```

--------------------------------

### Initializing lightGallery with JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/README.md

This JavaScript code initializes the lightGallery instance on the HTML element with the ID 'lightgallery'. It configures the gallery to use `lgZoom` and `lgThumbnail` plugins, sets the animation speed to 500ms, and requires a `licenseKey` for commercial use. Additional settings can be passed as needed.

```JavaScript
<script type="text/javascript">
    lightGallery(document.getElementById('lightgallery'), {
        plugins: [lgZoom, lgThumbnail],
        speed: 500,
        licenseKey: 'your_license_key'
        ... other settings
    });
</script>
```

--------------------------------

### Initializing LightGallery with Zoom and Thumbnail Plugins (JavaScript)

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/demos/bootstrap-image-gallery.md

This snippet initializes the LightGallery library on a specified HTML container. It targets elements with the class `.lg-item` within the container and enables the `lgZoom` and `lgThumbnail` plugins, providing image zoom and thumbnail navigation features.

```JavaScript
const container = document.querySelector('#bootstrap-image-gallery');
window.lightGallery(container, {
    selector: '.lg-item',
    plugins: [
        lgZoom,
        lgThumbnail
    ],
});
```

--------------------------------

### Running Angular End-to-End Tests

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/14/README.md

This command runs end-to-end tests for the Angular application. A package implementing E2E testing capabilities must be installed first to use this command.

```Shell
ng e2e
```

--------------------------------

### Building Angular Library with CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/9/projects/lightgallery-angular9/README.md

This command compiles the `lightgallery-angular9` project into distributable artifacts. The output files are stored in the `dist/` directory, ready for packaging or deployment.

```Shell
ng build lightgallery-angular9
```

--------------------------------

### Getting Previous Sibling Element in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

Retrieves the immediately preceding sibling element of the current element. It returns a new `Utils` instance wrapping the previous element, or the current instance if no element is present.

```js
prev() {
  if (!this.element) {
    return this;
  }
  return new Utils(this.element.previousElementSibling);
}
```

--------------------------------

### Publishing LightgalleryAngular to npm

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/14/projects/lightgallery-angular/README.md

After building the library, these commands navigate into the compiled output directory and then publish the package to the npm registry. This makes the `lightgallery-angular` library available for public consumption.

```Shell
cd dist/lightgallery-angular
```

```Shell
npm publish
```

--------------------------------

### Configuring ParityDeals SDK Initialization in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/layouts/partials/head/head.html

This snippet calls the `init` method of the `ParityDeals` object, configuring the SDK's behavior. It sets `convertToLocal` to `true` for local currency conversion, `showDecimal` to `false` to hide decimal places, and specifies `.price-container` as the CSS selector for the price bar's display container.

```javascript
ParityDeals.init({ convertToLocal: true, showDecimal: false, bar: { container: '.price-container' } });
```

--------------------------------

### Running End-to-End Tests - Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/12/README.md

Executes end-to-end tests for the Angular project via a platform of choice. This command requires a pre-installed package that implements E2E testing capabilities.

```Shell
ng e2e
```

--------------------------------

### Running End-to-End Tests with Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/15/README.md

This command executes end-to-end (e2e) tests for the Angular application. A package implementing e2e testing capabilities must be installed and configured prior to using this command.

```CLI
ng e2e
```

--------------------------------

### Building LightgalleryAngular Library

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/13/projects/lightgallery-angular/README.md

This command compiles and builds the `lightgallery-angular` library. The build artifacts are generated and stored in the `dist/` directory, ready for publishing or local use.

```Shell
ng build lightgallery-angular
```

--------------------------------

### Building Angular Project

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/13/README.md

This command compiles the Angular application and bundles it into deployable artifacts. The resulting build files are stored in the `dist/` directory, ready for deployment.

```Shell
ng build
```

--------------------------------

### Initializing Slick Carousel and lightGallery in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/demos/Slick-carousel-demo.md

This JavaScript code initializes the Slick carousel on the element with ID `slick-carousel-gallery-demo`. It then attaches an `init` event listener to the carousel, which, once the carousel is initialized, sets up lightGallery on the `.slick-track` element. lightGallery is configured with `lgZoom` and `lgThumbnail` plugins for enhanced image viewing and navigation, and `preload` is set to 4 for faster image loading.

```js
let slickEl = document.getElementById('slick-carousel-gallery-demo');
if (slickEl) {
    var $slickDemo = $('#slick-carousel-gallery-demo');
    $slickDemo.on('init', function (event, slick, direction) {
        const container = document.querySelector('.slick-track');
        window.lightGallery(container, {
            plugins: [
                lgZoom,
                lgThumbnail,
            ],
            preload: 4,
        });
    });
    $slickDemo.slick({,
        slidesToShow: 3,
    });
}
```

--------------------------------

### Getting All Previous Siblings in JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

Retrieves all preceding sibling elements of the current element, optionally filtered by a provided function. It iterates through `previousSibling` and ignores text nodes, returning a new `Utils` instance with the collected siblings.

```js
prevAll(filter) {
  if (!this.element) {
    return this;
  }
  const sibs = [];
  while ((this.element = this.element.previousSibling)) {
    if (this.element.nodeType === 3) {
      continue; // ignore text nodes
    }
    if (!filter || filter(this.element)) sibs.push(this.element);
  }
  return new Utils(sibs);
}
```

--------------------------------

### Initializing lightGallery for Responsive Images - JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/demos/responsive.md

This JavaScript snippet initializes the lightGallery instance on the HTML element with the ID 'responsive-images-demo'. This enables the gallery functionality, including the responsive image handling defined in the HTML.

```js
lightGallery(document.getElementById('responsive-images-demo'));
```

--------------------------------

### Get Parent Element (parent) - JavaScript

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

This method retrieves the direct parent element of the current element. It directly accesses the `parentElement` property of the DOM element. It returns a new Utils instance wrapping the found parent.

```javascript
parent() {
  return new Utils(this.element.parentElement);
}
```

--------------------------------

### Accessing Angular CLI Help

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/11/projects/lightgallery-angular11/README.md

This command displays the general help documentation for the Angular CLI, providing a list of available commands and their usage. It's useful for discovering new commands or understanding existing ones.

```Shell
ng help
```

--------------------------------

### Adding Transition to LightGallery Backdrop (SCSS)

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/demos/events.md

This optional SCSS snippet applies a smooth transition effect to the lightGallery backdrop's opacity and background color. This enhances the visual experience when the background color changes, as demonstrated in the JavaScript example.

```scss
.lg-events-demo-outer {
    .lg-backdrop {
        transition: opacity 333ms ease-in 0s, background-color 333ms ease-in 0s;
    }
}
```

--------------------------------

### Defining LightGallery HTML Structure

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/demos/methods.md

This HTML snippet defines the basic structure for a lightGallery instance. It uses a `div` with an ID `gallery-methods-demo` to contain `a` tags, each linking to a full-size image and containing a thumbnail `img` tag. This structure is essential for lightGallery to initialize and display images.

```html
<div id="gallery-methods-demo">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    ...
</div>
```

--------------------------------

### Running Unit Tests for Angular Library

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/9/projects/lightgallery-angular9/README.md

This command executes the unit tests defined for the `lightgallery-angular9` project. It leverages Karma as the test runner to provide comprehensive test coverage.

```Shell
ng test lightgallery-angular9
```

--------------------------------

### Starting Angular Development Server

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/14/README.md

This command launches a local development server for the Angular application, making it accessible at `http://localhost:4200/`. The server automatically reloads the application upon source file changes.

```Shell
ng serve
```

--------------------------------

### Running Development Server with Angular CLI

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/11/README.md

Starts a local development server for the Angular application, accessible via `http://localhost:4200/`. The server automatically reloads if any source files are changed, facilitating rapid development.

```shell
ng serve
```

--------------------------------

### Initializing lightGallery with Custom Settings (JavaScript)

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/settings.md

This snippet demonstrates how to initialize lightGallery on an HTML element, `gallery-container`, and pass custom settings. It sets the animation `speed` to 500 milliseconds and the transition `mode` to 'lg-fade'. This allows modification of default behaviors for the gallery.

```javascript
lightGallery(document.getElementById('gallery-container'), {
    speed: 500,
    mode: 'lg-fade',
    ...Other settings
});
```

--------------------------------

### CSS: Highlight Class Styling

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/jquery-to-js-converter/_index.md

This CSS snippet defines the 'highlight' class, which applies a red background color and white text color to elements. This class is used in the JavaScript examples to visually highlight selected DOM elements.

```css
.highlight {
  background-color: red;
  color: #fff;
}
```

--------------------------------

### Configuring New lightGallery Plugin in Rollup

Source: https://github.com/sachinchoolur/lightgallery/blob/master/site/content/docs/creating-plugins.md

This JSON snippet demonstrates the required configuration format for adding a new lightGallery plugin to the `plugins-config-rollup.json` file. It specifies the plugin's name, its folder path within the `src/plugins` directory, and the desired output file name, enabling lightGallery's build system to generate the necessary rollup configuration.

```JavaScript
{
    "name": "autoplay",
    "folder": "plugins/autoplay/",
    "fileName": "lg-autoplay"
},
```

--------------------------------

### Accessing Angular CLI Help

Source: https://github.com/sachinchoolur/lightgallery/blob/master/lightgallery-angular/12/projects/lightgallery-angular/README.md

This command displays general help information for the Angular CLI, providing a list of available commands and their usage. It's useful for quick reference.

```bash
ng help
```