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:
- https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js
- https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css
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.