Lightgallery plugin not working with angular 9

nileshzala005 commented 4 years ago

I am using light gallery with angular 9 with following light gallery and plugin version

"lg-autoplay": "^1.0.4",
    "lg-fullscreen": "^1.1.0",
    "lg-hash": "^1.0.4",
    "lg-pager": "^1.0.2",
    "lg-share": "^1.1.0",
    "lg-thumbnail": "^1.1.0",
    "lg-video": "^1.2.2",
    "lg-zoom": "^1.1.0",
    "lightgallery.js": "^1.1.3",

Angualr.json
  "styles": [
              "src/styles.css",
              "node_modules/lightgallery.js/dist/css/lightgallery.css"
            ],
            "scripts": [
              "node_modules/lightgallery.js/dist/js/lightgallery.min.js",
              "node_modules/lg-autoplay/dist/lg-autoplay.min.js",
              "node_modules/lg-fullscreen/dist/lg-fullscreen.min.js",
              "node_modules/lg-hash/dist/lg-hash.min.js",
              "node_modules/lg-share/dist/lg-share.min.js",
              "node_modules/lg-video/dist/lg-video.min.js",
              "node_modules/lg-thumbnail/dist/lg-thumbnail.min.js",
              "node_modules/lg-zoom/dist/lg-zoom.min.js",
              "node_modules/lg-pager/dist/lg-pager.min.js"
            ]
          },

Dynamic loading method

showSlideShow() {
    this.lg = lightGallery(document.getElementById('lightgallery'), {
      dynamic: true,
      download: true,
      fullScreen: true,
      autoplay: false,
      dynamicEl: [{
        src: "https://dummyimage.com/16:9x1080/"
      }, {
        src: "https://dummyimage.com/16:9x800/"
      }, {
        src: "https://dummyimage.com/16:9x1080/"
      }, {
        href: "https://www.youtube.com/watch?v=meBbDqAXago"
      }]
    });
  }

Destroy method

destroy() {
    this.lg.destroy(true);
  }

here its only load images .NOT showing any plugin options like zoom , full-screen, Sharing ,auto play . Not able to destroy lightGallery object . Also not able to play youtube video with dynamic loading Please clone this repo.

delaneyestrada commented 4 years ago

I have the same issue when dynamically loading lightgallery. Only tried the share plugin, but it does seem to be an issue with dynamically loaded lightgalleries loading any plugins at all.

sachinchoolur commented 4 years ago

Hey @nileshzala005 and @dillonestrada, You need to import lightGallery plugins in the component file.

import { Component } from '@angular/core';
import 'lg-zoom.js';
import 'lg-share.js';
import 'lg-video.js';

I've created a repository with the demo - https://github.com/sachinchoolur/lightgallery.js-anguar-demo Please follow the below steps and let me know if you face any issues

Step 1

Install lightgallery.js package via npm

npm install lightgallery.js

Install required plugin (optional)

npm install lg-zoom.js lg-share.js

Step 2

Add lightgallery to the runtime global scope

1) Add lightgallery.js path to the scripts field in the angular.json file

Note: Do not include any lightGallery plugins in the script tag.

You need to import them in the component file - Described in step 4

"scripts": [
  "node_modules/lightgallery.js/dist/js/lightgallery.js",
]

2) Add lightgallery.css path to the styles field in the angular.json file

"styles": [
  "node_modules/lightgallery.js/dist/css/lightgallery.css",
],

Step 3

Define typings for lightgallery.js

In src/typings.d.ts add the following line

declare var lightGallery: any;

Step 4

import all the required plugins in the component file

import { Component } from '@angular/core';
import 'lg-zoom.js';
import 'lg-share.js';
import 'lg-video.js';

Step 5

Invoke lightgallery

ngOnInit() {
  lightGallery(document.getElementById('lightgallery'));
}

Take a look at this commit for referance

Also, there was an issue with the videos in the dynamic mode. Please use the latest version of lg-video.js plugin - https://github.com/sachinchoolur/lg-video.js

kapilSoni101 commented 4 years ago

@sachinchoolur : I tried ur code but i got below error in the console:

core.js:6014 ERROR TypeError: Cannot read property 'match' of null at Plugin.isVideo (lightgallery.js:652)

sachinchoolur commented 4 years ago

This should be some issue with your HTML markup. Take a look at the HTML markup docs - https://sachinchoolur.github.io/lightgallery.js/demos/html-markup.html

Please post your HTML markup in case if you are unable to fix the issue even after using the selector property

sachinchoolur / lightgallery.js