j1-template 2022.5.0.rc0 → 2022.5.0.rc1

Sign up to get free protection for your applications and to get access to all the features.
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].