j1_template_mde 2018.4.10

data/lib/starter_web/pages/start/kickstarter/web_in_a_day/_unused/30_j1_configure_your_site.asciidoc

@@ -0,0 +1,48 @@
+---
+title:                                  Kickstart
+tagline:                                Build Web sites using J1 Template
+description:                            Build Web sites using J1 Template
+
+tags:
+category:
+
+resources:                              [ lightbox, carousel ]
+
+resource_options:
+  - j1_tocbot:
+      collapseDepth:                    2
+      
+permalink:                              /kickstart/jekyll_in_a_day/configure_your_site
+regenerate:                             false
+---
+
+:imagesdir:                             /assets/images/articles/tutorials/j1_level_100
+
+// URLs
+:tao-of-programming:                    http://www.canonical.org/~kragen/tao-of-programming.html
+
+[.boxShadow]
+====
+Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
+consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
+vulputate eget, arcu.
+
+In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
+felis eu pede mollis pretium. Integer tincidunt.
+====
+
+== Asciidoc, HTML5 and Bootstrap
+
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
+Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
+ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
+Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate 
+eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+
+== The HTML5 Backend
+
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
+Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
+ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
+Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate 
+eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

data/lib/starter_web/pages/start/kickstarter/web_in_a_day/_unused/40_j1_create_content.asciidoc

@@ -0,0 +1,48 @@
+---
+title:                                  Kickstart
+tagline:                                Create HTML Documents using Asciidoc
+description:                            Create Content
+
+tags:
+category:
+
+resources:                              [ lightbox, carousel ]
+
+resource_options:
+  - j1_tocbot:
+      collapseDepth:                    2
+
+permalink:                              /kickstart/jekyll_in_a_day/create_content
+regenerate:                             false
+---
+
+:imagesdir:                             /assets/images/articles/tutorials/j1_level_100
+
+// URLs
+:tao-of-programming:                    http://www.canonical.org/~kragen/tao-of-programming.html
+
+[.boxShadow]
+====
+Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
+consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
+vulputate eget, arcu.
+
+In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
+felis eu pede mollis pretium. Integer tincidunt.
+====
+
+== Asciidoc, HTML5 and Bootstrap
+
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
+Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
+ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
+Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate 
+eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+
+== The HTML5 Backend
+
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
+Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
+ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
+Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate 
+eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

data/lib/starter_web/pages/start/kickstarter/web_in_a_day/_unused/50_j1_customize_your_pages.asciidoc

@@ -0,0 +1,48 @@
+---
+title:                                  Kickstart
+tagline:                                Configure Jekyll and J1 for your needs
+description:                            Jekyll Configuration
+
+tags:
+category:
+
+resources:                              [ lightbox, carousel ]
+
+resource_options:
+  - j1_tocbot:
+      collapseDepth:                    2
+
+permalink:                              /kickstart/jekyll_in_a_day/customize_your_pages
+regenerate:                             false
+---
+
+:imagesdir:                             /assets/images/articles/tutorials/j1_level_100
+
+// URLs
+:tao-of-programming:                    http://www.canonical.org/~kragen/tao-of-programming.html
+
+[.boxShadow]
+====
+Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
+consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
+vulputate eget, arcu.
+
+In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
+felis eu pede mollis pretium. Integer tincidunt.
+====
+
+== Configuration Basics
+
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
+Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
+ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
+Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate 
+eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+
+== AxB Attributes
+
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
+Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
+ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
+Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate 
+eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

data/lib/starter_web/pages/start/read_me_first.adoc

