UNPKG

5.05 kBMarkdownView Raw
1# Fancyapps UI
2
3Collection of task-oriented components that will make you more productive. Packed full of features that you and your clients will love.
4
5Full docs with examples: https://fancyapps.com/docs/ui/quick-start/.
6
7## Installation
8
9### NPM
10
11Use either `npm` or `yarn` as follows:
12
13```bash
14npm install @fancyapps/ui
15// or
16yarn add @fancyapps/ui
17```
18
19Import one or more components:
20
21```jsx
22import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui";
23```
24
25Import the appropriate CSS file, example:
26
27```jsx
28import "@fancyapps/ui/dist/fancybox.css";
29```
30
31### CDN
32
33A pre-bundled scripts that contain components are available on [CDN](https://www.jsdelivr.com/package/npm/@fancyapps/ui?path=dist).
34
35> **_NOTE:_** Because Fancybox is build on top of both Carousel and Panzoom components, you only have to include `fancybox.umd.js` and all 3 components will be available through the `window` object.
36
37```html
38<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
39```
40
41Or use ES6 import:
42
43```html
44<script type="module">
45 import { Fancybox } from "https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.esm.js";
46</script>
47```
48
49Remember to include the appropriate CSS file, example:
50
51```html
52<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
53```
54
55## Usage
56
57### Fancybox
58
59There are two ways to use Fancybox.
60
61#### Declarative
62
63Add a `data-fancybox` attribute to any element to enable Fancybox. Galleries are created by adding the same attribute `data-fancybox` value to multiple elements. Use `data-src` or `href` attribute to specify the source of the content. Add a `data-caption` attribute if you want to show a caption under the content.
64
65```jsx
66<a href="https://lipsum.app/id/1/1024x768" data-fancybox="gallery" data-caption="Optional caption">
67 Image
68</a>
69```
70
71```jsx
72<a href="http://media.w3.org/2010/05/sintel/trailer.mp4" data-fancybox>
73 Video
74</a>
75```
76
77```jsx
78<a
79 href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d10500.902039411158!2d2.2913514905137315!3d48.85391001859112!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1slv!2slv!4v1622011463926!5m2!1slv!2slv"
80 data-fancybox
81 data-type="iframe"
82 data-preload="false"
83 data-width="640"
84 data-height="480"
85>
86 Iframe
87</a>
88```
89
90```jsx
91<button data-fancybox data-src="#dialog-content">
92 HTML element
93</button>
94
95<div id="dialog-content" style="display:none;">
96 <h2>Hello, world!</h2>
97 <p>
98 <input type="text" value="See if changes remain after closing the dialog" />
99 </p>
100</div>
101```
102
103Customize options:
104
105```js
106Fancybox.bind("[data-fancybox]", {
107 // Your options go here
108});
109```
110
111#### Programmatic
112
113```js
114// Image gallery
115var gallery = [
116 {
117 src: "https://lipsum.app/id/2/800x600",
118 thumb: "https://lipsum.app/id/2/80x80",
119 caption: "First image",
120 },
121 {
122 src: "https://lipsum.app/id/3/800x600",
123 thumb: "https://lipsum.app/id/3/80x80",
124 caption: "Second image",
125 },
126 {
127 src: "https://lipsum.app/id/4/800x600",
128 thumb: "https://lipsum.app/id/4/80x80",
129 caption: "Third image",
130 },
131];
132
133Fancybox.show(gallery, {
134 // Your options go here
135});
136
137// HTML element
138Fancybox.show([{ src: "#dialog-content", type: "inline" }]);
139
140// A copy of HTML element
141Fancybox.show([{ src: "#dialog-content", type: "clone" }]);
142
143// Any HTML content
144Fancybox.show([{ src: "<p>Lorem ipsum dolor sit amet.</p>", type: "html" }]);
145```
146
147### Carousel
148
149Add HTML markup
150
151```html
152<div id="myCarousel" class="carousel">
153 <div class="carousel__slide">1</div>
154 <div class="carousel__slide">2</div>
155 <div class="carousel__slide">3</div>
156</div>
157```
158
159Initialise Carousel
160
161```js
162const myCarousel = new Carousel(document.querySelector("#myCarousel"), {
163 // Your options go here
164});
165```
166
167Optionally, use CSS to customize container, navigation elements and slides
168
169```css
170.carousel {
171 color: #170724;
172
173 --carousel-button-bg: #fff;
174 --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
175
176 --carousel-button-svg-width: 20px;
177 --carousel-button-svg-height: 20px;
178 --carousel-button-svg-stroke-width: 2.5;
179}
180
181.carousel__slide {
182 display: flex;
183 align-items: center;
184 justify-content: center;
185
186 width: 80%;
187 height: 160px;
188 margin-right: 6px;
189
190 background-color: #eee;
191 border-radius: 6px;
192}
193```
194
195### Panzoom
196
197Add HTML markup
198
199```html
200<div id="myPanzoom" class="panzoom">
201 <img class="panzoom__content" src="https://lipsum.app/id/3/2000x1500" alt="" />
202</div>
203```
204
205Initialise Panzoom
206
207```js
208const myPanzoom = new Panzoom(document.querySelector("#myPanzoom"), {
209 // Your options go here
210});
211```
212
213Optionally, use CSS to customize container
214
215```css
216.panzoom {
217 width: 400px;
218 height: 300px;
219}
220```
221
222## License
223
224This is commercial software. See [LICENSE.md](LICENSE.md) for more info.