4

I can't get lightbox 2 to work in Angular 2. I set it up as described in the documentation, but I always get the error "Uncaught TypeError: this.$lightbox.css(...).fadeIn is not a function". I can't find any example code getting this working.

Eddie
  • 1,228
  • 3
  • 17
  • 31

3 Answers3

10

If you are using Angular CLI, do it like you import any other external/jQuery libs.

So:

  1. npm install --save lightbox2

  2. add styles to angular-cli.json:

    "styles": [ "styles.css", "../node_modules/lightbox2/dist/css/lightbox.min.css" ],

  3. add script to angular-cli.json

    "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/lightbox2/dist/js/lightbox.min.js" ],

  4. add the images to your template, e.g (using with semantic ui)

    <a href="/assets/img/flag.png" data-lightbox="image" data-title="My caption"> <img class="ui bordered small image" src="/assets/img/flag.png"> </a>

hoodieman
  • 807
  • 10
  • 15
  • New to Angular, was banging to find angular-cli.json. it is ACTUALLY .angular-cli.json . That means there is a DOT at the beginning. – SK. Apr 10 '18 at 19:50
  • 1
    Thank you, SKumar. This is due to the fact that Angular CLI has renamed their configuration file since the posting of this answer. I will leave it as is. – hoodieman Apr 12 '18 at 12:35
  • Ahh... since I am very new in Angular. I didn't know it was like that earlier... It is very difficult to understand when they(Angular) change things like this in every new version. Thanks for letting me know! – SK. Apr 12 '18 at 14:41
0

If you do not want to use jQuery seperately,

If you do not have jQuery support in your project and you do not want to use jQuery seperately, you can link to following Lightbox js file, which comes with inbuild jQuery support,

"scripts": [    
    "../node_modules/lightbox2/dist/js/lightbox-plus-jquery.js"
]
Anjana Silva
  • 8,353
  • 4
  • 51
  • 54
0

if u want to used lightbox2 then first install jquery ..

cmd:npm install jquery --save

after this install ,

cmd:npm install lightbox2 --save

then add style file in angular.json file

"styles": [

          "./node_modules/jquery/dist/jquery.min.js", // jquery always used before the lightbox2
          "./node_modules/lightbox2/dist/js/lightbox-plus-jquery.min.js",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/lightbox2/dist/css/lightbox.min.css"

        ],
Soft Dev Ahmad yar khan
  • 454
  • 5
  • 12