1 | # Fancyapps UI
|
2 |
|
3 | Collection of task-oriented components that will make you more productive. Packed full of features that you and your clients will love.
|
4 |
|
5 | Full docs with examples: https://fancyapps.com/docs/ui/quick-start/.
|
6 |
|
7 | ## Installation
|
8 |
|
9 | ### NPM
|
10 |
|
11 | Use either `npm` or `yarn` as follows:
|
12 |
|
13 | ```bash
|
14 | npm install @fancyapps/ui
|
15 | // or
|
16 | yarn add @fancyapps/ui
|
17 | ```
|
18 |
|
19 | Import one or more components:
|
20 |
|
21 | ```jsx
|
22 | import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui";
|
23 | ```
|
24 |
|
25 | Import the appropriate CSS file, example:
|
26 |
|
27 | ```jsx
|
28 | import "@fancyapps/ui/dist/fancybox.css";
|
29 | ```
|
30 |
|
31 | ### CDN
|
32 |
|
33 | A 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 |
|
41 | Or 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 |
|
49 | Remember 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 |
|
59 | There are two ways to use Fancybox.
|
60 |
|
61 | #### Declarative
|
62 |
|
63 | Add 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 |
|
103 | Customize options:
|
104 |
|
105 | ```js
|
106 | Fancybox.bind("[data-fancybox]", {
|
107 | // Your options go here
|
108 | });
|
109 | ```
|
110 |
|
111 | #### Programmatic
|
112 |
|
113 | ```js
|
114 | // Image gallery
|
115 | var 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 |
|
133 | Fancybox.show(gallery, {
|
134 | // Your options go here
|
135 | });
|
136 |
|
137 | // HTML element
|
138 | Fancybox.show([{ src: "#dialog-content", type: "inline" }]);
|
139 |
|
140 | // A copy of HTML element
|
141 | Fancybox.show([{ src: "#dialog-content", type: "clone" }]);
|
142 |
|
143 | // Any HTML content
|
144 | Fancybox.show([{ src: "<p>Lorem ipsum dolor sit amet.</p>", type: "html" }]);
|
145 | ```
|
146 |
|
147 | ### Carousel
|
148 |
|
149 | Add 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 |
|
159 | Initialise Carousel
|
160 |
|
161 | ```js
|
162 | const myCarousel = new Carousel(document.querySelector("#myCarousel"), {
|
163 | // Your options go here
|
164 | });
|
165 | ```
|
166 |
|
167 | Optionally, 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 |
|
197 | Add 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 |
|
205 | Initialise Panzoom
|
206 |
|
207 | ```js
|
208 | const myPanzoom = new Panzoom(document.querySelector("#myPanzoom"), {
|
209 | // Your options go here
|
210 | });
|
211 | ```
|
212 |
|
213 | Optionally, use CSS to customize container
|
214 |
|
215 | ```css
|
216 | .panzoom {
|
217 | width: 400px;
|
218 | height: 300px;
|
219 | }
|
220 | ```
|
221 |
|
222 | ## License
|
223 |
|
224 | This is commercial software. See [LICENSE.md](LICENSE.md) for more info.
|