j1-template 2022.5.0.rc0 → 2022.5.0.rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/lib/j1/version.rb +1 -1
  3. data/lib/starter_web/Gemfile +1 -1
  4. data/lib/starter_web/_config.yml +1 -1
  5. data/lib/starter_web/dot.ruby-version +1 -0
  6. data/lib/starter_web/package.json +2 -2
  7. data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +1 -1
  8. data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +1 -1
  9. data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +1 -1
  10. data/lib/starter_web/pages/public/blog/navigator/archive.html +1 -1
  11. data/lib/starter_web/pages/public/blog/navigator/index.html +2 -2
  12. data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +1 -1
  13. data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
  14. data/lib/starter_web/utilsrv/package.json +1 -1
  15. metadata +2 -25
  16. data/lib/starter_web/pages/public/learn/_roundtrip/100_present_images.adoc +0 -313
  17. data/lib/starter_web/pages/public/learn/_roundtrip/100_present_videos.adoc +0 -281
  18. data/lib/starter_web/pages/public/learn/_roundtrip/200_typography.adoc +0 -253
  19. data/lib/starter_web/pages/public/learn/_roundtrip/300_icon_fonts.adoc +0 -579
  20. data/lib/starter_web/pages/public/learn/_roundtrip/400_asciidoc_extensions.adoc +0 -719
  21. data/lib/starter_web/pages/public/learn/_roundtrip/410_bs_modals_extentions.adoc +0 -91
  22. data/lib/starter_web/pages/public/learn/_roundtrip/420_responsive_tables_extensions.adoc +0 -420
  23. data/lib/starter_web/pages/public/learn/_roundtrip/500_themes.adoc +0 -250
  24. data/lib/starter_web/pages/public/learn/_roundtrip/600_quicksearch.adoc +0 -425
  25. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/attributes.asciidoc +0 -118
  26. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/100_gistblock.asciidoc +0 -28
  27. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_info.asciidoc +0 -14
  28. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_left_warning.asciidoc +0 -11
  29. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_right_danger.asciidoc +0 -11
  30. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_central_success.asciidoc +0 -11
  31. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_left_info.asciidoc +0 -11
  32. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_right_success.asciidoc +0 -11
  33. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_table_bs_modal_examples.asciidoc +0 -47
  34. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_info.asciidoc +0 -11
  35. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_left_info.asciidoc +0 -11
  36. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_right_success.asciidoc +0 -11
  37. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/419_advanced_modals_demo.asciidoc +0 -337
  38. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/tables/bs_modal_examples.asciidoc +0 -47
  39. data/lib/starter_web/pages/public/learn/_roundtrip/_includes/google-ad.js +0 -130
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a847bb8f985bc71ee1d8847833e794992d2140a3b13d1d99f515ed6bbbc54b1b
4
- data.tar.gz: bb7e6bbd178c6c31e7bf99225573d8ce8ab3d9e420f56227091740ef058e7b61
3
+ metadata.gz: 58daec030f31a6fa5caeb9ae6c5f0e1f5e6e450ff392ce6955ce92a9508ba710
4
+ data.tar.gz: 8ab409d01bec956c89435f06f8f2b4b5480bbc102d50af09cf48fbb5e166f24e
5
5
  SHA512:
6
- metadata.gz: f3d315be9a121cad05bee5e7d0a8e129dd451ff4e98ffdc50e336d67db9ebce39b972888158ee305b83de6a416aff2f8be7654c954cf89cf92b0ed8dc61d212f
7
- data.tar.gz: 5019e9b1c91c5806598763f46175ba288896bd64554431b186d8aa27442f9ce9d0f570f6f4d7986e3191dfa50d9b6d1e29c0f8aa5579c876ee5d46cf8c212896
6
+ metadata.gz: ab4befb171aaec5cc5dc3d19cd265156e2597c5a5a893cd9ed515f8a4f65daf6673aeca2fea38e5d98d74226cb71444f2887ad5e5926333af2a2469aba40e7b8
7
+ data.tar.gz: 8cea5ab9ba630cc038b5883581b4cefcbe45600e75708112ab4520d997207f012fee2438ea9cfe1aa2cb165fd2d118478d8518eeaaa9dc659f7ba165acc9a3d3
data/lib/j1/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module J1
2
- VERSION = '2022.5.0.rc0'
2
+ VERSION = '2022.5.0.rc1'
3
3
  end
