angularlightbox2

Get lightbox 2 working in Angular 2?

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.

Solution

  • 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>