RubyGems - j1-template - Versions diffs - 2024.1.5 → 2024.2.0 - Mend

j1-template 2024.1.5 → 2024.2.0

Files changed (193) hide show

data/lib/starter_web/pages/public/{legal/learn → learn}/roundtrip/present_images.adoc RENAMED Viewed

@@ -1,507 +1,500 @@
----
-title:                                  Image Content
-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 Open Source libraries like
-                                        Lightbox V2, Master Slider, lightGallery, or Justified Gallery
-                                        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,
-                                          carousel, gallery, 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:                       //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-slick-previewer:                https://jekyll.one/pages/public/tools/previewer/slick/
-:url-j1-masonry-previewer:              https://jekyll.one/pages/public/tools/previewer/masonry/
-:url-j1-masterslider-previewer:         https://jekyll.one/pages/public/tools/previewer/masterslider/
-:url-j1-lightgallery-previewer:         https://jekyll.one/pages/public/tools/previewer/lightgallery/
-//  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 of the powerful 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 Version 2,
-lightGallery Version 2, Slick Slider, Master Slider, or Masonry and
-Justified-Gallery to create masonry-styled preview maps.
-mdi:clock-time-five-outline[24px, md-gray mt-5 mr-2]
-*10-15 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 Version 2, 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 Version 2 (default)
-* lightGallery Version 2 (optional)
-* Slick Lightbox (optional, currently for Slick Carousels only)
-The *default* tool employed by J1 Template is Lightbox V2, a Javascript
-library written by _Lokesh Dhakar_ free to use for private or business
-websites. For more complex use cases, like a thumbnail gallery preview or
-video support, *lightGallery* can be used alternatively.
-[CAUTION]
-====
-lightGallery is *free* to use based on a GPLv3 license for *non-business*
-websites. If you have plans to use this lightbox for your business or on a
-commercial site, you need to subscribe a so-called *Commercial License*. Find
-more on the *paid* solution on the page:
-https://www.lightgalleryjs.com/license[lightGallery license, {browser-window--new}].
-====
-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-5"]
-=== Default Lightbox
-Find below an example of using the the default lightbox used for standalone
-images. See how individual images are linked.
-.Lightbox for standalone images
-lightbox::example-standalone[ 800, {data-images-standalone}, role="mt-4 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="mt-4 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.
-.J1 Gallery + lightGallery
-gallery::jg_old_times[]
-[role="mt-5"]
-== J1 Carousel
-J1 Carousel is based on OWL Carousel V1 in the latest version. The carousel
-is a powerful jQuery plugin for creating fully responsive and touch-enabled
-carousel slideshows.
-[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 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.
-[role="mt-4"]
-=== Parallax Text Carousel
-[role="mb-4"]
-A more emphasized type of text-based carousel is a parallax text slider. If
-you want to focus 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-5"]
-=== 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-5"]
-[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.
-.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 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, apib, 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]]
-== Masterslider
-Masterslider is a jQuery plugin fully integrated into the J1 Template.
-Jekyll One uses the *free* version of Masterslider well-known as MS Lite.
-The lite version does *not* support all features of the full product.
-The functionality of filters and  layouts are limited and no overlay
-techniques are supported by the MS Lite version.
-[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 implementation of Master Slider for J1 Template, find
-more helpful information at the page
-link:{url-j1-docs--masterslider-module}[Master Slider module, {browser-window--new}].
-====
-[role="mt-5"]
-=== 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 Template.
-The original 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 mb-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-5"]
-[[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 mb-5"]
-[role="mt-4"]
-[[thumb_images]]
-=== Slider using Thumb Elements
-To give the users better control over a slideshow, sliders provide complex UI
-elements to place dor example mini-images or short text elements side-by-side
-left or right, or at the bottom of a slideshow. Find two examples below how
-to control such a carousel element.
-.Image controls
-masterslider::ms_00004[role="mt-4 mb-5"]
-.Text controls
-masterslider::ms_00007[role="mt-4 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 PartialView
-masterslider::ms_00009[role="mt-4 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"]
-== J1 Masonry
-Masonry for J1 is a great tool to create dynamic image galleries. Image
-galleries are popular on many websites, and masonry can be a useful tool for
-creating dynamic galleries.
-By using the Masonry module, you can create a gallery that displays images of
-different sizes in an aesthetically pleasing and functional way.
-.Masonry Grid of Images + Lightbox
-masonry::image_fixed_height_lb[role="mt-4 mb-4"]
-[TIP]
-====
-Find more on how the Masonry module can be used on the
-link:{url-j1-masonry-previewer}[Masonry Preview, {browser-window--new}] page.
-====
-[role="mt-5"]
-== J1 Gallery
-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. J1 Gallery is based on Justified Gallery to create
-so-called masonry grid layouts.
-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.
-For sure, you'll have seen it in action all over the Internet.
-.J1 Gallery of Images + lightGallery
-gallery::jg_mega_cities[role="mt-4 mb-4"]
-[role="mt-5"]
-== What next
-I hope, 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 audio and video on web pages by using the
-HTML5 audio and video support, the new standard of HTML. HTML5 implements a
-pure HTML way to show play audio or playing video on the web. Modern browsers
-support the audio tag `<audio>` and the video tag `<video>` for the HTML5
-standard.
-The previous proprietary de facto standard software like a Flash Player,
-Quicktime, or Silverlight is no longer needed as the Theme JekyllOne provides
-HTML5 video for local content and from online sources on the Internet.
-[role="mb-7"]
-Incredible? See the next example page link:{url-roundtrip--present-audio-video}[Present Audio and Video].
+---
+title:                                  Image Content
+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 Open Source libraries like
+                                        Lightbox V2, Master Slider, lightGallery, or Justified Gallery
+                                        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,
+                                          carousel, gallery, lightbox, lightgallery,
+                                          masterslider, masonry, rouge, slick
+                                        ]
+resource_options:
+  - toccer:
+      collapseDepth:                    4
+  - 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:                       //unsplash.com/@quinoal
+---
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+//  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 of the powerful 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 Version 2,
+lightGallery Version 2, Slick Slider, Master Slider, or Masonry and
+Justified-Gallery to create masonry-styled preview maps.
+mdi:clock-time-five-outline[24px, md-gray mt-5 mr-2]
+*10-15 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 Version 2, 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 Version 2 (default)
+* lightGallery Version 2 (optional)
+* Slick Lightbox (optional, currently for Slick Carousels only)
+The *default* tool employed by J1 Template is Lightbox V2, a Javascript
+library written by _Lokesh Dhakar_ free to use for private or business
+websites. For more complex use cases, like a thumbnail gallery preview or
+video support, *lightGallery* can be used alternatively.
+[CAUTION]
+====
+lightGallery is *free* to use based on a GPLv3 license for *non-business*
+websites. If you have plans to use this lightbox for your business or on a
+commercial site, you need to subscribe a so-called *Commercial License*. Find
+more on the *paid* solution on the page:
+https://www.lightgalleryjs.com/license[lightGallery license, {browser-window--new}].
+====
+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-5"]
+=== J1 Lightbox
+Find below an example of using the the default lightbox used for standalone
+images. See how individual images are linked.
+.Lightbox for standalone images
+lightbox::example-standalone[800, {data-images-standalone}, role="mt-4 mb-5"]
+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="mt-4 mb-4 wm-800"]
+[role="mt-5"]
+=== J1 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.
+Check what lightGallery can do this by the following example.
+.J1 Gallery + lightGallery
+gallery::jg_old_times[role="mt-4 mb-4"]
+.lightGallery - Gallery or Lightbox
+[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.
+====
+[role="mt-5"]
+== J1 Carousel
+J1 Carousel is based on OWL Carousel V1 in the latest version. The carousel
+is a powerful jQuery plugin for creating fully responsive and touch-enabled
+carousel slideshows.
+[role="mt-4"]
+=== Text Carousels
+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.
+[role="mt-4"]
+==== Base Text Carousel
+Important statements or topics can be placed 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.
+.Base Text Carousel
+carousel::demo_text_carousel[role="mb-4"]
+[role="mt-4"]
+==== Parallax Text Carousel
+A more emphasized type of text-based carousel is a parallax text slider. If
+you want to focus 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
+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-5"]
+=== Image Carousels
+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-5"]
+[role="mt-4"]
+==== Image Carousel + 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.
+.Image Carousel + Lightbox
+carousel::demo_cats[role="mt-4 mb-5"]
+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 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 mb-5"]
+[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 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.
+.Asciidoc configuration
+[source, apib, role="noclip mb-3"]
+----
+slick::post_carousel_featured[]
+----
+.Posts Carousel
+slick::post_carousel_featured[role="mt-5 mb-5"]
+[role="mt-4"]
+.More about Slick Carousels
+[TIP]
+====
+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 Masterslider
+Masterslider is a jQuery plugin fully integrated into the J1 Template.
+Jekyll One uses the *free* version of Masterslider well-known as MS Lite.
+The lite version does *not* support all features of the full product.
+The functionality of filters and  layouts are limited and no overlay
+techniques are supported by the MS Lite version.
+[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 implementation of Master Slider for J1 Template, find
+more helpful information at the page
+link:{url-j1-docs--masterslider-module}[Master Slider module, {browser-window--new}].
+====
+[role="mt-5"]
+=== 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 Template.
+The original 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-5 mb-5"]
+[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-5"]
+[[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 mb-5"]
+[role="mt-4"]
+[[thumb_images]]
+=== Slider using Thumb Elements
+To give the users better control over a slideshow, sliders provide complex UI
+elements to place dor example mini-images or short text elements side-by-side
+left or right, or at the bottom of a slideshow. Find two examples below how
+to control such a carousel element.
+.Image controls
+masterslider::ms_00004[role="mt-4 mb-5"]
+.Text controls
+masterslider::ms_00007[role="mt-4 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 PartialView
+masterslider::ms_00009[role="mt-4 mb-5"]
+[role="mt-4"]
+.More about Master Slider
+[TIP]
+====
+If you're interested to learn more about Master 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
+Masonry for J1 is a great tool to create dynamic image galleries. Image
+galleries are popular on many websites, and masonry can be a useful tool for
+creating dynamic galleries.
+By using the Masonry module, you can create a gallery that displays images of
+different sizes in an aesthetically pleasing and functional way.
+.Grid of Images
+masonry::image_fixed_height_lb[role="mt-4 mb-5"]
+.More about Masonry
+[TIP]
+====
+Find more on how the Masonry module can be used on the
+link:{url-j1-masonry-previewer}[Masonry Preview, {browser-window--new}] page.
+====
+[role="mt-5"]
+== J1 Gallery
+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. J1 Gallery is based on Justified Gallery to create
+so-called masonry grid layouts.
+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.
+For sure, you'll have seen it in action all over the Internet.
+.J1 Gallery of Images + lightGallery
+gallery::jg_mega_cities[role="mt-4 mb-4"]
+[role="mt-5"]
+== What next
+I hope, 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 audio and video on web pages by using the
+HTML5 audio and video support, the new standard of HTML. HTML5 implements a
+pure HTML way to show play audio or playing video on the web. Modern browsers
+support the audio tag `<audio>` and the video tag `<video>` for the HTML5
+standard.
+The previous proprietary de facto standard software like a Flash Player,
+Quicktime, or Silverlight is no longer needed as the Theme JekyllOne provides
+HTML5 video for local content and from online sources on the Internet.
+[role="mb-7"]
+Incredible? See the next example page link:{url-roundtrip--present-audio-video}[Present Audio and Video].