@@ -70,7 +70,7 @@ end
70
70
  # ------------------------------------------------------------------------------
71
71
  # Specify the THEME GEM used for the project
72
72
  #
73
- gem 'j1-template', '~> 2022.5.0.rc0'
73
+ gem 'j1-template', '~> 2022.5.0.rc1'
74
74
 
75
75
  # ------------------------------------------------------------------------------
76
76
  # PRODUCTION: Gem needed for the Jekyll and J1 prod environment
@@ -55,7 +55,7 @@ environment: development
55
55
  # ------------------------------------------------------------------------------
56
56
  # Sets the build version of J1 Template Gem
57
57
  #
58
- version: 2022.5.0.rc0
58
+ version: 2022.5.0.rc1
59
59
 
60
60
  # version
61
61
  # ------------------------------------------------------------------------------
@@ -0,0 +1 @@
1
+ 3.1.2
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "private": true,
3
3
  "name": "j1",
4
- "version": "2022.3.0-rc1",
5
- "description": "J1 Template Starter Web for Ruby V3",
4
+ "version": "2022.5.0-rc1",
5
+ "description": "J1 Template Starter Web",
6
6
  "homepage": "https://your.site",
7
7
  "author": {
8
8
  "name": "Your Name",
@@ -20,7 +20,7 @@ analytics: true
20
20
  comments: false
21
21
 
22
22
  exclude_from_search: true
23
- regenerate: true # needed to update pages
23
+ regenerate: false # set to 'true', if update posts is required
24
24
 
25
25
  resources: [ animate ]
26
26
  resource_options:
@@ -20,7 +20,7 @@ advertising: false
20
20
  comments: false
21
21
 
22
22
  exclude_from_search: true
23
- regenerate: true # needed to update pages
23
+ regenerate: false # set to 'true', if update posts is required
24
24
 
25
25
  resources: [ animate ]
26
26
  resource_options:
@@ -21,7 +21,7 @@ advertising: false
21
21
  comments: false
22
22
 
23
23
  exclude_from_search: true
24
- regenerate: false # page currently NOT used
24
+ regenerate: false # set to 'true', if update posts is required
25
25
 
26
26
  resources: [ animate ]
27
27
  resource_options:
@@ -20,7 +20,7 @@ advertising: false
20
20
  comments: false
21
21
 
22
22
  exclude_from_search: true
23
- regenerate: true # needed to update pages
23
+ regenerate: false # set to 'true', if update posts is required
24
24
 
25
25
  resources: [ animate ]
26
26
  resource_options:
@@ -17,13 +17,13 @@ sort: date
17
17
  toc: true
18
18
  fab_menu_id: default
19
19
 
20
- scrollDynamicPagesTopOnChange: false # do NOT scroll the page to top on content changes
20
+ scrollDynamicPagesTopOnChange: false # do NOT scroll the page to top on content changes
21
21
 
22
22
  analytics: true
23
23
  advertising: false
24
24
  comments: false
25
25
 
26
- regenerate: true # needed to update the pagination pages
26
+ regenerate: false # set to 'true', if update posts is required
27
27
 
28
28
  resources: [ animate, scroller ]
29
29
  resource_options:
@@ -13,7 +13,7 @@ tags: [ Introduction, Module, Image ]
13
13
  fab_menu_id: page_ctrl
14
14
 
15
15
  permalink: /pages/public/learn/roundtrip/present_images/
16
- regenerate: true
16
+ regenerate: false
17
17
 
18
18
  resources: [
19
19
  animate, clipboard, carousel,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "private": true,
3
3
  "name": "utls",
4
- "version": "2022.5.0-rc0",
4
+ "version": "2022.5.0-rc1",
5
5
  "description": "J1 Template Utility Server",
6
6
  "homepage": "https://jekyll.one",
7
7
  "author": {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "private": true,
3
3
  "name": "utls",
4
- "version": "2022.5.0-rc0",
4
+ "version": "2022.5.0-rc1",
5
5
  "description": "J1 Template Utility Server",
6
6
  "homepage": "https://jekyll.one",
7
7
  "author": {
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: j1-template
3
3
  version: !ruby/object:Gem::Version
4
- version: 2022.5.0.rc0
4
+ version: 2022.5.0.rc1
5
5
  platform: ruby
6
6
  authors:
7
7
  - juergen_jekyll_one
@@ -2269,6 +2269,7 @@ files:
2269
2269
  - lib/starter_web/dot.gitattributes
2270
2270
  - lib/starter_web/dot.gitignore
2271
2271
  - lib/starter_web/dot.nojekyll
2272
+ - lib/starter_web/dot.ruby-version
2272
2273
  - lib/starter_web/favicon.ico
2273
2274
  - lib/starter_web/index.html
2274
2275
  - lib/starter_web/package.json
@@ -2336,30 +2337,6 @@ files:
2336
2337
  - lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_nbi_widgets_scatter_drag_chart.html
2337
2338
  - lib/starter_web/pages/public/jupyter/notebooks/textbooks/j1_odes_in_python.html
2338
2339
  - lib/starter_web/pages/public/jupyter/where_to_go.adoc
2339
- - lib/starter_web/pages/public/learn/_roundtrip/100_present_images.adoc
2340
- - lib/starter_web/pages/public/learn/_roundtrip/100_present_videos.adoc
2341
- - lib/starter_web/pages/public/learn/_roundtrip/200_typography.adoc
2342
- - lib/starter_web/pages/public/learn/_roundtrip/300_icon_fonts.adoc
2343
- - lib/starter_web/pages/public/learn/_roundtrip/400_asciidoc_extensions.adoc
2344
- - lib/starter_web/pages/public/learn/_roundtrip/410_bs_modals_extentions.adoc
2345
- - lib/starter_web/pages/public/learn/_roundtrip/420_responsive_tables_extensions.adoc
2346
- - lib/starter_web/pages/public/learn/_roundtrip/500_themes.adoc
2347
- - lib/starter_web/pages/public/learn/_roundtrip/600_quicksearch.adoc
2348
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/attributes.asciidoc
2349
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/100_gistblock.asciidoc
2350
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_info.asciidoc
2351
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_left_warning.asciidoc
2352
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_right_danger.asciidoc
2353
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_central_success.asciidoc
2354
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_left_info.asciidoc
2355
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_right_success.asciidoc
2356
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_table_bs_modal_examples.asciidoc
2357
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_info.asciidoc
2358
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_left_info.asciidoc
2359
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_right_success.asciidoc
2360
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/419_advanced_modals_demo.asciidoc
2361
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/tables/bs_modal_examples.asciidoc
2362
- - lib/starter_web/pages/public/learn/_roundtrip/_includes/google-ad.js
2363
2340
  - lib/starter_web/pages/public/learn/quickstart.adoc
2364
2341
  - lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc
2365
2342
  - lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc
@@ -1,313 +0,0 @@
1
- ---
2
- title: Roundtrip
3
- tagline: present images
4
- date: 2020-11-03 00:00:00
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: [ Roundtrip ]
11
- tags: [ Introduction, Module, Image ]
12
-
13
- fab_menu_id: page_ctrl
14
-
15
- permalink: /pages/public/learn/roundtrip/present_images/
16
- regenerate: true
17
-
18
- resources: [
19
- animate, clipboard, carousel,
20
- justifiedGallery, lightbox, lightGallery,
21
- masterslider, rouge
22
- ]
23
- resource_options:
24
- - attic:
25
- slides:
26
- - url: /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
27
- alt: Photo by Ricardo Gomez Angel on Unsplash
28
- badge:
29
- type: unsplash
30
- author: Ricardo Gomez Angel
31
- href: https://unsplash.com/@ripato/portfolio
32
- ---
33
-
34
- // Page Initializer
35
- // =============================================================================
36
- // Enable the Liquid Preprocessor
37
- :page-liquid:
38
-
39
- // Set (local) page attributes here
40
- // -----------------------------------------------------------------------------
41
- // :page--attr: <attr-value>
42
- :ms-slider-previewer: https://jekyll.one/pages/public/previewer/masterslider/
43
- :ms-slider-module-documentation: https://jekyll.one/pages/public/manuals/modules/masterslider/
44
-
45
- // Load Liquid procedures
46
- // -----------------------------------------------------------------------------
47
- {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
48
-
49
- // Load page attributes
50
- // -----------------------------------------------------------------------------
51
- {% include {{load_attributes}} scope="all" %}
52
-
53
- // Page content
54
- // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
55
-
56
- // Include sub-documents (if any)
57
- // -----------------------------------------------------------------------------
58
- [role="dropcap"]
59
- Welcome to the first preview page focussing on the image module. This page
60
- shows some valuable features of the J1 Template to manage your image-based
61
- content using lightboxes, carousels (slider), and galleries. The image module
62
- offers complex functionality based on powerful OpenSource libraries like
63
- JustifiedGallery for high-end, masonry-styled preview maps. J1 Template uses
64
- the _jQuery_ Plugin Owl Carousel as a base for image sliders. A carousel
65
- app (slider) lets you present your images as shows.
66
-
67
- Lightboxes like LightGallery or Lightbox V2 support your web for enlarged
68
- image views of your picture or video content. Have a look, a quick tour
69
- of what J1 can do for image data. Have fun!
70
-
71
- // [role="notranslate"]
72
- == J1 Lightbox blocks
73
-
74
- A Lightbox is, in general, a helper which displays enlarged, almost
75
- screen-filling versions of images (or videos) while dimming the remainder
76
- of the page. The technique, introduced by Lightbox V2, gained widespread
77
- popularity thanks to its simple style. The term lightbox has been employed
78
- since then for Javascript libraries to support such functionality.
79
-
80
- For the J1 Template, two different lightboxes are available:
81
-
82
- * Lightbox V2 (lightbox)
83
- * LightGallery
84
-
85
- The default tool employed by J1 Template is Lightbox V2, a Javascript library
86
- written by _Lokesh Dhakar_. The name of that (build-in) is *lightbox*.
87
- For more complex use cases, like a thumbnail gallery preview or video support,
88
- LightGallery can be used alternatively.
89
-
90
- NOTE: The name LightGallery implies a sort of a Gallery, but the library is a
91
- _lightbox_. And, LightGallery provides much more functionality on image-based
92
- data rather than enlarged displaying of images. See the examples below to check
93
- for the differences in comparison to the simpler Lightbox V2 lightbox.
94
-
95
- Both lightboxes are fully integrated to be used as standalone modules or
96
- used as helpers *under-the-hood* by other apps or modules focussing on
97
- image-data like gallery or carousel, the build-in carousel module.
98
-
99
- == Lightbox block Examples
100
-
101
- Find below an example of using the lightbox Lightbox standalone. See how
102
- single (individual) images are linked for use with Lightbox.
103
-
104
- .Lightbox block for standalone images
105
- lightbox::example-standalone[ 800, {data-images-standalone}, role="mb-4" ]
106
-
107
- Lightbox supports image groups (image sets). Click on the images below to
108
- see how Lightbox manages a group of images.
109
-
110
- .Lightbox block for grouped images
111
- lightbox::example-group[ 395, {data-images-group}, group, role="mb-4 wm-800" ]
112
-
113
- === LightGallery Example
114
-
115
- LightGallery provides more complex functions on image data. The module
116
- supports a gallery-style thumbnail preview plus image resizing, a download
117
- dialog, sharing provider support, and more helpful. Check what
118
- LightGallery can do this by the following example.
119
-
120
- gallery::jg_old_times[ role="mb-4 wm-800" ]
121
-
122
- == J1 Carousel App
123
-
124
- J1 Carousel is based on OWL Carousel V1 in the latest (and unfortunately
125
- last) version of 1.3.3. OWL Carousel is a clean and neat _jQuery_ slider
126
- plugin for creating fully responsive and touch-enabled carousel sliders.
127
-
128
- NOTE: OWL Carousel V1 is no longer available on the Internet; for an
129
- unknown reason. Anyway, the J1 Template is using this version of OWL
130
- Carousel is a build-in carousel module because the software does an excellent
131
- job, is based on an MIT license with no issues using them for private and
132
- business use. And offers a lot of great features!
133
-
134
- === Simple Text Carousel
135
-
136
- A slider or carousel is typically used for displaying images. Still, the
137
- implementation for the J1 Template supports a lot more sources to be
138
- displayed as a slide show: simple text, for example.
139
-
140
- .Carousel Example
141
- carousel::demo_text_carousel[role="mb-3"]
142
-
143
- Important statements or topics can be placed, e.g., on top of an article or
144
- a paragraph, to give them better visibility. In one line, you can present
145
- many facts to know animated for the reader's attention within a single
146
- line. No much space is needed!
147
-
148
- === Parallax Text Carousel
149
-
150
- A more eye-minded type of text-based slide show is a parallax text slider. If
151
- you want to emphasize your statements focussing the meaning, this kind of a
152
- slide show may be interesting. Image-based slide shows may draw off the
153
- reader's attention from the text, therefore a pure text-based presentation
154
- maybe the better choice.
155
-
156
- .Carousel Example
157
- carousel::demo_text_carousel_parallax[role="mb-3"]
158
-
159
- Parallax text shows can be placed as banners on a page. For text shows,
160
- different animations are available. Internally, J1 Template uses some of
161
- the great CSS styles offered by _animate.css_.
162
-
163
- TIP: Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page]
164
- to see all the possible dynamic styles you can create based on pure CSS. Some
165
- of them are implemented for OWL Carousel for animation. See the documentation
166
- for the CAROUSEL Module for more details.
167
-
168
- === Simple Image Carousel
169
-
170
- Carousels are mostly used for pictures data to animate the images as a series.
171
- Find with the following some examples of how to use a carousel for your image
172
- data.
173
-
174
- A simple image show is useful, for example, as an animated (or not animated)
175
- banner presenting exciting things about your site or the products offered.
176
-
177
- .Carousel Example
178
- carousel::demo_simple[role="mb-3"]
179
-
180
- === Carousel + Caption + Lightbox
181
-
182
- Carousels are used for an exceptionally compact form of image galleries.
183
- This example shows some pictures having individual caption text and supports
184
- a lightbox to enlarge images full size. For the example below, an almost simple
185
- lightbox is used: Lightbox V2; or short: lightbox.
186
-
187
- .Carousel Example
188
- carousel::demo_cats[role="mb-3"]
189
-
190
- The J1 module lightbox is a simple Lightbox but offers a bunch of impressive
191
- features for displaying images. For example, the lightbox can display all
192
- images (of a carousel) as a group. If one picture is opened in the lightbox,
193
- others are browsed by easy-to-use control buttons.
194
-
195
- === One Slide Carousel + Lightbox
196
-
197
- The build-in Carousel carousel supports multiple and single image shows.
198
- Here you find an example of a single image slide show with controls enabled
199
- to browse all images back and forth. An indicator below the slider shows how
200
- many images the show contains.
201
-
202
- .Carousel Example
203
- carousel::demo_oneslide[role="mb-3"]
204
-
205
- == J1 Master Slider
206
-
207
- The Javascript tool _Master Slider_ is a 3rd party plugin fully integrated
208
- into the J1 Template by the module `masterslider`. J1 Template uses the
209
- *free* version of Master Slider (MS Lite). The Lite version does *not* support
210
- all features: the functionality of *filters*, *layouts* are limited and no
211
- *overlay* techniques are supported by the MS Lite version.
212
-
213
- WARNING: The Master Slider (MS Lite and Pro version) is a so-called _jQuery_
214
- Plugin. _jQuery_ can simplify Javascript code a lot but will slow-down
215
- the runtime performance of the JS code. Expect for slower browsers and
216
- platforms, like mobiles or tablets, initializing an MS Slider will take
217
- a while to be finished.
218
-
219
- === Carousels versus Sliders
220
-
221
- Sliders and Carousels are focussing quite the same thing: presenting image data
222
- dynamically as an app. The features of Sliders go far beyond what simple
223
- Carousels can do: presenting image-based data as *slideshows*. Well-known
224
- Office Products to create *presentations* are _Microsoft Powerpoint_ or
225
- _Google Docs_. Modern sliders like _Master Slider_ provide similar features to
226
- present animated *shows* (presentations) based on digital image data combined
227
- with text elements, buttons, or overlay techniques, e.g., for images or
228
- other digital data sources.
229
-
230
- In short: Carousels are used to present images, and sliders are used to create
231
- complex image-based slideshows (presentations).
232
-
233
- === MS Slider using Controls + Filters + Lightbox
234
-
235
- The following slider uses the (CSS) filter feature of Master Slider.
236
- Filters can be used, for example, to *transform* the *style* of the images
237
- presented by a slider. In this example, the slider images are transformed
238
- from style *color* to *sepia*.
239
-
240
- WARNING: Lightbox support is only available for the MS Lite version of J1
241
- Template. The product versions *MS Lite* and *MS Pro* does not support
242
- Lightboxes on sliders out-of-the-box.
243
-
244
- TIP: Click on the Lightbox symbol mdi:image-outline[18px, md-gray] in the
245
- slides to see the *colored* images configured for the slider.
246
-
247
- masterslider::ms_00001[role="mt-4 mb-5"]
248
-
249
- === MS Slider using Text Elements
250
-
251
- One of the major features of sliders is to present additional (animated)
252
- elements, like text data, connected to the images presented by a slider:
253
- the slideshow. MS Slider provides functions to combine images and text
254
- elements: the *MSInfo* element.
255
-
256
- masterslider::ms_00003[role="mt-4 mb-5"]
257
-
258
- === MS Slider using ThumbImages
259
-
260
- To give the users better control over a slideshow, sliders provide complex UI
261
- elements like *thumbs* placed side-by-side (left|right), at the top, or at
262
- the bottom of a slideshow. Find two examples to control a slideshow by
263
- *thumb images*.
264
-
265
- masterslider::ms_00004[role="mt-4 mb-5"]
266
-
267
- masterslider::ms_00005[role="mt-4 mb-5"]
268
-
269
- === MS Slider using MS Info in a complex Layout
270
-
271
- The following slider presents a slideshow that combines an MSInfo element
272
- at the bottom and the MS Layout `partialview`. A slideshow typically presents
273
- a larger number of slides. The layout `partialview` accompanies the *active*
274
- slide by their neighbors on the left and the right.
275
-
276
- masterslider::ms_00009[role="mt-4 mb-5"]
277
-
278
- === More about MS Sliders
279
-
280
- If you're interested to learn more about MS Sliders, go for the following
281
- documents:
282
-
283
- * link:{ms-slider-previewer}[MS Slider Previewer, {browser-window--new}]
284
- * link:{ms-slider-module-documentation}[MS Slider module documentation, {browser-window--new}]
285
-
286
-
287
- == JustifiedGallery
288
-
289
- JustifiedGallery is a great _jQuery_ Plugin to create responsive, infinite,
290
- and high-quality justified image galleries. J1 Template combines the Gallery
291
- with the lightboxes supported to enlarge the images of a gallery. See the
292
- gallery in action; and for sure, all that you see is even responsive. Change
293
- the size of your current browser window, by width or height to see what will
294
- happen!
295
-
296
- Pictures you've made are typically not even in size. Images may have the
297
- same size (resolution), but some are orientated landscapes, or others
298
- may be portraits. For that reason, a more powerful gallery is needed to create
299
- so-called justified views. JustifiedGallery uses a so-called masonry grid
300
- layout. It works by placing elements in an optimal position based on available
301
- horizontal and vertical space. Sort of like mason fitting stones in a wall.
302
- You'll have seen it in use all over the Internet!
303
-
304
- .JustifiedGallery Example
305
- gallery::jg_customizer[role="mb-4"]
306
-
307
- == What next
308
-
309
- Hopefully, you've enjoyed exploring the possibilities J1 offers for managing
310
- and displaying digital image content. But much, much more can the J1 do for
311
- your web.
312
-
313
- Incredible? See the next example page link:{url-roundtrip--present-videos}[Present Videos].