@@ -0,0 +1,102 @@
+---
+title:                                  ReadMe First
+tagline:                                J1 Template
+description:                            Important information you should know upfront
+
+tags:                                   []
+resources:                              [ lightbox ]
+permalink:                              /pages/start/read_me_first/
+regenerate:                             false
+---
+
+// Enable the Liquid Preprocessor
+//
+:page-liquid:
+
+// Set other global page attributes here                                          
+// -------------------------------------------------------------------
+
+
+{% comment %} Liquid procedures
+--------------------------------------------------------------- {% endcomment %}
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+
+
+// NOTE: Initialize entry document paths
+//
+{% include {{set_env_entry_document}} init_folders=all %}
+
+// Load tags and urls
+//
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+
+// Additional Asciidoc page attributes goes here
+//
+
+Welcome to the Web Pages of J1 Template. If your here first time,
+hopefully you get on that page first - the *ReadMe First* of the *Start*
+section. For sure, there is no better place to start.
+
+Having a menu system is great. We hope the the Navigator of J1 will help
+you to explore this site, find what your are looking for. The site of J1
+has grown over the last month a lot. Many documents where seeking for a home.
+And we have really a bunch of them.
+
+To get better orientated, the site is organized for *Natural Reading*. As we
+use English for our international vistors (we are German), *Natural Reading*
+means for a western language, reading from the left to the right, and from
+top to down a page. The same to all menus, sections and pages.
+
+For that reason, it was a good decision starting here.
+
+== ReadMe's
+
+Every main section, or larger sub-section, and most of the dropdown menus have
+a ReadMe First. A Navigator is nice but the menu system does not explain what
+is inside. This *gap* should be closed by the ReadMes. See them as
+*too-lazy-to-search* helpers. A ReadMe give you a summary what can be found
+and give some advices how to explore- where to go next. In short: don't waste
+time by stumbling through deep nested dropdowns. Better: check out a ReadMe.
+
+== Where to start
+
+First of all, you've started already! The important first step on your way to
+Jekyll is done. Congratiulations.
+
+The *Start* section contains all you need to know what Jekyll and J1 can do
+for your Web site. For your new static Web, if you want.
+
+With this section you'll find a:
+
+. *Roundtrip* to show you some of the main features of the Template System
+*J1*.
+
+. *Download* area for so-called *QuickStarter*. A QuickStarter is a bundle
+(for Windows, Linux and MacOS) that contains all software as a installable
+package to run Jekyll, to develop a Web using J1 Template. All what is needed
+in an all-in-one application compilation.
+
+. *Kickstarter* are Tutorials. The most important one to start is *Web in a Day*.
+This tutorial guides you through all the steps to build a Web - your Web using
+Jekyll and the Template J1.
+
+== Where to go next
+
+You should go for the *Roundtrip* first. See what you will get. As an overview
+of some of the main features of *J1*. The roundtrip is a *visual* tour. No
+technical stuff, nothing academic.
+
+We recomment to read at least the article of the *QuickStarter* for your
+platform you work on. You'll find out if it's needed - or helpful - to go for
+a QuickStarter installation first.
+
+Tatata, let's go more deeper and make things real - and your hands dirty. We
+recomment to work on the Kickstarter *Web in a Day*. A nice one-day journey
+diving into the world of Jekyll. You'll learn a lot and at the end of that day
+you know what Jekyll, static webs and the template system J1 is all about.
+
+You're welcome!
+
+If you like, continue by walking through the roundtrip examples by starting
+link:{roundtrip-present-images}[the tour here].

data/lib/starter_web/pages/start/roundtrip/000_includes/attributes.asciidoc

