Lightbox Won\'t Close (MDBPRO Angular)

Topic: Lightbox Won\'t Close (MDBPRO Angular)

FredDupe asked 6 years ago

I am getting an error everytime I try to close the lightbox Modal. Here is the console error:

ImageModalComponent.html:1 ERROR ReferenceError: screenfull is not defined
    at ImageModalComponent.push../node_modules/ng-uikit-pro-standard/esm5/ng-uikit-pro-standard.es5.js.ImageModalComponent.fullScreen (ng-uikit-pro-standard.es5.js:5678)
    at Object.eval [as handleEvent] (ImageModalComponent.html:1)
    at handleEvent (core.js:10259)
    at callWithDebugContext (core.js:11352)
    at Object.debugHandleEvent [as handleEvent] (core.js:11055)
    at dispatchEvent (core.js:7718)
    at core.js:8162
    at HTMLAnchorElement.<anonymous> (platform-browser.js:995)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3816)


my template
<mdb-image-modal #lightbox [modalImages]="images" type="margin"></mdb-image-modal>

my .Ts file
  images = [
    { img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg", description: "Image 1" },
    { img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg", description: "Image 2" },
    { img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg", description: "Image 3" },
    { img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg", description: "Image 4" },
    { img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg", description: "Image 5" },
    { img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg", description: "Image 6" },
    { img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg", description: "Image 7" },
    { img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg", description: "Image 8" },
    { img: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg", thumb: "https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg", description: "Image 9" }
  ]

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

1 0 Best answer

Dear FredDupe, You need to install screenfull with npm: npm install screenfull@3.3.0 --save and add this line to scripts array in angular.json file: "node_modules/screenfull/dist/screenfull.js" Regards, Arek

bdvsadmin pro premium commented 5 years ago

Can this be added to the docs? Even on the API tab here - https://mdbootstrap.com/docs/angular/advanced/gallery/ - it mentions installing the library but no mention of adding it to angular.json?

Arkadiusz Idzikowski staff commented 5 years ago

We will update the docs page.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Free
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.0
Device: Macbook Pro
Browser: Chrome
OS: IOS
Provided sample code: No
Provided link: No

FredDupe

5Support score
1Questions 0Answers

0Snippets likes 0Snippets