Fancyapps
On this page

Integration

JavaScript frameworks

Fancyapps UI components are written using plain JavaScript without third-party libraries and will not negatively impact server-side rendering.

There are currently no official wrappers for JavaScript frameworks, but creating one is fairly easy. See examples of how they all follow the same logic.

If you're having trouble with TypeScript types, try this snippet:

js
import type { Fancybox as FancyboxType } from "@fancyapps/ui/types";
import * as Fancyapps from "@fancyapps/ui";
const Fancybox: typeof FancyboxType = Fancyapps.Fancybox;

React

An example of a Fancybox React wrapper.

js
import React, { useRef, useEffect } from "react";

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

function Fancybox(props) {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;

    const delegate = props.delegate || "[data-fancybox]";
    const options = props.options || {};

    NativeFancybox.bind(container, delegate, options);

    return () => {
      NativeFancybox.unbind(container);
      NativeFancybox.close();
    };
  });

  return <div ref={containerRef}>{props.children}</div>;
}

export default Fancybox;

Usage example:

jsx
<Fancybox
  options={{
    Carousel: {
      infinite: false,
    },
  }}
>
  <a data-fancybox="gallery" href="https://lipsum.app/id/60/1600x1200">
    <img src="https://lipsum.app/id/60/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/61/1600x1200">
    <img src="https://lipsum.app/id/61/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/62/1600x1200">
    <img src="https://lipsum.app/id/62/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/63/1600x1200">
    <img src="https://lipsum.app/id/63/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/64/1600x1200">
    <img src="https://lipsum.app/id/64/200x150" width="200" height="150" />
  </a>
</Fancybox>

Stackblitz Example
CodeSandbox Example (TypeScript)

Vue

An example of a Fancybox Vue wrapper.

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

export default {
  props: {
    options: Object,
  },
  mounted() {
    Fancybox.bind(this.$refs.container, '[data-fancybox]', {
      ...(this.options || {}),
    });
  },
  updated() {
    Fancybox.unbind(this.$refs.container);
    Fancybox.close();

    Fancybox.bind(this.$refs.container, '[data-fancybox]', {
      ...(this.options || {}),
    });
  },
  unmounted() {
    Fancybox.destroy();
  },
};
</script>

<template>
  <div ref="container">
    <slot></slot>
  </div>
</template>

<style></style>

Usage example:

js
<Fancybox
  :options="{
    Carousel: {
      infinite: false,
    },
  }"
>
  <a data-fancybox="gallery" href="https://lipsum.app/id/60/1600x1200">
    <img src="https://lipsum.app/id/60/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/61/1600x1200">
    <img src="https://lipsum.app/id/61/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/62/1600x1200">
    <img src="https://lipsum.app/id/62/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/63/1600x1200">
    <img src="https://lipsum.app/id/63/200x150" width="200" height="150" />
  </a>
  <a data-fancybox="gallery" href="https://lipsum.app/id/64/1600x1200">
    <img src="https://lipsum.app/id/64/200x150" width="200" height="150" />
  </a>
</Fancybox>

Stackblitz Example

Angular

An example of Fancybox integration in an Angular component.

js
import { Component, ElementRef } from '@angular/core';
import { Fancybox } from '@fancyapps/ui';

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.css'],
})
export class GalleryComponent {
  constructor(private elRef: ElementRef) {}

  ngOnInit() {
    Fancybox.bind(this.elRef.nativeElement, '[data-fancybox]', {
      // Custom options
    });
  }

  ngOnDestroy() {
    Fancybox.unbind(this.elRef.nativeElement);
    Fancybox.close();
  }
}

Stackblitz Example

WordPress

Although there is currently no official plugin available, it is very easy to add Fancybox to any website without a plugin. Just include two required files and add the following JS snippet anywhere on the page:

js
Fancybox.bind(
  'a[href*=".jpg"],a[href*=".jpeg"],a[href*=".png"],a[href*=".gif"]',
  {
    groupAll: true,
    // Your custom options
  }
);