@@ -0,0 +1,49 @@
+////
+Asciidoc includes
+////
+
+tag::urls[]
+:fontawesome-home:                                https://fontawesome.com/
+:fontawesome-icons:                               https://fontawesome.com/icons?d=gallery
+:fontawesome-get-started:                         https://fontawesome.com/get-started
+
+:jekyll-one-core-doc-color-scheme:                https://support.jekyll-one.com/user_guide/core/color_scheme
+
+:light-gallery-license:                           http://sachinchoolur.github.io/lightGallery/docs/license.html
+
+:asciidoctor-extensions-lab:                      https://github.com/asciidoctor/asciidoctor-extensions-lab
+:asciidoctor-extensions-use-extension:            https://github.com/asciidoctor/asciidoctor-extensions-lab#using-an-extension
+:asciidoctor-user-manual-extensions:              http://asciidoctor.org/docs/user-manual/#extensions
+
+:roundtrip_data_slider_picker:                    /pages/roundtrip/data_slider_picker
+:roundtrip_image_headers:                         /pages/start/roundtrip/image_header
+:roundtrip_image_headers:                         /pages/start/roundtrip/image_header
+
+:roundtrip-readme-first:                          /pages/start/read_me_first/
+:roundtrip-present-images:                        /pages/start/roundtrip/present_images/
+:roundtrip-cards:                                 /pages/start/roundtrip/cards/
+:roundtrip-typography:                            /pages/start/roundtrip/typography/
+:roundtrip-asciidoc-extensions:                   /pages/start/roundtrip/asciidoc_extensions/
+:roundtrip-icon-fonts:                            /pages/start/roundtrip/mdi_icon_font/
+:roundtrip-responsive-tables:                     /pages/start/roundtrip/responsive_tables/
+:roundtrip-themes:                                /pages/start/roundtrip/themes/
+
+:github-gist-home:                                https://gist.github.com/
+:asciidoc-extensions-gist-example:                https://gist.github.com/mojavelinux/5546622
+
+:previewer-emoji:                                 /pages/previewer/twitter_emoji/
+:previewer-theme:                                 /pages/previewer/theme/
+:previewer-mdi:                                   /pages/previewer/mdi_font/
+
+:kickstarter-web-in-a-day:                        /pages/start/kickstarter/web_in_a_day/intro/
+end::urls[]
+
+tag::tags[]
+:figure-caption:                                  Figure
+:images-dir:                                      pages/roundtrip
+end::tags[]
+
+tag::data[]
+:data-images-standalone:                          "{images-dir}/100_present_images/image-2.jpg, Two men in bicycle jerseys sitting outside at table having coffee, {images-dir}/100_present_images/image-1.jpg, Young lady looking at the beach"
+:data-images-group:                               "{images-dir}/100_present_images/image-3.jpg, Golden Gate Bridge with San Francisco in distance, {images-dir}/100_present_images/image-4.jpg, Forest with mountains behind, {images-dir}/100_present_images/image-5.jpg, Bicyclist looking out over hill at ocean"
+end::data[]

data/lib/starter_web/pages/start/roundtrip/000_includes/documents/100_gistblock.asciidoc

@@ -0,0 +1,27 @@
+=== Gist block
+
+Code snippets may helpful to support your readers for existing code examples.
+An excellent place for code snippets is Gist at Github. To embed an existing
+gist into your documents, the Asciidoc extention *Gist block* provides the
+block macro `gist::` to do so.
+
+The following gist snippet is taken from {asciidoc-extensions-gist-example}[this example, window="_blank"]:
+
+[source, adoc]
+----
+.Gist title
+gist::git_address[] <1>
+----
+<1> For `git_address`, {github-gist-home}[, window="_blank"] is prepended automatically
+
+.Example of a gist block
+----
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+----
+
+[.result]
+====
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+====

data/lib/starter_web/pages/start/roundtrip/100_present_images.adoc

