Get lightbox 2 working in Angular 2?

Question

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.

Answer 1

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>

Answer 2

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"
]