Fancyapps

Installation ​

Fancybox is available to include in your project via NPM, CDN, or direct download. However, it is highly recommended to use NPM to manage your project's dependencies.

Package manager ​

Install Fancybox via your preferred package manager. This will install the latest version using NPM:

bash
npm install --save @fancyapps/ui

Once installed, you can import the necessary files:

js
import { Fancybox } from "@fancyapps/ui/dist/fancybox/";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

CDN ​

You can quickly use Fancybox from a content delivery network.

Require the following minified stylesheet inside the head tag:

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

And include JavaScript file before the end of the body element:

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

Manually ​

If you want to download the files and manually upload them to your web server, you can use the CDN links above to download them. The latest code is also always available on GitHub (distribution files will be found in the dist folder).

html
<script src="fancybox.umd.js"></script>
<link rel="stylesheet" href="fancybox.css" />

Note that the downside to this approach is that you'll have to do this every time you want to update your files to the latest version.

Therefore the recommended way is to use package managers like NPM or use CDN links which will automatically use the latest patch version without affecting your code.