j1-template 2022.1.0 → 2022.1.1

data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.comments.asciidoc

@@ -1,237 +0,0 @@
----
-title:                                  Roundtrip
-tagline:                                present images
-date:                                   2020-11-03 00:00:00
-description: >
-                                        Welcome to the preview page focussing on the image module. This page
-                                        shows some valuable features of the J1 Template to manage your image-based
-                                        content using lightboxes, carousels (slider), and galleries.
-
-categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Module, Image ]
-
-fab_menu_id:                            page_ctrl_simple
-
-permalink:                              /pages/public/learn/roundtrip/present_images/
-regenerate:                             false
-
-resources:                              [
-                                          animate, comments, clipboard,
-                                          carousel, justifiedGallery,
-                                          lightbox, lightGallery,
-                                          rouge
-                                        ]
-resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
-          alt:                          Photo by Ricardo Gomez Angel on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Ricardo Gomez Angel
-            href:                       https://unsplash.com/@ripato/portfolio
----
-
-// 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
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents (if any)
-// -----------------------------------------------------------------------------
-[role="dropcap"]
-Welcome to the first preview page focussing on the image module. This page
-shows some valuable features of the J1 Template to manage your image-based
-content using lightboxes, carousels (slider), and galleries.
-
-The image module offers complex functionality based on powerful OpenSource
-libraries like JustifiedGallery for high-end, masonry-styled preview maps.
-J1 Template uses the jQuery plugin Owl Carousel as a base for image sliders.
-A carousel app (slider) lets you present your images as shows.
-
-Lightboxes like LightGallery or Lightbox V2 support your web for enlarged
-image views of your picture or video content. Have a look, a quick tour
-of what J1 can do for image data. Have fun!
-
-== J1 Lightboxes
-
-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 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 the J1 Template, two different lightboxes are available:
-
-* Lightbox V2 (lightbox)
-* LightGallery
-
-The default tool employed by J1 Template is Lightbox V2, a Javascript library
-written by _Lokesh Dhakar_. The name of that (build-in) is *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 comparison to the simpler Lightbox V2 lightbox.
-
-Both lightboxes are fully integrated to be used as standalone modules or
-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 use with Lightbox.
-
-.Lightbox block for standalone images
-lightbox::example-standalone[ 400, {data-images-standalone} ]
-
-Lightbox supports image groups (image sets). Click on the images below to
-see how Lightbox manages a group of images.
-
-.Lightbox block for grouped images
-lightbox::example-group[ 400, {data-images-group}, group ]
-
-=== 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[]
-
-== J1 Carousel App
-
-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!
-
-=== Simple Text Carousel
-
-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.
-
-.Simple text carousel
-carousel::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 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!
-
-=== Parallax Text Carousel
-
-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
-carousel::demo_text_carousel_parallax[role="mb-3"]
-
-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]
-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 documentation
-for the CAROUSEL Module for more details.
-
-=== 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.
-
-.Simple Image Carousel
-carousel::demo_simple[role="mb-3"]
-
-=== 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: Lightbox V2; or short: lightbox.
-
-.Nice cats
-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.
-
-=== 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.
-
-.Single Slide Carousel and a Lightbox
-carousel::demo_oneslide[role="mb-3"]
-
-== JustifiedGallery
-
-JustifiedGallery 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 JustifiedGallery 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!
-
-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 layout of JustifiedGallery
-gallery::jg_customizer[]
-
-== 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.
-
-Incredible? See the next example page link:{url-roundtrip--present-videos}[Present videos].