-
Notifications
You must be signed in to change notification settings - Fork 11
/
demo.html
218 lines (193 loc) · 14.9 KB
/
demo.html
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>Pixabay Images Gallery - JavaScript Widget</title>
<meta name="description" content="A JavaScript widget for inserting Pixabay image galleries with ease into any website.">
<link rel="shortcut icon" href="https://pixabay.com/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300">
<link rel="stylesheet" href="https://cdn.rawgit.com/yahoo/pure-release/v0.6.0/pure-min.css">
<style>
body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
p, td { line-height: 1.5; }
ul { padding: 0 0 0 20px; }
th { background: #eee; white-space: nowrap; }
th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }
td:first-child { white-space: nowrap; color: #008000; width: 1%; font-style: italic; }
td:nth-child(2) { white-space: nowrap; }
h1, h2, h3 { color: #4b4b4b; font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin: 0 0 1.2em; }
h1 { font-size: 4.5em; color: #1f8dd6; margin: 0 0 .4em; }
h2 { font-size: 2em; color: #636363; }
h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.6em 0 .8em }
h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }
a { color: #4e99c7; text-decoration: none; }
a:hover { text-decoration: underline; }
p, pre { margin: 0 0 1.2em; }
::selection { color: #fff; background: #328efd; }
::-moz-selection { color: #fff; background: #328efd; }
@media (max-width:640px) {
h1 { font-size: 3em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }
td:first-child { white-space: normal; }
}
.inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }
pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }
pre i { color: #aaa; } /* comments */
pre b { font-weight: normal; color: #cf4b25; } /* strings */
pre em { color: #0c59e9; } /* numeric */
/* Pure CSS */
.pure-button { margin: 5px 0; text-decoration: none !important; }
</style>
</head>
<body>
<div style="max-width:900px;padding:0 10px;margin:40px auto;text-align:center">
<h1>Pixabay Images Gallery</h1>
<h2>A free JavaScript widget for inserting Pixabay image galleries with ease into any website or blog.</h2>
</div>
<div style="border-top: 1px solid #eee;border-bottom:1px solid #eee;background:#f7f7f7;margin:30px 0;padding:20px 5px">
<div style="padding :0 7px 0 5px;max-width:902px;margin:auto">
<div class="pixabay_widget" data-image-type="photo" data-row-height="150" data-max-rows="2" data-truncate="true" data-editors-choice="true" data-navpos="false"></div>
</div>
</div>
<div style="max-width:900px;margin:auto;padding:0 10px 50px">
<p>
This widget may be used without charge for any application - also commercial and without giving credits.
The image galleries are easily customizable and they are responsive by default. The images themselves are in the <a href="https://pixabay.com/service/terms/#download_terms">Public Domain (CC0)</a>.
</p>
<p>
The widget's code is released under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> as free Open Source on <a href="https://github.com/Pixabay/JavaScript-PixabayWidget">Github</a>.
It works in Firefox, Chrome, Safari, Opera and Internet Explorer 8+ and it has no dependencies (plain JavaScript).
</p>
<p>
<a href="https://github.com/Pixabay/JavaScript-PixabayWidget/archive/master.zip" class="pure-button pure-button-primary">Download</a>
<a href="https://github.com/Pixabay/JavaScript-PixabayWidget" class="pure-button">View on GitHub</a>
</p>
<h3>How to use</h3>
<p>
First, <a href="https://pixabay.com/accounts/register/" target="_blank">sign up on Pixabay</a> and get your API key, which you'll find on the <a href="https://pixabay.com/api/docs/" target="_blank">API documentation page</a>. Signing up is free, of course.
Then, include the JavaScript including your API key anywhere on the page, but preferably before the closing <span class="inline-code"></body></span> tag.
</p>
<pre><script>var pixabayWidget = { 'key': 'YOUR_PIXABAY_API_KEY' }</script>
<script <em>src</em>=<b>"https://goodies.pixabay.com/javascript/pixabay-widget/pixabay-widget.min.js"</b> <em>async defer</em>></script></pre>
<p>
The script automatically detects all widget containers and renders the image galleries. A widget container looks like this:
</p>
<pre><div <em>class</em>=<b>"pixabay_widget"</b> <em>data-search</em>=<b>"africa animals"</b> <em>data-max-rows</em>=<b>"3"</b>></div></pre>
<p>
The resulting widget shows a set of popular Pixabay images, matching the term "africa animals", and including navigation buttons with branding:
</p>
<div style="margin:0 0 25px" class="pixabay_widget" data-search="africa animals" data-max-rows="3" data-row-height="120" data-per-page="25"></div>
<p>
The attribute <span class="inline-code">data-search</span> tells the widget what images to search for. When omitting this parameter, all Pixabay images are listed.
<span class="inline-code">data-max-rows</span> limits the widget to a maximum of three rows of images.
The following table lists all available data-* settings:
</p>
<h3>HTML5 data attribute settings</h3>
<table>
<tr><th>Attribute</th><th>Default</th><th>Description</th></tr>
<tr><td>data-search</td><td>''</td><td>A string to search for. Maximum length: 100 characters. Omit to select all images.</td></tr>
<tr><td>data-user</td><td>''</td><td>A Pixabay username to limit search results to.</td></tr>
<tr><td>data-lang</td><td>'en'</td><td>The language to search in. Accepted values: 'bg', 'cs', 'da', 'de', 'el', 'en', 'es', 'fi', 'fr', 'hu', 'id', 'it', 'ja', 'ko', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sk', 'sv', 'th', 'tr', 'vi', 'zh'</td></tr>
<tr><td>data-image-type</td><td>'all'</td><td>A media type to search within. Accepted values: "all", "photo", "illustration".</td></tr>
<tr><td>data-safesearch</td><td><i>false</i></td><td>A flag indicating that only images suitable for all ages should be returned. Accepted values: "true", "false".</td></tr>
<tr><td>data-editors-choice</td><td><i>false</i></td><td>Select images that have received an <a href="https://pixabay.com/editors_choice/">Editor's Choice</a> award. Accepted values: "true", "false".</td></tr>
<tr><td>data-order</td><td>'popular'</td><td>How the results should be ordered. Accepted values: "popular", "latest".</td></tr>
<tr><td>data-page</td><td>1</td><td>Returned image sets are paginated. Use this parameter to select the page number.</td></tr>
<tr><td>data-per-page</td><td>20</td><td>Maximum number of images per next/prev page. Values: 3-100.</td></tr>
<tr><td>data-row-height</td><td>170</td><td>Maximum height of a row in pixels. Values 30-180.</td></tr>
<tr><td>data-max-rows</td><td>-</td><td>Maximum number of rows to display. Images exceeding this row are hidden.</td></tr>
<tr><td>data-truncate</td><td><i>false</i></td><td>Hide <i>incomplete</i> last row of images.</td></tr>
<tr><td>data-target</td><td>-</td><td>Link target for images, e.g. "_blank."</td></tr>
<tr><td>data-navpos</td><td>'bottom'</td><td>Position of pagination links and branding. Leave empty to hide both. Accepted values: "bottom", "top".</td></tr>
<tr><td>data-branding</td><td><i>true</i></td><td>Whether to show "Powered by Pixabay". Accepted values: "true", "false".</td></tr>
<tr><td>data-prev</td><td>'◄ PREV'</td><td>Text for the "previous" link. Leave empty to hide pagination controls.</td></tr>
<tr><td>data-next</td><td>'NEXT ►'</td><td>Text for the "next" link. Leave empty to hide pagination controls.</td></tr>
</table>
<h3>Example</h3>
<p>
A widget showing the most popular images by <a href="https://pixabay.com/users/stevepb-282134/">stevepb</a> - only one row of large images, navigation on top and no branding:
</p>
<pre><div <em>class</em>=<b>"pixabay_widget"</b> <em>data-user</em>=<b>"stevepb"</b> <em>data-max-rows</em>=<b>"1"</b> <em>data-row-height</em>=<b>"180"</b> <em>data-branding</em>=<b>"false"</b> <em>data-navpos</em>=<b>"top"</b>></div></pre>
<p>
And that's how the gallery looks like:
</p>
<div class="pixabay_widget" data-max-rows="1" data-user="stevepb" data-per-page="4" data-row-height="180" data-navpos="top" data-branding="false"></div>
<h3>Changing the default settings and the widget class name</h3>
<p>Data attributes are used to configure individual widgets. As an alternative, it's also possible to modify the default settings. This is done by defining a global JavaScript object "pixabayWidget" <b>before</b> loading the widget script. These are the available parameters:</p>
<pre><script>
<em>var</em> pixabayWidget = {
<em>class_name</em>: <b>'pixabay_widget'</b>, <i>// class name for detecting widgets on the page</i>
<em>lang</em>: <b>'en'</b>,
<em>image_type</em>: <b>'all'</b>,
<em>safesearch</em>: false,
<em>editors_choice</em>: false,
<em>order</em>: <b>'popular'</b>,
<em>per_page</em>: 20,
<em>row_height</em>: 170,
<em>max_rows</em>: false,
<em>truncate</em>: false,
<em>target</em>: <b>''</b>,
<em>navpos</em>: <b>'bottom'</b>,
<em>branding</em>: true,
<em>prev</em>: <b>'◄ PREV'</b>,
<em>next</em>: <b>'NEXT ►'</b>
}
</script></pre>
<h3>Updating widgets after DOM manipulations</h3>
<p>
New widgets may be added (e.g. via AJAX) and all attributes and settings may be modified at any time.
Use the <span class="inline-code">initPixabayWidget()</span> method to render all changes.
</p>
<pre><script>
<em>new</em> initPixabayWidget();
</script></pre>
<h3>Styles and layout</h3>
<p>
The widget comes with a default set of CSS rules, which is dynamically generated by the script. All CSS directives may be overwritten with custom styles.
Please take a look at the widget's <a href="https://github.com/Pixabay/JavaScript-PixabayWidget">JavaScript source code</a> to see the auto-generated CSS.
</p>
<h3>CDN source / Hosting the JavaScript code</h3>
<p>
If you like, you may download the script and host it on your own server(s).
Alternatively, use the script URL from Pixabay - as shown in the example above.
Or you can make use of <a href="https://rawgit.com/">RawGit</a> to access the GitHub repository via CDN (MaxCDN):
</p>
<pre><script <em>src</em>=<b>"https://cdn.rawgit.com/Pixabay/JavaScript-PixabayWidget/master/pixabay-widget.min.js"</b> <em>async defer</em>></script></pre>
<div style="margin:40px 0;overflow:hidden">
<span id="github_social"></span>
<div style="float:left;margin-right:35px">
<a href="#" data-width="70" class="twitter-share-button" data-text="Pixabay Images Gallery - JavaScript Widget"></a>
</div>
<div style="float:left">
<div class="g-plusone" data-size="medium"></div>
</div>
<div style="float:left;width:140px" class="fb-like" data-send="false" data-layout="button_count" data-width="140" data-show-faces="false"></div>
</div>
<p>This software is released as Open Source under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a> by <a href="https://pixabay.com/users/Simon/">Simon Steinberger / Pixabay.com</a>.</p>
</div>
<div style="background:#fafafa;border-top:1px solid #eee;padding:15px;font-size:.9em">
<div style="max-width:900px;margin:auto;padding:0 10px">
<a style="float:right;margin-left:20px" href="https://pixabay.com/en/service/about/">About Us</a>
<a style="float:right;margin-left:20px" href="https://pixabay.com/en/blog/">Blog</a>
<a style="float:right;margin-left:20px" href="https://goodies.pixabay.com/">More Goodies</a>
© <a href="https://pixabay.com/">Pixabay.com</a> / Simon Steinberger / Hans Braxmeier
</div>
</div>
<div id="fb-root"></div>
<script>var pixabayWidget = { key: "909290-fe7f236cc23a0202bde748bdb", target: '_blank' };</script>
<script src="pixabay-widget.js" async defer></script>
<script>
if (~window.location.href.indexOf('http')) {
(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=114593902037957";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
document.getElementById('github_social').innerHTML = '\
<iframe style="float:left;margin-right:15px" src="//ghbtns.com/github-btn.html?user=Pixabay&repo=JavaScript-PixabayWidget&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>\
<iframe style="float:left;margin-right:15px" src="//ghbtns.com/github-btn.html?user=Pixabay&repo=JavaScript-PixabayWidget&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>\
';
}
</script>
</body>
</html>