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.
- checksums.yaml +4 -4
- data/lib/j1/version.rb +1 -1
- data/lib/starter_web/Gemfile +1 -1
- data/lib/starter_web/_config.yml +1 -1
- data/lib/starter_web/dot.ruby-version +1 -0
- data/lib/starter_web/package.json +2 -2
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +1 -1
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +1 -1
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +1 -1
- data/lib/starter_web/pages/public/blog/navigator/archive.html +1 -1
- data/lib/starter_web/pages/public/blog/navigator/index.html +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +1 -1
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +2 -25
- data/lib/starter_web/pages/public/learn/_roundtrip/100_present_images.adoc +0 -313
- data/lib/starter_web/pages/public/learn/_roundtrip/100_present_videos.adoc +0 -281
- data/lib/starter_web/pages/public/learn/_roundtrip/200_typography.adoc +0 -253
- data/lib/starter_web/pages/public/learn/_roundtrip/300_icon_fonts.adoc +0 -579
- data/lib/starter_web/pages/public/learn/_roundtrip/400_asciidoc_extensions.adoc +0 -719
- data/lib/starter_web/pages/public/learn/_roundtrip/410_bs_modals_extentions.adoc +0 -91
- data/lib/starter_web/pages/public/learn/_roundtrip/420_responsive_tables_extensions.adoc +0 -420
- data/lib/starter_web/pages/public/learn/_roundtrip/500_themes.adoc +0 -250
- data/lib/starter_web/pages/public/learn/_roundtrip/600_quicksearch.adoc +0 -425
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/attributes.asciidoc +0 -118
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/100_gistblock.asciidoc +0 -28
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_info.asciidoc +0 -14
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_left_warning.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_right_danger.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_central_success.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_left_info.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_right_success.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_table_bs_modal_examples.asciidoc +0 -47
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_info.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_left_info.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_right_success.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/419_advanced_modals_demo.asciidoc +0 -337
- data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/tables/bs_modal_examples.asciidoc +0 -47
- 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:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 58daec030f31a6fa5caeb9ae6c5f0e1f5e6e450ff392ce6955ce92a9508ba710
|
|
4
|
+
data.tar.gz: 8ab409d01bec956c89435f06f8f2b4b5480bbc102d50af09cf48fbb5e166f24e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ab4befb171aaec5cc5dc3d19cd265156e2597c5a5a893cd9ed515f8a4f65daf6673aeca2fea38e5d98d74226cb71444f2887ad5e5926333af2a2469aba40e7b8
|
|
7
|
+
data.tar.gz: 8cea5ab9ba630cc038b5883581b4cefcbe45600e75708112ab4520d997207f012fee2438ea9cfe1aa2cb165fd2d118478d8518eeaaa9dc659f7ba165acc9a3d3
|
data/lib/j1/version.rb
CHANGED
data/lib/starter_web/Gemfile
CHANGED
|
@@ -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.
|
|
73
|
+
gem 'j1-template', '~> 2022.5.0.rc1'
|
|
74
74
|
|
|
75
75
|
# ------------------------------------------------------------------------------
|
|
76
76
|
# PRODUCTION: Gem needed for the Jekyll and J1 prod environment
|
data/lib/starter_web/_config.yml
CHANGED
|
@@ -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.
|
|
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.
|
|
5
|
-
"description": "J1 Template Starter Web
|
|
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",
|
|
@@ -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:
|
|
26
|
+
regenerate: false # set to 'true', if update posts is required
|
|
27
27
|
|
|
28
28
|
resources: [ animate, scroller ]
|
|
29
29
|
resource_options:
|
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.
|
|
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].
|