RubyGems - j1-template - Versions diffs - 2023.8.1 → 2023.9.0 - Mend

j1-template 2023.8.1 → 2023.9.0

Files changed (29) hide show

data/lib/starter_web/pages/public/learn/roundtrip/present_images.adoc CHANGED Viewed

@@ -1,470 +1,512 @@
----
-title:                                  Image
-title_extention:                        Lightboxes, Carousels, Sliders, and Galleries for J1 Template
-tagline:                                Present Images
-date:                                   2020-11-03
-#last_modified:                         2023-01-01
-description: >
-                                        J1 Template support valuable features to manage your image-based
-                                        content using lightboxes, carousels, sliders, and galleries.
-                                        The image modules of J1 Template offer a wide range of complex
-                                        functionality based on powerful OpenSource libraries like
-                                        Lightbox2, Master Slider, LightGallery, or JustifiedGallery
-                                        for high-end, masonry-styled preview maps.
-keywords: >
-                                        open source, free, template, jekyll, jekyllone, web,
-                                        sites, static, jamstack, bootstrap,
-                                        image, lightbox, carousel, slider, gallery,
-                                        lightbox2, master slider, lightgallery, justifiedgallery
-categories:                             [ Roundtrip ]
-tags:                                   [ Module, Carousel, Lightbox, Image, Slider, Slick ]
-image:
-  path:                                 /assets/images/modules/attics/1920x1280/quino-al-2.jpg
-  width:                                1920
-  height:                               1280
-regenerate:                             false
-permalink:                              /pages/public/learn/roundtrip/present_images/
-resources:                              [
-                                          animate, clipboard, carousel, comments,
-                                          justifiedGallery, lightbox, lightGallery,
-                                          masterslider, rouge, slick
-                                        ]
-resource_options:
-  - attic:
-      slides:
-        - url:                          /assets/images/modules/attics/1920x1280/quino-al-2.jpg
-          alt:                          Photo by Quino Al Angel on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Quino Al Angel
-            href:                       https://unsplash.com/@quinoal
----
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-:url-lightbox2--home:                   https://lokeshdhakar.com/projects/lightbox2/
-:url-lightbox2--github:                 https://github.com/lokesh/lightbox2/
-:url-justified-gallery--home:           https://miromannino.github.io/Justified-Gallery/
-:url-justified-gallery--github:         https://github.com/miromannino/Justified-Gallery/
-:url-j1-docs--carousel-module:          https://jekyll.one/pages/public/manuals/modules/carousel/
-:url-j1-docs--lightbox-module:          https://jekyll.one/pages/public/manuals/modules/lightbox/
-:url-j1-docs--masterslider-module:      https://jekyll.one/pages/public/manuals/modules/masterslider/
-:url-j1-masterslider-previewer:         https://jekyll.one/pages/public/tools/previewer/masterslider/
-:url-j1-slick-previewer:                https://jekyll.one/pages/public/tools/previewer/slick/
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="all" %}
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-[role="dropcap"]
-Welcome to the preview page focussing on the image module. This page shows
-all the valuable features of the J1 Template to manage your image-based
-content using lightboxes, carousels, sliders, and galleries. The image modules
-of J1 Template offer a wide range of complex functionality based on powerful
-OpenSource libraries like Lightbox2, Master Slider, LightGallery, or
-JustifiedGallery for high-end, masonry-styled preview maps.
-mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
-*15-30 Minutes* to read
-// Include sub-documents (if any)
-// -----------------------------------------------------------------------------
-// [role="notranslate"]
-[role="mt-5"]
-== Lightbox blocks
-A lightbox is, in general, a helper which displays enlarged, almost
-screen-filling versions of images (or videos) while dimming the remainder
-of the page. The technique, introduced by Lightbox2, gained widespread
-popularity thanks to its simple style. The term lightbox has been employed
-since then for Javascript libraries to support such functionality.
-For the J1 Template, different lightboxes are available:
-* Lightbox2
-* LightGallery
-* Slick Lightbox (for Slick Carousels only)
-The *default* tool employed by J1 Template is Lightbox2, a Javascript library
-written by _Lokesh Dhakar_. For more complex use cases, like a thumbnail
-gallery preview or video support, *LightGallery* can be used alternatively.
-NOTE: The name LightGallery implies a sort of a Gallery, but the library is a
-_lightbox_, and provides more functionality on image-based data rather than
-enlarged displaying of images.
-All lightboxes are fully integrated to be used as a standalone module or
-used as helpers *under-the-hood* by modules focussing on image-data like
-gallerys or carousels.
-TIP: For details of the default lightbox of J1 Template, see the documentation
-under the link:{url-j1-docs--lightbox-module}[Lightbox module, {browser-window--new}].
-[role="mt-4"]
-=== Lightbox examples
-[role="mb-4"]
-Find below an example of using the lightbox used for standalone images.
-See how single (individual) images are linked.
-.Lightbox for standalone images
-lightbox::example-standalone[ 800, {data-images-standalone}, role="mb-4" ]
-[role="mb-4"]
-The J1 lightbox module supports image groups as well. Click on the image
-group below to see how a group of images is managed.
-.Lightbox for grouped images
-lightbox::example-group[ 395, {data-images-group}, group, role="mb-4 wm-800" ]
-[role="mt-4"]
-=== LightGallery example
-LightGallery provides more complex functions on image data. The module
-supports a gallery-style thumbnail preview plus image resizing, a download
-dialog, sharing provider support, and more helpful. Check what
-LightGallery can do this by the following example.
-gallery::jg_old_times[ role="mb-4 wm-800" ]
-[role="mt-5"]
-== J1 Carousel
-J1 Carousel is based on OWL Carousel V1 in the latest (and unfortunately
-last) version of 1.3.3. OWL Carousel is a clean and neat _jQuery_ slider
-plugin for creating fully responsive and touch-enabled carousel sliders.
-////
-NOTE: OWL Carousel V1 is no longer available on the Internet; for an
-unknown reason. Anyway, the J1 Template is using this version of OWL
-Carousel is a build-in carousel module because the software does an excellent
-job, is based on an MIT license with no issues using them for private and
-business use. And offers a lot of great features!
-////
-[role="mt-4"]
-=== Simple Text Carousel
-[role="mb-4"]
-A slider or carousel is typically used for displaying images. Still, the
-implementation for the J1 Template supports a lot more sources to be
-displayed as a slide show: simple text, for example.
-.Text Carousel
-carousel::demo_text_carousel[role="mb-4"]
-Important statements or topics can be placed, e.g., on top of an article or
-a paragraph, to give them better visibility. In one line, you can present
-many facts to know animated for the reader's attention within a single
-line. No much space is needed!
-[role="mt-4"]
-=== Parallax Text Carousel
-[role="mb-4"]
-A more eye-minded type of text-based slide show is a parallax text slider. If
-you want to emphasize your statements focussing the meaning, this kind of a
-slide show may be interesting. Image-based slide shows may draw off the
-reader's attention from the text, therefore a pure text-based presentation
-maybe the better choice.
-.Parallax Text
-carousel::demo_text_carousel_parallax[role="mb-4"]
-Parallax text shows can be placed as banners on a page. For text shows,
-different animations are available. Internally, J1 Template uses some of
-the great CSS styles offered by _animate.css_.
-TIP: Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page, {browser-window--new}]
-to see all the possible dynamic styles you can create based on pure CSS.
-Some of them are implemented for the J1 Carousel for animation. See the
-documentation for the
-link:{url-j1-docs--carousel-module}[Carousel module, {browser-window--new}]
-for more details.
-[role="mt-4"]
-=== Simple Image Carousel
-Carousels are mostly used for pictures data to animate the images as a series.
-Find with the following some examples of how to use a carousel for your image
-data.
-A simple image show is useful, for example, as an animated (or not animated)
-banner presenting exciting things about your site or the products offered.
-.Image Carousel
-carousel::demo_simple[role="mb-4"]
-[role="mt-4"]
-=== Carousel + Caption + Lightbox
-Carousels are used for an exceptionally compact form of image galleries.
-This example shows some pictures having individual caption text and supports
-a lightbox to enlarge images full size. For the example below, an almost simple
-lightbox is used: Lightbox2; or short: lightbox.
-.Image Carousel + Lightbox
-carousel::demo_cats[role="mb-3"]
-The J1 module lightbox is a simple Lightbox but offers a bunch of impressive
-features for displaying images. For example, the lightbox can display all
-images (of a carousel) as a group. If one picture is opened in the lightbox,
-others are browsed by easy-to-use control buttons.
-[role="mt-4"]
-=== One Slide Carousel + Lightbox
-The build-in Carousel carousel supports multiple and single image shows.
-Here you find an example of a single image slide show with controls enabled
-to browse all images back and forth. An indicator below the slider shows how
-many images the show contains.
-.One Slide Carousel
-carousel::demo_oneslide[role="mb-4"]
-[role="mt-5"]
-== J1 Slick Carousel
-[role="mb-4"]
-_Slick_ is a popular jQuery plugin for creating responsive and fully
-customizable carousels. It allows developers to easily create beautiful
-and dynamic carousels that can display images, videos, or any other type
-of content in a visually appealing way. The plugin is designed to be
-lightweight, fast, and easy to use, making it a popular choice for all web
-developers. It has many features, including multiple navigation options,
-lazy loading, or autoplay. Slick carousels are compatible with all modern
-browsers and devices, making it a great choice to create a responsive and
-mobile-friendly website.
-[role="mt-4"]
-=== Image Carousel
-[role="mb-4"]
-An _Slick_ image carousel typically consists of a container with images and
-a navigation system, including buttons, arrows, or dots that allow users to
-move back and forth between images or select a specific image. Image carousels
-can also include animation effects, such as fade-in or slide-in transitions
-between images, to make the presentation more engaging and visually appealing.
-.Carousel + Arrows + Dots + Captions + Lightbox
-slick::image_carousel_full[role="mb-5"]
-[role="mt-4"]
-=== Carousel from Collections
-[role="mb-4"]
-A carousel from a collection for J1 Template is a *pre-defined* carousel
-type to display collection *articles* on a webpage as a carousel. Collection
-carousels pull content from a specific *collection*. All Carousels
-for collections display the article image and a link to the article as a
-caption. All Slick carousels for the J1 Template can be easily customized in
-various ways, such as changing the slider speed, or the navigation options
-like *Arrows* and *Dots*.
-.Collection Biography + Arrows + Dots + Gutters
-slick::collection_carousel_biography[role="mb-5"]
-[role="mt-4"]
-Carousel from Posts
-A Carousel from posts for J1 Template is a *pre-defined* carousel type to
-display post articles on a webpage. It is a popular way to showcase a
-selection of post articles visually appealingly and can be useful for
-highlighting important or *featured* content for your posts content.
-[role="mb-4"]
-Post carousels pull news articles from a specific *group*. All Carousels for
-posts display the post category, the title, the author information and
-date. All Slick carousels for the J1 Template can be easily customized in
-various ways, such as changing the number of posts displayed, the slider
-speed, or the navigation options like *Arrows* and *Dots*.
-.Asciidoc configuration
-[source, config, role="noclip mb-3"]
-----
-slick::post_carousel_featured[]
-----
-.Post Carousel (Featured Posts)
-slick::post_carousel_featured[role="mb-4"]
-[role="mt-4"]
-=== More about Slick Carousels
-[role="mb-4"]
-If you're interested to learn more about _Slick_, go previewer page
-link:{url-j1-slick-previewer}[Slick Previewer, {browser-window--new}],
-[#masterSlider]
-[role="mt-5"]
-== J1 Master Slider
-The Javascript tool _Master Slider_ is a 3rd party plugin fully integrated
-into the J1 Template by the module `masterslider`. J1 Template uses the
-*free* version of Master Slider (MS Lite). The Lite version does *not* support
-all features: the functionality of  *filters*, *layouts* are limited and no
-*overlay* techniques are supported by the MS Lite version.
-// WARNING: The Master Slider (MS Lite and Pro version) is a so-called _jQuery_
-// Plugin. _jQuery_ can simplify Javascript code a lot but will slow-down
-// the runtime performance of the JS code. Expect for slower browsers and
-// platforms, like mobiles or tablets, initializing an MS Slider will take
-// a while to be finished.
-[role="mt-4"]
-[#carousel_versus_slider]
-=== Carousel versus Slider
-Sliders and Carousels are focussing quite the same thing: presenting image data
-dynamically as an app. The features of Sliders go far beyond what simple
-Carousels can do: presenting image-based data as *slideshows*. Well-known
-Office Products to create *presentations* are _Microsoft Powerpoint_ or
-_Google Docs_. Modern sliders like _Master Slider_ provide similar features to
-present animated *shows* (presentations) based on digital image data combined
-with text elements, buttons, or overlay techniques, e.g., for images or
-other digital data sources.
-In short: Carousels are used to present images, and sliders are used to create
-complex image-based slideshows (presentations).
-TIP: For more details of the dimplementation of Master Slider of J1 Template, see
-find  documentation at
-link:{url-j1-docs--masterslider-module}[Master Slider module, {browser-window--new}].
-[role="mt-4"]
-[#controls_filters_lightbox]
-=== MS Slider using Controls + Filters + Lightbox
-The following slider uses the (CSS) filter feature of Master Slider.
-Filters can be used, for example, to *transform* the *style* of the images
-presented by a slider. In this example, the slider images are transformed
-from style *color* to *sepia*.
-WARNING: Lightbox support is only available for the MS Lite version of J1
-Theme. The product versions *MS Lite* and *MS Pro* does not support
-Lightboxes on sliders out-of-the-box.
-TIP: Click on the Lightbox symbol mdi:image-outline[18px, md-gray] in the
-slides to see the *colored* images configured for the slider.
-.Slider using Controls
-masterslider::ms_00001[role="mb-5"]
-[role="mt-4"]
-[#text_elements]
-=== MS Slider using Text Elements (MSInfo)
-One of the major features of sliders is to present additional (animated)
-elements, like text data, connected to the images presented by a slider:
-the slideshow. MS Slider provides functions to combine images and text
-elements: the MSInfo element.
-.Slider using Text Elements
-masterslider::ms_00003[role="mb-5"]
-[role="mt-4"]
-[#thumb_images]
-=== MS Slider using ThumbImages
-To give the users better control over a slideshow, sliders provide complex UI
-elements like *thumbs* placed side-by-side (left|right), at the top, or at
-the bottom of a slideshow. Find two examples to control a slideshow by
-*thumb images*.
-.Slider using ThumbImages
-masterslider::ms_00004[role="mb-5"]
-[role="mt-4"]
-[#thumb_info]
-=== MS Slider using ThumbInfo
-To give the users better control over a slideshow, MS Slider provides
-complex UI elements like thumbs placed side-by-side (left|right), at the
-top, or at the bottom of a slideshow.
-.Slider using ThumbInfo
-masterslider::ms_00007[role="mb-5"]
-[role="mt-4"]
-[#partialview]
-=== MS Slider using Layout partialview
-The following slider presents a slideshow that combines an MSInfo element
-at the bottom and the MS Layout `partialview`. A slideshow typically presents
-a larger number of slides. The layout `partialview` accompanies the active
-slide by their neighbors on the left and the right.
-.Slider using Layout partialview
-masterslider::ms_00009[role="mb-5"]
-[role="mt-4"]
-[#more_about_masterslider]
-=== More about Master Slider
-If you're interested to learn more about MS Slider, go for the following
-documents:
-* MS Slider link:{url-j1-masterslider-previewer}[Previewer, {browser-window--new}]
-* MS Slider link:{url-j1-docs--masterslider-module}[Module documentation, {browser-window--new}]
-[role="mt-5"]
-== JustifiedGallery
-link:{url-justified-gallery--home}[JustifiedGallery, {browser-window--new}]
-is a great _jQuery_ Plugin to create responsive, infinite, and high-quality
-justified image galleries. J1 Template combines the Gallery with the lightboxes
-supported to enlarge the images of a gallery. See the gallery in action; and
-for sure, all that you see is even responsive. Change the size of your current
-browser window, by width or height to see what will happen!
-[role="mb-4"]
-Pictures you've made are typically not even in size. Images may have the
-same size (resolution), but some are orientated landscapes, or others
-may be portraits. For that reason, a more powerful gallery is needed to create
-so-called justified views. JustifiedGallery uses a so-called masonry grid
-layout. It works by placing elements in an optimal position based on available
-horizontal and vertical space. Sort of like mason fitting stones in a wall.
-You'll have seen it in use all over the Internet!
-.Masonry Grid Gallery
-gallery::jg_customizer[role="mb-5"]
-[role="mt-5"]
-== What next
-Hopefully, you've enjoyed exploring the possibilities J1 offers for managing
-and displaying digital image content. But much, much more can the J1 do for
-your web.
-The J1 Template support playing video on web pages by HTML5 Video, the new
-standard of HTML. HTML5 Video implements a pure HTML way to show video on
-the web. Modern browsers support the video tag `<video>` for the HTML5 video
-standard. The previous proprietary de facto standard software like Flash
-Player, Quicktime, or Silverlight is no longer needed as the Jekyll theme
-JekyllOne provides HTML5 Video support for local video content and from
-online sources on the Internet.
-Incredible? See the next example page link:{url-roundtrip--present-videos}[Present Videos].
+---
+title:                                  Image
+title_extention:                        Lightboxes, Carousels, Sliders, and Galleries for J1 Template
+tagline:                                Present Images
+date:                                   2020-11-03
+#last_modified:                         2023-01-01
+description: >
+                                        J1 Template support valuable features to manage your image-based
+                                        content using lightboxes, carousels, sliders, and galleries.
+                                        The image modules of J1 Template offer a wide range of complex
+                                        functionality based on powerful OpenSource libraries like
+                                        Lightbox2, Master Slider, LightGallery, or JustifiedGallery
+                                        for high-end, masonry-styled preview maps.
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap,
+                                        image, lightbox, carousel, slider, gallery,
+                                        lightbox2, master slider, lightgallery, justifiedgallery
+categories:                             [ Roundtrip ]
+tags:                                   [ Module, Carousel, Lightbox, Image, Slider, Slick ]
+image:
+  path:                                 /assets/images/modules/attics/1920x1280/quino-al-2.jpg
+  width:                                1920
+  height:                               1280
+regenerate:                             false
+permalink:                              /pages/public/learn/roundtrip/present_images/
+resources:                              [
+                                          animate, clipboard, carousel, comments,
+                                          justifiedGallery, lightbox, lightGallery,
+                                          masterslider, masonry, rouge, slick
+                                        ]
+resource_options:
+  - attic:
+      slides:
+        - url:                          /assets/images/modules/attics/1920x1280/quino-al-2.jpg
+          alt:                          Photo by Quino Al Angel on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Quino Al Angel
+            href:                       https://unsplash.com/@quinoal
+---
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:url-lightbox2--home:                   https://lokeshdhakar.com/projects/lightbox2/
+:url-lightbox2--github:                 https://github.com/lokesh/lightbox2/
+:url-justified-gallery--home:           https://miromannino.github.io/Justified-Gallery/
+:url-justified-gallery--github:         https://github.com/miromannino/Justified-Gallery/
+:url-j1-docs--carousel-module:          https://jekyll.one/pages/public/manuals/modules/carousel/
+:url-j1-docs--lightbox-module:          https://jekyll.one/pages/public/manuals/modules/lightbox/
+:url-j1-docs--masterslider-module:      https://jekyll.one/pages/public/manuals/modules/masterslider/
+:url-j1-masterslider-previewer:         https://jekyll.one/pages/public/tools/previewer/masterslider/
+:url-j1-slick-previewer:                https://jekyll.one/pages/public/tools/previewer/slick/
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[role="dropcap"]
+Welcome to the preview page focussing on image modules. This page shows
+all the valuable features of the J1 Template to manage your image-based
+content using lightboxes, carousels, sliders, grids, and galleries.
+The image-related modules of the J1 Template offer a wide range of complex
+functionality based on powerful Open Source libraries like Lightbox V2,
+Slick Slider, Master Slider, or Masonry Grid and JustifiedGallery to create
+masonry-styled preview maps.
+mdi:clock-time-five-outline[24px, md-gray mt-4 mr-2]
+*15-30 Minutes* to read
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+// [role="notranslate"]
+[role="mt-5"]
+== Lightboxes
+A Lightbox is a helper which displays enlarged, almost screen-filling versions
+of images while dimming the remainder of the page. The technique, introduced
+by Lightbox V2, gained widespread popularity thanks to its simple style. The
+term *Lightbox* has been employed since then for Javascript libraries to
+support such functionality.
+For J1 Template, different lightbox modules are available:
+* Lightbox V2 (default)
+* LightGallery Lightbox (optional)
+* Slick Lightbox (for Slick Carousels only)
+The *default* tool employed by J1 Template is Lightbox V2, a Javascript
+library written by _Lokesh Dhakar_. For more complex use cases, like a
+thumbnail gallery preview or video support, *LightGallery* can be used
+alternatively.
+All Lightboxes are fully integrated to be used as standalone modules or
+used as helpers *under-the-hood* by other modules focussing on image-data
+like gallerys or carousels.
+[TIP]
+====
+For details of the default lightbox of J1 Template, see the documentation
+under the link:{url-j1-docs--lightbox-module}[Lightbox module, {browser-window--new}].
+====
+[role="mt-4"]
+=== Default Lightbox
+[role="mb-4"]
+Find below an example of using the rhe default lightbox used for standalone
+images. See how single (individual) images are linked.
+.Lightbox for standalone images
+lightbox::example-standalone[ 800, {data-images-standalone}, role="mb-4" ]
+[role="mb-4"]
+The J1 lightbox module supports groups of images as well. Click on the image
+group below to see how a group is managed.
+.Lightbox for grouped images
+lightbox::example-group[ 395, {data-images-group}, group, role="mb-4 wm-800" ]
+[role="mt-5"]
+=== LightGallery
+LightGallery provides more complex image data functions than the default
+lightbox. The module supports a gallery-style thumbnail preview plus image
+resizing, a download dialog, sharing provider support, and more helpful.
+[NOTE]
+====
+The name LightGallery implies a sort of a Gallery, but the library is a
+_lightbox_, and provides enhannced functionality on image-based data rather
+than enlarged displaying of images.
+====
+Check what LightGallery can do this by the following example.
+gallery::jg_old_times[]
+[role="mt-5"]
+== J1 Carousel
+J1 Carousel is based on OWL Carousel V1 in the latest version. OWL Carousel
+is a clean and neat _jQuery_ slider plugin for creating fully responsive and
+touch-enabled carousel sliders.
+[role="mt-4"]
+=== Simple Text Carousel
+[role="mb-4"]
+A slider or carousel is typically used for displaying images. Still, the
+implementation for the J1 Template supports a lot more sources to be
+displayed as a slide show: simple text, for example.
+.Text Carousel
+carousel::demo_text_carousel[role="mb-4"]
+Important statements or topics can be placed, e.g., on top of an article or
+a paragraph, to give them better visibility. In one line, you can present
+many facts to know animated for the reader's attention within a single
+line. No much space is needed!
+[role="mt-4"]
+=== Parallax Text Carousel
+[role="mb-4"]
+A more eye-minded type of text-based slide show is a parallax text slider. If
+you want to emphasize your statements focussing the meaning, this kind of a
+slide show may be interesting. Image-based slide shows may draw off the
+reader's attention from the text, therefore a pure text-based presentation
+maybe the better choice.
+.Parallax Text
+carousel::demo_text_carousel_parallax[role="mb-4"]
+Parallax text shows can be placed as banners on a page. For text shows,
+different animations are available. Internally, J1 Template uses some of
+the great CSS styles offered by _animate.css_.
+[TIP]
+====
+Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page, {browser-window--new}]
+to see all the possible dynamic styles you can create based on pure CSS.
+Some of them are implemented for the J1 Carousel for animation. See the
+documentation for the
+link:{url-j1-docs--carousel-module}[Carousel module, {browser-window--new}]
+for more details.
+====
+[role="mt-4"]
+=== Simple Image Carousel
+Carousels are mostly used for pictures data to animate the images as a series.
+Find with the following some examples of how to use a carousel for your image
+data.
+A simple image show is useful, for example, as an animated (or not animated)
+banner presenting exciting things about your site or the products offered.
+.Image Carousel
+carousel::demo_simple[role="mb-4"]
+[role="mt-4"]
+=== Carousel + Caption + Lightbox
+Carousels are used for an exceptionally compact form of image galleries.
+This example shows some pictures having individual caption text and supports
+a lightbox to enlarge images full size. For the example below, an almost simple
+lightbox is used: Lightbox2; or short: lightbox.
+.Image Carousel + Lightbox
+carousel::demo_cats[role="mb-3"]
+The J1 module lightbox is a simple Lightbox but offers a bunch of impressive
+features for displaying images. For example, the lightbox can display all
+images (of a carousel) as a group. If one picture is opened in the lightbox,
+others are browsed by easy-to-use control buttons.
+[role="mt-4"]
+=== One Slide Carousel + Lightbox
+The build-in carousel supports multiple and single image shows. Here you find
+an example of a single image slide show with controls enabled to browse all
+images back and forth. An indicator below the slider shows how many images
+the show contains.
+.One Slide Carousel
+carousel::demo_oneslide[role="mb-4"]
+[role="mt-5"]
+== J1 Slick Carousel
+[role="mb-4"]
+_Slick_ is a popular jQuery plugin for creating responsive and fully
+customizable carousels. It allows developers to easily create beautiful
+and dynamic carousels that can display images, videos, or any other type
+of content in a visually appealing way.
+The plugin is designed to be lightweight, fast, and easy to use, making it
+a popular choice for all web developers. It has many features, including
+multiple navigation options, lazy loading, or autoplay. Slick carousels are
+compatible with all modern browsers and devices, making it a great choice to
+create a responsive and mobile-friendly website.
+All Slick carousels for the J1 Template can be easily customized in
+various ways, such as changing the number of posts displayed, the slider
+speed, or the navigation options like *Arrows* and *Dots*.
+[role="mt-4"]
+[[slick-image-carousel]]
+=== Image Carousel
+[role="mb-4"]
+An _Slick_ image carousel typically consists of a container with images and
+a navigation system, including buttons, arrows, or dots that allow users to
+move back and forth between images or select a specific image. Image carousels
+can also include animation effects, such as fade-in or slide-in transitions
+between images, to make the presentation more engaging and visually appealing.
+.Carousel + Arrows + Dots + Captions + Lightbox
+slick::image_carousel_full[]
+[role="mt-4"]
+=== Carousel from Collections
+[role="mb-4"]
+A carousel from a collection for J1 Template is a *pre-defined* element
+type to display *articles* from a Jekyll collection on a webpage. All
+carousels for collections display the article image and a link to the article
+as a caption.
+.Collection Biography + Arrows + Dots + Gutters
+slick::collection_carousel_biography[]
+[role="mt-4"]
+=== Carousel from Posts
+A Carousel from posts for J1 Template is a *pre-defined* carousel type to
+display post articles on a webpage. It is a popular way to showcase a
+selection of post articles visually appealingly and can be useful for
+highlighting important or *featured* content for your posts content.
+[role="mb-4"]
+Post carousels pull news articles from a specific *group*. All Carousels for
+posts display the post category, the title, the author information and
+date.
+.Asciidoc configuration
+[source, config, role="noclip mb-3"]
+----
+slick::post_carousel_featured[]
+----
+.Post Carousel (Featured Posts)
+slick::post_carousel_featured[]
+[role="mt-4"]
+=== More about Slick Carousels
+[role="mb-4"]
+If you're interested to learn more about _Slick_, go previewer page
+link:{url-j1-slick-previewer}[Slick Previewer, {browser-window--new}],
+[role="mt-5"]
+[[masterSlider]]
+== J1 Master Slider
+The Javascript library _Master Slider_ is a 3rd party plugin fully integrated
+into the J1 Template by the module `masterslider`. J1 Template uses the *free*
+version *MS Lite*. The free version of Master Slider does *not* support
+all features: the functionality of  *filters*, *layouts* are limited and no
+*overlay* techniques are supported by MS Lite.
+[role="mt-4"]
+[[carousel_versus_slider]]
+=== Carousel versus Slider
+Sliders and Carousels are focussing quite the same thing: presenting images
+dynamically. The features of Sliders go far beyond what simple carousels can
+do: presenting image-based data as slide *shows*.
+Well-known Office Products to create *presentations* are Powerpoint from
+_Microsoft_ or _Google Docs_. Modern sliders like _Master Slider_ provide
+similar features to present animated presentations based on digital image
+data combined with text elements, buttons, or overlay techniques for images
+or other digital data sources.
+In short: Carousels are used to present images, and sliders are used to create
+complex image-based presentations.
+[TIP]
+====
+For more details of the dimplementation of Master Slider of J1 Template, see
+find  documentation at
+link:{url-j1-docs--masterslider-module}[Master Slider module, {browser-window--new}].
+====
+[role="mt-4"]
+=== Featured MS Slider
+The following slider uses the (CSS) filter feature of Master Slider.
+Filters can be used, for example, to *transform* the *style* of the images
+presented by a slider. In this example, the slider images are transformed
+from style *color* to *sepia*.
+[WARNING]
+====
+Lightbox support is only available for the MS Lite version of J1
+Theme. The product versions *MS Lite* and *MS Pro* does not support
+Lightboxes on sliders out-of-the-box.
+====
+.Slider using Controls + Filters + Lightbox
+masterslider::ms_00002[]
+[role="mt-4"]
+[TIP]
+====
+Click on the Lightbox symbol mdi:image-outline[18px, md-gray] in the
+slides to see the *colored* images configured for the slider.
+====
+[role="mt-4"]
+[[text_elements]]
+=== MS Slider using Text Elements
+One of the major features of sliders is to present additional animated
+elements, like text data, connected to the images presented by an slideshow.
+MS Slider additionally provides functions to combine images and text by
+so-called *MSInfo* blocks out-of-the-box.
+.Slider using Images + Text
+masterslider::ms_00003[]
+[role="mt-4"]
+[[thumb_images]]
+=== MS Slider using ThumbImages
+To give the users better control over a slideshow, sliders provide complex UI
+elements like *thumbs* placed side-by-side (left|right), at the top, or at
+the bottom of a slideshow. Find two examples to control a slideshow by
+*thumb images*.
+.Slider using ThumbImages
+masterslider::ms_00004[]
+[role="mt-4"]
+[[thumb_info]]
+=== MS Slider using ThumbInfo
+To give the users better control over a slideshow, MS Slider provides
+complex UI elements like thumbs placed side-by-side (left|right), at the
+top, or at the bottom of a slideshow.
+.Slider using ThumbInfo
+masterslider::ms_00007[]
+[role="mt-4"]
+[[partialview]]
+=== MS Slider using Layout PartialView
+The following slider presents a slideshow that combines an MSInfo element
+at the bottom and the MS Layout `partialview`. A slideshow typically presents
+a larger number of slides. The layout `partialview` accompanies the active
+slide by their neighbors on the left and the right.
+.Slider using PartialView
+masterslider::ms_00009[]
+[role="mt-4"]
+[[more_about_masterslider]]
+=== More about Master Slider
+If you're interested to learn more about MS Slider, go for the following
+documents:
+* MS Slider link:{url-j1-masterslider-previewer}[Previewer, {browser-window--new}]
+* MS Slider link:{url-j1-docs--masterslider-module}[Module documentation, {browser-window--new}]
+[role="mt-5"]
+== J1 Masonry
+J1 Masonry is based on the popular JavaScript library _Masonry_,  enabling
+the creation of responsive, dynamic grid layouts of *groups* of content
+elements. It uses a unique algorithm to arrange elements vertically, then
+horizontally in a responsive grid.
+The module provides a flexible configuration to enabling developers to
+customize the layout, adjust the column width, gutter size, and add
+animations.
+[role="mt-4"]
+=== Grid of Images
+Bootstrap cards are a popular component of the Bootstrap front-end framework
+that provides a flexible and customizable way to display content on a website.
+Find an example below of how Bootstrap cards can be combined with the Masonry
+module for a fully responsive image grid.
+[TIP]
+====
+Resize your browser window for the width to see the J1 Masonry module
+in action.
+====
+.Grid of Images
+masonry::card_example[]
+[role="mt-5"]
+== JustifiedGallery
+link:{url-justified-gallery--home}[JustifiedGallery, {browser-window--new}]
+is a great _jQuery_ Plugin to create responsive, infinite, and high-quality
+justified image galleries. J1 Template combines the Gallery with the lightboxes
+supported to enlarge the images of a gallery. See the gallery in action; and
+for sure, all that you see is even responsive. Change the size of your current
+browser window, by width or height to see what will happen!
+[role="mb-4"]
+Pictures you've made are typically not even in size. Images may have the
+same size (resolution), but some are orientated landscapes, or others
+may be portraits. For that reason, a more powerful gallery is needed to create
+so-called justified views. JustifiedGallery uses a so-called masonry grid
+layout. It works by placing elements in an optimal position based on available
+horizontal and vertical space. Sort of like mason fitting stones in a wall.
+You'll have seen it in use all over the Internet!
+.Masonry Grid Gallery
+gallery::jg_customizer[]
+[role="mt-5"]
+== What next
+Hopefully, you've enjoyed exploring the possibilities J1 offers for managing
+and displaying digital image content. But much, much more can the J1 do for
+your web.
+The J1 Template support playing video on web pages by HTML5 Video, the new
+standard of HTML. HTML5 Video implements a pure HTML way to show video on
+the web. Modern browsers support the video tag `<video>` for the HTML5 video
+standard. The previous proprietary de facto standard software like Flash
+Player, Quicktime, or Silverlight is no longer needed as the Jekyll theme
+JekyllOne provides HTML5 Video support for local video content and from
+online sources on the Internet.
+Incredible? See the next example page link:{url-roundtrip--present-videos}[Present Videos].