Get lightbox 2 working in Angular 2? [closed]

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>