@@ -0,0 +1,411 @@
+---
+title:                                  Roundtrip
+tagline:                                Various ways to present Image Data
+description:                            J1 Template Roundtrip - Present image based data
+
+tags:                                   [ Roundtrip, Images ]
+
+resources:                              [
+                                          carousel, justified_gallery,
+                                          lightbox, light_gallery, bs_gallery
+                                        ]
+
+flowtext:                               true
+permalink:                              /pages/start/roundtrip/present_images/
+regenerate:                             false
+
+resource_options:
+
+  - masthead:
+      padding_top:                      300
+      padding_bottom:                   50
+      margin_bottom:                    50
+      background_color:
+        color_1:                        "#162126"
+        color_2:                        "#849191"
+      mute:                             true
+      loop:                             false
+      preload:                          5
+
+      slides:
+        # Victoria Oskolovich - still image 1
+        - url:                          /assets/videos/headers/still/victoria-oskolovich-on-vimeo.png
+          alt:                          Victoria Oskolovich on Vimeo
+          alignY:                       top
+          animateFirst:                 false
+        # Victoria Oskolovich on Vimeo
+        - url:                          https://github.com/jekyll-one/jekyll-one-lfs/raw/master/videos/victoria-oskolovich-on-vimeo.mp4
+          alignY:                       0
+          isVideo:                      true
+          loop:                         true
+          duration:                     12000
+        # Victoria Oskolovich - still image 2
+        - url:                          /assets/videos/headers/still/victoria-oskolovich-on-vimeo.png
+          alt:                          Victoria Oskolovich on Vimeo
+          alignY:                       top
+          transitionDuration:           750
+          transition:                   fadeInOut
+---
+
+// Enable the Liquid Preprocessor
+//
+:page-liquid:
+
+// Set other global page attributes here
+// -------------------------------------------------------------------
+
+
+//  Load Liquid procedures
+// -------------------------------------------------------------------
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+{% capture set_image_block %}themes/{{site.template.name}}/procedures/global/set_image_block.proc{%endcapture%}
+
+// Initialize entry document environmental attributes
+// -------------------------------------------------------------------
+{% include {{set_env_entry_document}} %}
+
+// Load tag, url and data attributes
+// -------------------------------------------------------------------
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+include::{includedir}/attributes.asciidoc[tag=data]
+
+// Set local page attributes
+// -------------------------------------------------------------------
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+// Place an excerpt at the most top position
+// -----------------------------------------------------------------------------
+// Page excerpt text
+// excerpt__end
+
+// MAIN
+// =============================================================================
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Welcome to the first preview page focussing the *Image Module*. This page shows
+you some of the quite useful features of J1 Template to manage your image based
+content using lightboxes, carousels (slider) and galleries.
+
+The *Image Module* offer complex functionality based on powerful open source
+libraries like the build-in Gallely *gallery* for simple _Bootstrap_ grid-based
+image galleries or *Justified Gallery* for high-end, masonry styled preview
+maps. The build-in carousel app *carousel*, using the jQuery plugin *Owl Carousel*
+as a base, let you present your images as slide shows.
+
+Lightboxes like *LightGallery* or *Lightbox V2* support your web for full image
+views of your *picture* or *video* content. Have a look, a quick tour what J1
+can do. Have fun!
+
+== J1 Lightboxes
+
+A *Lightbox* in general is a helper which displays enlarged, almost
+screen-filling versions of pictures (or videos), while dimming the rest of the
+page. The technique, introduced by Lightbox V2, gained widespread popularity
+due to its simple and elegant style. The term *lightbox* is used since then for
+Javascript libraries to support such functionality.
+
+For J1 Template, two different lightboxes can be used:
+
+* Lightbox V2 (lightbox)
+* LightGallery
+
+The default lightbox used by J1 Template is *Lightbox V2*, a Javascript library
+written by _Lokesh Dhakar_. The name of that (build-in) is simply: *lightbox*.
+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, *LightGallery* provides much more functionality on image-based
+data rather than enlarged displaying of images. See the examples below to check
+for the differences in compare to the more simpler *Lightbox V2* lightbox.
+
+Both lightboxes are fully integrated to be used as standalone modules or to be
+used as helpers _under-the-hood_ by other apps or modules focussing on image
+data like *gallery* or *carousel*, the build-in carousel module.
+
+=== Lightbox Examples
+
+Find below an example of using the lightbox Lightbox *standalone*. See how
+*single* (individual) images are linked for the use with *Lightbox*.
+
+.A Lightbox block for standalone images
+lightbox::example-standalone[ 300, {data-images-standalone} ]
+
+For a *group* of images (image sets), *Lightbox* support image *groups*. Click
+on the images below to see how *Lightbox* manage image groups.
+
+.A Lightbox block for grouped images
+lightbox::example-group[ 200, {data-images-group}, group ]
+
+
+=== LightGallery Example
+
+*LightGallery* provides more complex functions on image data. The lightbox
+supports a gallery-styled thumbnail preview plus image resizing, a dowload
+dialog, sharing provider support and some more helpfull. Check what
+*LightGallery* can do by the following example.
+
+[subs=attributes]
+++++
+  <div id="caption1" style="display:none">
+    <h4 class="notoc">Image 1</h4><p>Golden Gate Bridge with San Francisco in distance</p>
+  </div>
+  <div id="caption2" style="display:none">
+    <h4 class="notoc">Image 2</h4><p>Forest with mountains behind</p>
+  </div>
+  <div id="caption3" style="display:none">
+    <h4 class="notoc">Image 3</h4><p>Bicyclist looking out over hill at ocean</p>
+  </div>
+
+  <div id="lightgallery-roundtrip-example" class="imageblock mb-4" data-sub-html=".caption">
+    <a href="{images-dir}/image-3.jpg" data-sub-html="#caption1">
+      <img src="{images-dir}/thumb-3.jpg" alt="Golden Gate Bridge with San Francisco in distance">
+    </a>
+    <a href="{images-dir}/image-4.jpg" data-sub-html="#caption2">
+      <img src="{images-dir}/thumb-4.jpg" alt="Forest with mountains behind">
+    </a>
+    <a href="{images-dir}/image-5.jpg" data-sub-html="#caption3">
+      <img src="{images-dir}/thumb-5.jpg" alt="Bicyclist looking out over hill at ocean">
+    </a>
+  </div>
+
+  <script>
+    $(document).ready(function(){
+      $('#lightgallery-roundtrip-example').lightGallery({
+          thumbnail: true
+      });
+    });
+  </script>
+++++
+
+
+== J1 Carousel App
+
+*J1 Carousel* is based on *OWL Carousel V1* in the latest (and unfortuneatly
+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 *not* longer available on the Internet; for unknown
+reason. Anyway, J1 Template is using this version of *OWL Carousel* as a
+build-in carousel module because the software does an excellent job, is based
+on a MIT license with no issues using them for private and business use.
+And offers a lot of great features!
+
+=== Simple Text Carousel
+
+A slider or carousel typically is used for displaying images but the
+implementation for J1 Template support a lot more *sources* to be displayed
+as a slide show: simple *text* for example.
+
+carousel::owl_demo_text_carousel[role="mb-3"]
+
+Important statements or topics can be placed e.g. on top of an article or a
+paragraph to give them a better *visibility*. In one line, you can present
+a bunch of *facts* to know animated for the readers attention within as single
+line - no much space is needed.
+
+=== Parallax Text Carousel
+
+A more *eye-minded* type of a text show is a *parallax* text slider. If you
+want to place emphasis on you personal statements focussing the meaning, this
+type of a slide show may be interesting. Image based slide shows may draw off
+the readers attention from the text, therefor a *pure text based* presentation
+may the better choice.
+
+++++
+  <div class="parallax-slider__owl_demo_text_carousel_parallax mb-3" style="background-position: 50% 45px">
+    <div id="owl_demo_text_carousel_parallax"></div>
+  </div>
+
+ <script>
+    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{background:url(/assets/images/quotes/default.png) 50% 0 repeat fixed}</style>');
+    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{padding:75px 0 75px 25px;position:relative}</style>');
+    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{color:#e5e5e5;font-size:1.5rem;font-weight:400}</style>');
+    $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-align:center}</style -->');
+    $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-transform:uppercase}</style -->');
+    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:url(/assets/images/patterns/gridtile.png) repeat;}</style>');
+    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,0.3)}</style>');
+  </script>
+++++
+
+
+Parallax text shows are can be placed as banners on a page. A lot of different
+animations can be used. Internally, J1 Template is using some of the really
+great CSS styles offered by _annimate.css_.
+
+TIP: Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page]
+to see all the possible dynamic styles you can create based on pure CSS. *Some*
+of them are implemented for *OWL Carousel* for animation. See the documetation
+for the *CAROUSEL Module* for more details.
+
+=== Simple Image Carousel
+
+Carousels are mostly used for pictures data to animate the images as series.
+Find with the following some examples 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 interesting things of your site or the products offered.
+
+.Simple Image Carousel
+carousel::owl_demo_simple[role="mb-5"]
+
+=== Carousel + Caption + Lightbox
+
+Carousels can be used for a quite compact form of image galleries. This example
+show some pictures having individual caption text *and* support a lightbox to
+enlarge images full size. For the example below, a quite simple lightbox
+is used: *Lightbox V2*; or short: *lightbox*.
+
+.Nice cats
+carousel::owl_demo_cats[role="mb-5"]
+
+
+The J1 module *lightbox* is a simple Lightbox but offers a bunch of interesting
+features for displaying images. For example, lightbox can display all images
+(of a carousel) as a *group*. If one picture is opened in the lightbox, all
+the other can browsed as well.
+
+=== One Slide Carousel + Lightbox
+
+The build-in Carousel *carousel* supports multiple *and* single image shows.
+Here you find an example of an 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.
+
+.Single Slide Carousel and a Lightbox
+carousel::owl_demo_oneslide[role="mb-5"]
+
+
+== J1 Gallery App
+
+To create *image* and *video* galleries, J1 Template implements the jQuery
+plugin *JustifiedGallery* as the *main* gallery module. Beside Justified
+Gallery, a gallery based on pure _Bootstrap_ code is available with the build-in
+gallery app *gallery*.
+
+*Justified Gallery* 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 *enlage* the images of a gallery.
+
+The same to *gallery*. The gallery app is a slim jQuery plugin to create
+galleries using the *grid system* of _Bootstrap_ navively. As mentioned ealier,
+*gallery* is simple but a good choice for *even* sized images or for video
+(thumbnail) previews. Video previews are based typically on *even* sized
+*thumbnail* images. For that reason, the build-in module *gallery* is a
+good choice.
+
+See both of them in action - and for sure all what you see is even responsive.
+Change the size of your current browser window, by width or height, to see
+what will happen!
+
+=== Image Galleries
+
+A bunch of images to display needs an elegant *view* to see all images from a
+preview. That's what the galley apps are doing.
+
+==== Build-in Gallery
+
+The build-in Gallery App *gallery* is a simple gallery using _Bootstrap_'s
+grid system to order images grid based into rows and colums. Beside the
+simplicity, *gallery* has some nice features you can turn on or off to give
+a gallery a special style and behaviour.
+
+As for all galleries, a *lightbox* is put on all images to enlarge and browse
+them for convenience and best access.
+
+.Grand Pa around the 1930th
+carousel::bg_old_times[role="mb-5"]
+
+
+==== Justified Gallery
+
+Pictures you've made are typically *not* even in size. Images may have the
+same size (resolution), but some of the are orientated landscape or other
+may portrait. For that reason, a more powerful gallery is needed to create
+so-called *justified* views.
+
+*Justified Gallery* is using 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 layout of Justified Gallery
+carousel::jg_live_demo[role="mb-5"]
+
+
+=== HTML5 Video Galleries
+
+Playing video on a web page seems not that special since you can already
+watch videos on web pages through plugins like _Flash Player_, _Quicktime_
+or _Silverlight_. A new standard goes to *HTML5 Video*, a pure *HTML* way to
+show video on the web; instead of the previous de facto standard of using
+*proprietary* software.
+
+*HTML5 Video* open the doors to *your way* presenting video content. Modern
+browsers support the video tag `<video>` for the HTML5 Video standard. Browsers
+have a build-in multimedia framework already for decoding and displaying
+video content. No need to use such proprietary software components anymore!
+
+HTML5 Video support is given by the App *gallery* combined with the Lightbox
+*LightGallery*.
+
+Two types of video sources are supported:
+
+. videos from *local* files (your web space)
+. videos from *online* sources (on the Internet) like YouTube, Vimeo, etc.
+
+The combination of the App *gallery* and the lightbox *LightGallery* is quite
+usable for all the video content you want to present on your site. Galleries
+can be placed elsewhere with your content. You can use them for video blogs
+for example by placing them into your blog articles content.
+
+WARNING: *LightGallery* can be used *for free* for *private use* but for
+business use, a *commercial license* is needed. See link:{light-gallery-license}[Light Gallery license]
+how to use LightGallery for *commercial* webs and projects.
+
+==== Local video content
+
+Digital image content, simple pictures or vidoes, are quite easy to make.
+Today, each and every mobile has a camera - not that bad! Presenting a bunch
+of (digital) pictures is very easy by using *Justified Gallery* for example.
+Videos created by a digi cam or a mobile can played by J1 Template using the
+*HTML5 Video support of *LightGallery*.
+
+Two players are available with *LightGallery*:
+
+. a internal player used by default
+. http://www2.videojs.com/[video.js], a excellent Javascript video library
+
+.HTML5 Video Gallery
+carousel::bg_video_html5[role="mb-5"]
+
+NOTE: The HTML5 specification does _not_ define which video and audio formats
+browsers _should_ support. J1 *LightGallery* supports all _typical_ types of
+HTML5 Video formats browsers support today such as *MP4*, *WebM*, and *Ogg*.
+
+==== Online video content
+
+The Internet is full of interesting content. Video content is very popular,
+the number of channels at e.g. _YouTube_ is enormous. If you want to present
+video content from the Internet, e.g. your channnel, the online video
+support of J1 Template may a good choice. Find some enjoyable videos from
+*James Cordon's* channel: *Carpool Karaoke*.
+
+.Youtube Video Gallery
+carousel::bg_video_online[role="mb-5"]
+
+== What's 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.
+
+Incredible?  See the next example page link:{roundtrip-cards}[to check what Cards are all about].
+
+
+// Include documents
+// -------------------------------------------------------------------