j1-template 2021.1.12 → 2021.1.13
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/themes/j1/layouts/content_generator_app.html +1 -1
- data/_includes/themes/j1/layouts/content_generator_blog_archive.html +1 -1
- data/_includes/themes/j1/layouts/content_generator_collection.html +1 -1
- data/_includes/themes/j1/layouts/content_generator_page.html +4 -1
- data/_includes/themes/j1/layouts/content_generator_post.html +1 -1
- data/_includes/themes/j1/layouts/content_generator_raw.html +1 -1
- data/_includes/themes/j1/layouts/layout_metadata_generator.html +55 -0
- data/_includes/themes/j1/modules/connectors/comment/commento.html +31 -0
- data/_includes/themes/j1/modules/connectors/comment/custom-provider.html +7 -8
- data/_includes/themes/j1/modules/connectors/comment/disqus.html +12 -54
- data/_includes/themes/j1/modules/connectors/comment/facebook.html +7 -8
- data/_includes/themes/j1/modules/connectors/comment/hyvor.html +33 -0
- data/_includes/themes/j1/modules/connectors/comment/just-comments.html +31 -0
- data/_includes/themes/j1/modules/connectors/comments +3 -0
- data/_layouts/default.html +51 -0
- data/assets/data/disqus.js +81 -0
- data/assets/data/hyvor.js +72 -0
- data/assets/error_pages/HTTP204.html +2 -1
- data/assets/error_pages/HTTP400.html +2 -1
- data/assets/error_pages/HTTP401.html +2 -1
- data/assets/error_pages/HTTP403.html +2 -1
- data/assets/error_pages/HTTP404.html +2 -1
- data/assets/error_pages/HTTP444.html +93 -0
- data/assets/error_pages/HTTP500.html +2 -1
- data/assets/error_pages/HTTP501.html +2 -1
- data/assets/error_pages/HTTP502.html +2 -1
- data/assets/error_pages/HTTP503.html +2 -1
- data/assets/themes/j1/adapter/js/algolia.js +10 -10
- data/assets/themes/j1/adapter/js/asciidoctor.js +6 -6
- data/assets/themes/j1/adapter/js/attic.js +17 -17
- data/assets/themes/j1/adapter/js/bmd.js +6 -6
- data/assets/themes/j1/adapter/js/carousel.js +10 -10
- data/assets/themes/j1/adapter/js/clipboard.js +10 -10
- data/assets/themes/j1/adapter/js/cookieConsent.js +46 -20
- data/assets/themes/j1/adapter/js/fam.js +34 -34
- data/assets/themes/j1/adapter/js/framer.js +6 -6
- data/assets/themes/j1/adapter/js/j1.js +322 -209
- data/assets/themes/j1/adapter/js/justifiedGallery.js +11 -11
- data/assets/themes/j1/adapter/js/justifiedGalleryCustomizer.js +19 -19
- data/assets/themes/j1/adapter/js/lightbox.js +6 -6
- data/assets/themes/j1/adapter/js/logger.js +7 -7
- data/assets/themes/j1/adapter/js/mmenu.js +25 -25
- data/assets/themes/j1/adapter/js/navigator.js +48 -48
- data/assets/themes/j1/adapter/js/quicksearch.js +6 -6
- data/assets/themes/j1/adapter/js/rouge.js +7 -7
- data/assets/themes/j1/adapter/js/rtable.js +6 -6
- data/assets/themes/j1/adapter/js/themer.js +24 -20
- data/assets/themes/j1/adapter/js/toccer.js +9 -9
- data/assets/themes/j1/modules/backstretch/js/backstretch.js +3 -3
- data/assets/themes/j1/modules/cookieConsent/js/cookieConsent.js +27 -20
- data/assets/themes/j1/modules/cookieConsent/js/cookieConsent.min.js +287 -1
- data/assets/themes/j1/modules/lunrSearch/js/quicksearch.js +1 -1
- data/assets/themes/j1/modules/themeSwitcher/js/switcher.js +19 -19
- data/lib/j1/version.rb +1 -1
- data/lib/starter_web/Gemfile +1 -1
- data/lib/starter_web/_config.yml +42 -24
- data/lib/starter_web/_data/j1_config.yml +22 -11
- data/lib/starter_web/_includes/attributes.asciidoc +1 -1
- data/lib/starter_web/_plugins/lunr_index.rb +1 -1
- data/lib/starter_web/index.html +3 -3
- data/lib/starter_web/package.json +1 -1
- data/lib/starter_web/pages/public/asciidoc_skeletons/book/book.adoc +3 -0
- data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/multi.adoc +3 -0
- data/lib/starter_web/pages/public/asciidoc_skeletons/simple-document/simple.adoc +3 -0
- data/lib/starter_web/pages/public/blog/navigator/archive.html +4 -0
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +4 -0
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +4 -0
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +5 -1
- data/lib/starter_web/pages/public/blog/navigator/index.html +4 -0
- data/lib/starter_web/pages/public/cookieConsent.adoc +3 -0
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +0 -1
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +2 -1
- data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +0 -2
- data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +0 -2
- data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +0 -1
- data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +0 -1
- data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +0 -1
- data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc +0 -1
- data/lib/starter_web/pages/public/learn/roundtrip/600_quicksearch.adoc +0 -1
- data/lib/starter_web/pages/public/learn/where_to_go.adoc +0 -1
- data/lib/starter_web/pages/public/legal/en/100_copyright.adoc +3 -1
- data/lib/starter_web/pages/public/legal/en/200_impress.adoc +3 -1
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +78 -17
- data/lib/starter_web/pages/public/legal/en/400_comment_policy.adoc +3 -1
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +8 -3
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.org.asciidoc +0 -244
@@ -15,6 +15,10 @@ pagination:
|
|
15
15
|
enabled: false
|
16
16
|
permalink: /page:num/
|
17
17
|
|
18
|
+
analytics: true
|
19
|
+
advertising: false
|
20
|
+
comments: false
|
21
|
+
|
18
22
|
regenerate: false
|
19
23
|
|
20
24
|
resource_options:
|
@@ -170,7 +174,7 @@ resource_options:
|
|
170
174
|
</a>
|
171
175
|
</div>
|
172
176
|
</div -->
|
173
|
-
|
177
|
+
|
174
178
|
<!-- place post -->
|
175
179
|
<article class="card raised-z3 mb-5">
|
176
180
|
<h3 id="{{100000|rand}}" class="card-header bg-primary">{{post.title}}</h3>
|
@@ -15,9 +15,11 @@ robots:
|
|
15
15
|
|
16
16
|
fam_menu_id: page_ctrl_simple
|
17
17
|
scrollbar: false
|
18
|
-
comments: false
|
19
18
|
toc: true
|
20
19
|
|
20
|
+
advertising: false
|
21
|
+
comments: false
|
22
|
+
|
21
23
|
permalink: /pages/public/legal/en/privacy/
|
22
24
|
regenerate: false
|
23
25
|
|
@@ -47,6 +49,8 @@ resource_options:
|
|
47
49
|
:cookie-consent: true
|
48
50
|
:logs-files: false
|
49
51
|
:google-analytics: true
|
52
|
+
:hyvor: true
|
53
|
+
:disqus: false
|
50
54
|
:facebook: false
|
51
55
|
:twitter: false
|
52
56
|
:instagram: false
|
@@ -91,7 +95,6 @@ information about what data is collected and how they may be passed on
|
|
91
95
|
to partners can be found in the privacy dialog by clicking on the
|
92
96
|
`Privacy Policy` button.
|
93
97
|
|
94
|
-
|
95
98
|
Necessary::
|
96
99
|
data is stored to run base services of this site. This website is based on
|
97
100
|
static content, and no database is used behind it. All information (data)
|
@@ -211,8 +214,8 @@ endif::[]
|
|
211
214
|
ifeval::[{facebook} == true]
|
212
215
|
== Use of Facebook Plug-ins
|
213
216
|
|
214
|
-
|
215
|
-
provided by:
|
217
|
+
Commenting on *Facebook* is available if you have *agreed* on
|
218
|
+
*personalization* with your privacy settings to use this site provided by:
|
216
219
|
|
217
220
|
----
|
218
221
|
Facebook Inc.
|
@@ -222,8 +225,6 @@ provided by:
|
|
222
225
|
USA
|
223
226
|
----
|
224
227
|
|
225
|
-
into our website.
|
226
|
-
|
227
228
|
When you visit our website, the plug-in will establish a direct connection
|
228
229
|
between your browser and the Facebook server. Thereby Facebook will be informed
|
229
230
|
about your visit on our website with your IP address. If you click the Facebook
|
@@ -243,8 +244,8 @@ endif::[]
|
|
243
244
|
ifeval::[{twitter} == true]
|
244
245
|
== Use of Twitter
|
245
246
|
|
246
|
-
|
247
|
-
|
247
|
+
Commenting on *Twitter* is available if you have *agreed* on
|
248
|
+
*personalization* with your privacy settings to use this site provided by:
|
248
249
|
|
249
250
|
----
|
250
251
|
Twitter Inc.
|
@@ -256,15 +257,16 @@ These functions are offered by:
|
|
256
257
|
|
257
258
|
When using Twitter and the "re-tweet" function, the websites you have visited
|
258
259
|
will be linked to your Twitter account and made available to other users.
|
259
|
-
Data will also be transmitted to Twitter.
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
settings in your account settings at
|
260
|
+
Data will also be transmitted to Twitter. We would like to point out that as
|
261
|
+
provider of the website we possess no knowledge of the contents of the data
|
262
|
+
transmitted or its use by Twitter.
|
263
|
+
|
264
|
+
Further information on the handling of user data can be found in the
|
265
|
+
link:{url-twitter--privacy-en}[Privacy Police, {browser-window--new}].
|
266
|
+
|
267
|
+
You can change your Twitter privacy settings in your account settings at
|
267
268
|
link:{url-twitter--login}[Login, {browser-window--new}].
|
269
|
+
|
268
270
|
endif::[]
|
269
271
|
|
270
272
|
ifeval::[{instagram} == true]
|
@@ -290,13 +292,15 @@ deren Nutzung durch Instagram erhalten.
|
|
290
292
|
|
291
293
|
Weitere Informationen hierzu finden Sie in der
|
292
294
|
link:{url-instagram--privacy-policy}[Privacy Police Instagram, {browser-window--new}].
|
295
|
+
|
293
296
|
endif::[]
|
294
297
|
|
295
298
|
ifeval::[{youtube} == true]
|
296
299
|
== Use of YouTube
|
297
300
|
|
298
301
|
We have integrated functions by the service provider *YouTube* into our
|
299
|
-
website on selected pages.
|
302
|
+
website on selected pages. *YouTube* is available if you have *agreed* on
|
303
|
+
*personalization* with your privacy settings to use this site provided by:
|
300
304
|
|
301
305
|
----
|
302
306
|
YouTube LLC,
|
@@ -315,4 +319,61 @@ by logging out of your YouTube account.
|
|
315
319
|
|
316
320
|
Further information on the handling of user data can be found in the
|
317
321
|
link:{url-google--privacy-policy-en}[Privacy Police Google/YouTube, {browser-window--new}].
|
322
|
+
|
323
|
+
endif::[]
|
324
|
+
|
325
|
+
|
326
|
+
ifeval::[{disqus} == true]
|
327
|
+
== Use of Disqus
|
328
|
+
|
329
|
+
We have integrated the social network|commenting platform *Disqus* into our
|
330
|
+
website. Commenting on *Disqus* is available if you have *agreed* on
|
331
|
+
*personalization* with your privacy settings to use this site provided by:
|
332
|
+
|
333
|
+
----
|
334
|
+
Disqus, Inc.
|
335
|
+
301 Howard Street
|
336
|
+
Suite 300
|
337
|
+
CA 94105
|
338
|
+
USA
|
339
|
+
----
|
340
|
+
|
341
|
+
When you visit our website, the plug-in will establish a direct connection
|
342
|
+
between your browser and the Disqus server. Thereby Disqus will be informed
|
343
|
+
about your visit on our website with your IP address and other data tracked
|
344
|
+
by cookies and similiar technologies. Your personal data is shared by partners
|
345
|
+
of the provider *Disqus* with third-party advertising platforms.
|
346
|
+
|
347
|
+
Further information on the handling of user data can be found in the
|
348
|
+
https://help.disqus.com/en/articles/1717103-disqus-privacy-policy[Privacy Policy, {browser-window--new}].
|
349
|
+
|
350
|
+
endif::[]
|
351
|
+
|
352
|
+
ifeval::[{hyvor} == true]
|
353
|
+
== Use of Hyvor Talk
|
354
|
+
|
355
|
+
We have integrated the social network|commenting platform *Hyvor Talk* into
|
356
|
+
our website. Commenting on *Hyvor Talk* is available if you have *agreed* on
|
357
|
+
*personalization* with your privacy settings to use this site provided by:
|
358
|
+
|
359
|
+
----
|
360
|
+
No 130
|
361
|
+
Green Mount State
|
362
|
+
Madawa, Pilessa
|
363
|
+
Kurunegala
|
364
|
+
Sri Lanka
|
365
|
+
----
|
366
|
+
|
367
|
+
Hyvor Talk is a *privacy-first*, no ads, no tracking platform to support a
|
368
|
+
visitors for comments on this website. When you visit our website, the
|
369
|
+
commenting platform will establish a direct connection between your browser
|
370
|
+
and the Hyvor servers, but does *not* sell any of your personal data to
|
371
|
+
third-parties or advertisers.
|
372
|
+
|
373
|
+
Further information on the handling of user data can be found in the
|
374
|
+
https://hyvor.com/privacy-policy[Privacy Policy, {browser-window--new}].
|
375
|
+
|
376
|
+
NOTE: Hyvor Talk does not place any tracking, advertising, affiliate, or any
|
377
|
+
third-party codes.
|
378
|
+
|
318
379
|
endif::[]
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: j1-template
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2021.1.
|
4
|
+
version: 2021.1.13
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- juergen_jekyll_one
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2021-07-
|
11
|
+
date: 2021-07-20 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: jekyll
|
@@ -275,9 +275,12 @@ files:
|
|
275
275
|
- _includes/themes/j1/modules/connectors/analytic/custom-provider.html
|
276
276
|
- _includes/themes/j1/modules/connectors/analytic/google-analytics.html
|
277
277
|
- _includes/themes/j1/modules/connectors/analytics
|
278
|
+
- _includes/themes/j1/modules/connectors/comment/commento.html
|
278
279
|
- _includes/themes/j1/modules/connectors/comment/custom-provider.html
|
279
280
|
- _includes/themes/j1/modules/connectors/comment/disqus.html
|
280
281
|
- _includes/themes/j1/modules/connectors/comment/facebook.html
|
282
|
+
- _includes/themes/j1/modules/connectors/comment/hyvor.html
|
283
|
+
- _includes/themes/j1/modules/connectors/comment/just-comments.html
|
281
284
|
- _includes/themes/j1/modules/connectors/comments
|
282
285
|
- _includes/themes/j1/modules/connectors/sharing
|
283
286
|
- _includes/themes/j1/modules/connectors/translator
|
@@ -335,10 +338,12 @@ files:
|
|
335
338
|
- assets/data/banner.html
|
336
339
|
- assets/data/carousel.json
|
337
340
|
- assets/data/cookieconsent.html
|
341
|
+
- assets/data/disqus.js
|
338
342
|
- assets/data/fam.html
|
339
343
|
- assets/data/footer.html
|
340
344
|
- assets/data/galleries.json
|
341
345
|
- assets/data/gallery_customizer.html
|
346
|
+
- assets/data/hyvor.js
|
342
347
|
- assets/data/mdi_icons.json
|
343
348
|
- assets/data/menu.html
|
344
349
|
- assets/data/mmenu.html
|
@@ -353,6 +358,7 @@ files:
|
|
353
358
|
- assets/error_pages/HTTP401.html
|
354
359
|
- assets/error_pages/HTTP403.html
|
355
360
|
- assets/error_pages/HTTP404.html
|
361
|
+
- assets/error_pages/HTTP444.html
|
356
362
|
- assets/error_pages/HTTP500.html
|
357
363
|
- assets/error_pages/HTTP501.html
|
358
364
|
- assets/error_pages/HTTP502.html
|
@@ -1294,7 +1300,6 @@ files:
|
|
1294
1300
|
- lib/starter_web/pages/public/blog/navigator/index.html
|
1295
1301
|
- lib/starter_web/pages/public/cookieConsent.adoc
|
1296
1302
|
- lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc
|
1297
|
-
- lib/starter_web/pages/public/learn/roundtrip/100_present_images.org.asciidoc
|
1298
1303
|
- lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc
|
1299
1304
|
- lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc
|
1300
1305
|
- lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc
|
@@ -1,244 +0,0 @@
|
|
1
|
-
---
|
2
|
-
title: Roundtrip
|
3
|
-
tagline: present images
|
4
|
-
date: 2020-11-03 00:00:00 +100
|
5
|
-
description: >
|
6
|
-
Welcome to the preview page focussing on the image module. This page
|
7
|
-
shows some valuable features of the J1 Template to manage your image-based
|
8
|
-
content using lightboxes, carousels (slider), and galleries.
|
9
|
-
|
10
|
-
categories: [ Images, Module ]
|
11
|
-
tags: [ Roundtrip, Introduction ]
|
12
|
-
|
13
|
-
comments: false
|
14
|
-
fam_menu_id: page_ctrl_simple
|
15
|
-
|
16
|
-
permalink: /pages/public/learn/roundtrip/present_images/
|
17
|
-
regenerate: false
|
18
|
-
|
19
|
-
resources: [
|
20
|
-
clipboard, rouge, carousel, lightbox,
|
21
|
-
justifiedGallery, lightGallery
|
22
|
-
]
|
23
|
-
resource_options:
|
24
|
-
- attic:
|
25
|
-
padding_top: 400
|
26
|
-
padding_bottom: 50
|
27
|
-
opacity: 0.5
|
28
|
-
slides:
|
29
|
-
- url: /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
|
30
|
-
alt: Photo by Ricardo Gomez Angel on Unsplash
|
31
|
-
badge:
|
32
|
-
type: unsplash
|
33
|
-
author: Ricardo Gomez Angel
|
34
|
-
href: https://unsplash.com/@ripato/portfolio
|
35
|
-
---
|
36
|
-
|
37
|
-
// Page Initializer
|
38
|
-
// =============================================================================
|
39
|
-
// Enable the Liquid Preprocessor
|
40
|
-
:page-liquid:
|
41
|
-
|
42
|
-
// Set (local) page attributes here
|
43
|
-
// -----------------------------------------------------------------------------
|
44
|
-
// :page--attr: <attr-value>
|
45
|
-
:images-dir: {imagesdir}/pages/roundtrip/100_present_images
|
46
|
-
|
47
|
-
// Load Liquid procedures
|
48
|
-
// -----------------------------------------------------------------------------
|
49
|
-
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
|
50
|
-
|
51
|
-
// Load page attributes
|
52
|
-
// -----------------------------------------------------------------------------
|
53
|
-
{% include {{load_attributes}} scope="all" %}
|
54
|
-
|
55
|
-
// Page content
|
56
|
-
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
57
|
-
|
58
|
-
// Include sub-documents
|
59
|
-
// -----------------------------------------------------------------------------
|
60
|
-
|
61
|
-
Welcome to the first preview page focussing on the image module. This page
|
62
|
-
shows some valuable features of the J1 Template to manage your image-based
|
63
|
-
content using lightboxes, carousels (slider), and galleries.
|
64
|
-
|
65
|
-
The image module offers complex functionality based on powerful OpenSource
|
66
|
-
libraries like JustifiedGallery for high-end, masonry-styled preview maps.
|
67
|
-
J1 Template uses the jQuery plugin Owl Carousel as a base for image sliders.
|
68
|
-
A carousel app (slider) lets you present your images as shows.
|
69
|
-
|
70
|
-
Lightboxes like LightGallery or Lightbox V2 support your web for enlarged
|
71
|
-
image views of your picture or video content. Have a look, a quick tour
|
72
|
-
of what J1 can do for image data. Have fun!
|
73
|
-
|
74
|
-
== J1 Lightboxes
|
75
|
-
|
76
|
-
A Lightbox, in general, is a helper which displays enlarged, almost
|
77
|
-
screen-filling versions of pictures (or videos) while dimming the rest of the
|
78
|
-
page. The technique, introduced by Lightbox V2, gained widespread popularity
|
79
|
-
due to its simple and elegant style. The term lightbox is used since then for
|
80
|
-
Javascript libraries to support such functionality.
|
81
|
-
|
82
|
-
For the J1 Template, two different lightboxes can be used:
|
83
|
-
|
84
|
-
* Lightbox V2 (lightbox)
|
85
|
-
* LightGallery
|
86
|
-
|
87
|
-
The default lightbox used by J1 Template is Lightbox V2, a Javascript library
|
88
|
-
written by _Lokesh Dhakar_. The name of that (build-in) is simply: lightbox.
|
89
|
-
For more complex use cases, like a thumbnail gallery preview or video support,
|
90
|
-
LightGallery can be used alternatively.
|
91
|
-
|
92
|
-
NOTE: The name LightGallery implies a sort of a Gallery, but the library is a
|
93
|
-
_lightbox_. And, LightGallery provides much more functionality on image-based
|
94
|
-
data rather than enlarged displaying of images. See the examples below to check
|
95
|
-
for the differences in comparison to the simpler Lightbox V2 lightbox.
|
96
|
-
|
97
|
-
Both lightboxes are fully integrated to be used as standalone modules or
|
98
|
-
used as helpers *under-the-hood* by other apps or modules focussing on
|
99
|
-
image-data like gallery or carousel, the build-in carousel module.
|
100
|
-
|
101
|
-
== Lightbox Examples
|
102
|
-
|
103
|
-
Find below an example of using the lightbox Lightbox standalone. See how
|
104
|
-
single (individual) images are linked for use with Lightbox.
|
105
|
-
|
106
|
-
.Lightbox block for standalone images
|
107
|
-
lightbox::example-standalone[ 400, {data-images-standalone} ]
|
108
|
-
|
109
|
-
Lightbox supports image groups (image sets). Click on the images below to
|
110
|
-
see how Lightbox manages a group of images.
|
111
|
-
|
112
|
-
.Lightbox block for grouped images
|
113
|
-
lightbox::example-group[ 400, {data-images-group}, group ]
|
114
|
-
|
115
|
-
=== LightGallery Example
|
116
|
-
|
117
|
-
LightGallery provides more complex functions on image data. The module
|
118
|
-
supports a gallery-style thumbnail preview plus image resizing, a download
|
119
|
-
dialog, sharing provider support, and some more helpful. Check what
|
120
|
-
LightGallery can do by the following example.
|
121
|
-
|
122
|
-
gallery::jg_old_times[]
|
123
|
-
|
124
|
-
|
125
|
-
== J1 Carousel App
|
126
|
-
|
127
|
-
J1 Carousel is based on OWL Carousel V1 in the latest (and unfortunately
|
128
|
-
last) version of 1.3.3. OWL Carousel is a clean and neat jQuery slider plugin
|
129
|
-
for creating fully responsive and touch-enabled carousel sliders.
|
130
|
-
|
131
|
-
NOTE: OWL Carousel V1 is no longer available on the Internet; for an
|
132
|
-
unknown reason. Anyway, the J1 Template is using this version of OWL
|
133
|
-
Carousel as a build-in carousel module because the software does an excellent
|
134
|
-
job, is based on an MIT license with no issues using them for private and
|
135
|
-
business use. And offers a lot of great features!
|
136
|
-
|
137
|
-
=== Simple Text Carousel
|
138
|
-
|
139
|
-
A slider or carousel is typically used for displaying images. Still, the
|
140
|
-
implementation for the J1 Template supports a lot more sources to be
|
141
|
-
displayed as a slide show: simple text, for example.
|
142
|
-
|
143
|
-
.Simple text carousel
|
144
|
-
carousel::demo_text_carousel[role="mb-3"]
|
145
|
-
|
146
|
-
Important statements or topics can be placed, e.g., on top of an article or
|
147
|
-
a paragraph to give them better visibility. In one line, you can present
|
148
|
-
a bunch of facts to know animated for the reader's attention within a single
|
149
|
-
line. No much space is needed!
|
150
|
-
|
151
|
-
=== Parallax Text Carousel
|
152
|
-
|
153
|
-
A more eye-minded type of a text-show is a parallax text slider. If you
|
154
|
-
want to place emphasis on your personal statements focussing the meaning, this
|
155
|
-
kind of a slide show may be interesting. Image-based slide shows may draw off
|
156
|
-
the reader's attention from the text, therefor a pure text-based presentation
|
157
|
-
may the better choice.
|
158
|
-
|
159
|
-
.Parallax text carousel
|
160
|
-
carousel::demo_text_carousel_parallax[role="mb-3"]
|
161
|
-
|
162
|
-
Parallax text shows can be placed as banners on a page. A lot of different
|
163
|
-
animations can be used. Internally, J1 Template is using some of the really
|
164
|
-
great CSS styles offered by _animate.css_.
|
165
|
-
|
166
|
-
TIP: Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page]
|
167
|
-
to see all the possible dynamic styles, you can create based on pure CSS. Some
|
168
|
-
of them are implemented for OWL Carousel for animation. See the documentation
|
169
|
-
for the CAROUSEL Module for more details.
|
170
|
-
|
171
|
-
=== Simple Image Carousel
|
172
|
-
|
173
|
-
Carousels are mostly used for pictures data to animate the images as a series.
|
174
|
-
Find with the following some examples how to use a carousel for your image
|
175
|
-
data.
|
176
|
-
|
177
|
-
A simple image show is useful for example as an animated (or not animated)
|
178
|
-
banner presenting exciting things of your site or the products offered.
|
179
|
-
|
180
|
-
.Simple Image Carousel
|
181
|
-
carousel::demo_simple[role="mb-3"]
|
182
|
-
|
183
|
-
=== Carousel + Caption + Lightbox
|
184
|
-
|
185
|
-
Carousels can be used for an exceptionally compact form of image galleries.
|
186
|
-
This example shows some pictures having individual caption text and supports
|
187
|
-
a lightbox to enlarge images full size. For the example below, a almost simple
|
188
|
-
lightbox is used: Lightbox V2; or short: lightbox.
|
189
|
-
|
190
|
-
.Nice cats
|
191
|
-
carousel::demo_cats[role="mb-3"]
|
192
|
-
|
193
|
-
The J1 module lightbox is a simple Lightbox but offers a bunch of impressive
|
194
|
-
features for displaying images. For example, the lightbox can display all
|
195
|
-
images (of a carousel) as a group. If one picture is opened in the lightbox, all
|
196
|
-
the other can be browsed as well.
|
197
|
-
|
198
|
-
=== One Slide Carousel + Lightbox
|
199
|
-
|
200
|
-
The build-in Carousel carousel supports multiple and single image shows.
|
201
|
-
Here you find an example of a single image slide show with controls enabled
|
202
|
-
to browse all images back and forth. An indicator below the slider shows how
|
203
|
-
many images the show contains.
|
204
|
-
|
205
|
-
.Single Slide Carousel and a Lightbox
|
206
|
-
carousel::demo_oneslide[role="mb-3"]
|
207
|
-
|
208
|
-
== J1 Gallery App
|
209
|
-
|
210
|
-
To create image and video galleries, J1 Template implements the jQuery
|
211
|
-
plugin JustifiedGallery as the main gallery module. Beside Justified
|
212
|
-
Gallery, a gallery based on pure _Bootstrap_ code is available with the
|
213
|
-
built-in gallery app *gallery*.
|
214
|
-
|
215
|
-
JustifiedGallery is a great jQuery plugin to create responsive, infinite,
|
216
|
-
and high quality justified image galleries. J1 Template combines the Gallery
|
217
|
-
with the lightboxes supported to enlarge the images of a gallery.
|
218
|
-
|
219
|
-
See JustifiedGallery in action - and for sure all that you see is even
|
220
|
-
responsive. Change the size of your current browser window, by width or height,
|
221
|
-
to see what will happen!
|
222
|
-
|
223
|
-
=== JustifiedGallery
|
224
|
-
|
225
|
-
Pictures you've made are typically not even in size. Images may have the
|
226
|
-
same size (resolution), but some of them are orientated landscape or other
|
227
|
-
may portrait. For that reason, a more powerful gallery is needed to create
|
228
|
-
so-called justified views.
|
229
|
-
|
230
|
-
JustifiedGallery is using a so-called masonry grid layout. It works by
|
231
|
-
placing elements in an optimal position based on available horizontal and
|
232
|
-
vertical space. Sort of like mason fitting stones in a wall. You’ll have
|
233
|
-
seen it in use all over the Internet!
|
234
|
-
|
235
|
-
.Masonry grid layout of JustifiedGallery
|
236
|
-
gallery::jg_customizer[]
|
237
|
-
|
238
|
-
== Whats next
|
239
|
-
|
240
|
-
Hopefully, you've enjoyed exploring the possibilities J1 offers for managing
|
241
|
-
and displaying digital image content. But much, much more can the J1 do for
|
242
|
-
your web.
|
243
|
-
|
244
|
-
Incredible? See the next example page link:{roundtrip-present-videos}[Present videos].
|