Integration
JavaScript frameworks
Fancyapps UI components are written using plain JavaScript without third-party libraries. There are currently no official wrappers for JavaScript frameworks, but creating one is fairly easy. What's great is that Fancyapps UI components will not negatively impact server-side rendering.
React
An example of a Fancybox React wrapper.
js
import React, { useRef, useEffect } from "react";
import { Fancybox as NativeFancybox } from "@fancyapps/ui/dist/fancybox/fancybox.esm.js";
import "@fancyapps/ui/dist/fancybox/fancybox.css";
function Fancybox(props) {
const container = useRef(null);
useEffect(() => {
const delegate = props.delegate || "[data-fancybox]";
const options = props.options || {};
NativeFancybox.bind(container.current, delegate, options);
return () => {
NativeFancybox.unbind(container.current);
NativeFancybox.close();
};
});
return <div ref={container}>{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>
Vue
An example of a Fancybox Vue wrapper.
js
<script>
import { Fancybox } from '@fancyapps/ui/dist/fancybox/fancybox.esm.js';
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>