Skip to main content

Installation

You can install Fancyapps UI with NPM and modern build tools, or get started quickly with just static hosting or a CDN. For most users, installing from NPM is the best choice. Whichever you choose, be consistent and import all files from the same version of the library.

NPM​

You'll need to have Node.js installed so that you can use NPM. You'll also need to know how to access the command line on your machine.

@fancyapps/ui is the primary Fancyapps UI package on NPM and home to all components. Install it with your favourite package manager:

npm install @fancyapps/ui
// or
yarn add  @fancyapps/ui

After installation, you'll be able to import components in your application. Example:

import { Fancybox } from "@fancyapps/ui";
// or
import { Fancybox } from "@fancyapps/ui/src/Fancybox/Fancybox.js";
tip

You can make Fancybox global - window.Fancybox = Fancybox; - and it will be available anywhere on the page, it will also be easier to debug.

Remember to include the corresponding CSS file, example:

import "fancyapps/ui/dist/fancybox.css";

CDN​

You can also use standalone UMD build by downloading the files or using directly from the CDN on your page:

For the Panzoom component:

Usage example (demo):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css"
    />
  </head>
  <body>
    <!-- Content -->

    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js"></script>
    <script>
      //  JavaScript will go here
    </script>
  </body>
</html>

If you are using native ES Modules, there is also an ES Modules compatible build:

<script type="module">
  import { Fancybox } from "https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.esm.js";
</script>

Local development​

Grab all the source files and build+develop locally

git clone [email protected]:fancyapps/ui.git
cd ui
rm -rf .git && git init
npm install
npm run build:js && npm run build:css

To build CSS automatically everytime you change the SCSS files, use NPM watch:css task. You can run tests using the test task.