-
Notifications
You must be signed in to change notification settings - Fork 26
Expand file tree
/
Copy pathimage-gallery-react.htm
More file actions
183 lines (163 loc) · 9.26 KB
/
Copy pathimage-gallery-react.htm
File metadata and controls
183 lines (163 loc) · 9.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Gallery Demo | React</title>
<link href="https://www.dataformsjs.com/js/prism-1.22.0/prism.css" rel="stylesheet">
<link rel="stylesheet" href="css/image-gallery.css" data-css-vars-ponyfill>
</head>
<body>
<section class="page-title">
<h1 tabindex="1">DataFormsJS React Component <ImageGallery></h1>
<img src="https://www.dataformsjs.com/img/examples/image-gallery.svg" alt="Image Gallery" />
</section>
<div class="about">
<section>
<h2 tabindex="2">Features</h2>
<ul class="emoji-list">
<li data-emoji="🖼️">Shows Overlay with large Image for Thumbnails.</li>
<li data-emoji="🎨">Minimal UI so the focus is on the Content.</li>
<li data-emoji="💡">Easy to use from any device and fully accessible.</li>
<li data-emoji="📱">Handles Swipe left/right and Tap to close on Mobile Devices.</li>
<li data-emoji="💻">Fully works on Desktop or Laptop Computer from Mouse. Click to open gallery and Back and Forward buttons are displayed when using a Mouse.</li>
<li data-emoji="⌨️">Fully works from a Keyboard. If using [tabindex] so thumbnails can be selected a spacebar can be used to open the gallery and Left/Right/Escape Keys can be used for navigation.</li>
<li data-emoji="🏷️">Displays [title] of the image with index position by default. Both labels can be hidden through CSS.</li>
<li data-emoji="🕒">Displays a loading indicator if an image takes longer than 2 seconds to load. The text and timeout can be changed by setting props [loadingText] and [loadingTimeout].</li>
<li data-emoji="🚀">Supports next-gen image formats AVIF and WebP by using optional props [image_avif] and [image_webp]. When using next-gen image formats a default/fallback [image] must be included similar to how the HTML <picture> element works.</li>
<li data-emoji="✨">Image loading is optimized so that large images are loaded only when viewed and the previous and next images preloaded while the user is viewing the focused image.</li>
<li data-emoji="🎨">Overlay style and layout can easily changed with CSS.</li>
<li data-emoji="😊">Small Download - Standalone Script is 4.2 kB when gzipped and minified or it adds about 3 kB when bundled with other React code using webpack.</li>
<li data-emoji="⚙️">The code exists in a single file so it's easy to copy and modify if changes or portions of it are needed as part of a custom app.</li>
<li data-emoji="🌐">Works with all Browsers.</li>
</ul>
</section>
<section>
<h2 tabindex="3" class="github">
<img src="./img/GitHub-Mark-32px.png" alt="GitHub">
<span>Full Source Code</span>
</h2>
<ul class="source-code">
<li>
<a href="https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/ImageGallery.js" target="_blank" ref="noopener">
<img src="./img/Unofficial_JavaScript_logo_2.svg" width="64" alt="JavaScript">
<strong>React Component</strong>
</a>
</li>
<li>
<a href="https://github.com/dataformsjs/dataformsjs/blob/master/examples/image-gallery-react.htm" target="_blank" ref="noopener">
<img src="./img/HTML5_Logo.svg" width="64" alt="HTML">
<strong>HTML for this Page</strong>
</a>
</li>
</ul>
</section>
<section>
<h2 tabindex="4">Example Usage and Code</h2>
<pre class="language-html">
<code><!--
npm install dataformsjs
// Import <ImageGallery> using one of the following options:
//
import { ImageGallery } from 'dataformsjs/js/react/es6/DataFormsJS';
import ImageGallery from 'dataformsjs/js/react/es6/ImageGallery';
// Or include JavaScript file directly:
-->
<script type="module" src="dataformsjs/js/react/es6/ImageGallery.min.js"></script>
<script nomodule src="dataformsjs/js/react/es5/ImageGallery.min.js"></script>
<!--
// Define Array of Images
const images = [
{
thumbnail: "{url}",
image: "{url}",
title: "{optional text}"
},
{
thumbnail: "{url}",
image: "{url}",
image_avif: "{optional url}",
image_webp: "{optional url}",
title: "{optional text}"
},
];
// Example Optional Image Template
function AppImage(props) {
return <img
src={props.thumbnail}
alt={props.title}
tabIndex={props.tabIndex}
onClick={props.onClick}
onKeyDown={props.onKeyDown}
key={props.key}
style={{
cursor: 'pointer'
}} />
}
-->
<!-- 1) Using a basic image - no template specified -->
<ImageGallery images={props.data.images} />
<!-- 2) Include [tabIndex] so users can tab from keyboard -->
<ImageGallery images={props.data.images} tabIndex={5} />
<!-- 3) Specify custom template using [template] attribute -->
<ImageGallery images={props.data.images} template={<AppImage />} />
<!-- 4) Specify Template as a Child Element -->
<ImageGallery images={props.data.images}>
<AppImage />
</ImageGallery>
<!-- 5) Specify a Different Loading Message and Timeout.
Defaults to "Loading..." and 2000 milliseconds. -->
<ImageGallery
images={props.data.images}
loadingText="Carregando..."
loadingTimeout={1000} />
<!--
To override default styles use `!important` and specify the style
attributes to override in any style sheet on the page or define your
own style sheet before the component runs using id `image-gallery-css`.
-->
<style>
.image-gallery-overlay { background-color: black !important; }
.image-gallery-overlay { background-color: rgba(0,0,0,.7) !important; }
.image-gallery-overlay .btn-previous,
.image-gallery-overlay .btn-next { background-color: blue !important; }
</style>
<style id="image-gallery-css">...</style>
<link rel="stylesheet" id="image-gallery-css" href="css/image-gallery.css"></code>
</pre>
</section>
</div>
<div id="root"></div>
<!-- React -->
<!--
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js" crossorigin="anonymous"></script>
-->
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
<!-- DataFormsJS React Components -->
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es6/ErrorBoundary.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es6/JsonData.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es6/LazyLoad.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es6/CssVars.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es6/ImageGallery.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es5/ErrorBoundary.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es5/JsonData.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es5/LazyLoad.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es5/CssVars.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es5/ImageGallery.min.js"></script>
<!-- DataFormsJS JSX Loader -->
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/jsxLoader.min.js"></script>
<script>
// Set to `true` to see compiler details
jsxLoader.logCompileTime = false;
jsxLoader.logCompileDetails = false;
</script>
<!-- App Code -->
<script type="text/babel" src="image-gallery-react.jsx"></script>
<!--
https://prismjs.com/
-->
<script src="https://www.dataformsjs.com/js/prism-1.22.0/prism.modified.min.js"></script>
</body>
</html>