j1-template 2021.1.10 → 2021.1.14

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

@@ -1,244 +0,0 @@
----
-title:                                  Roundtrip
-tagline:                                present images
-date:                                   2020-11-03 00:00:00 +100
-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:                             [ Images, Module ]
-tags:                                   [ Roundtrip, Introduction ]
-
-comments:                               false
-fam_menu_id:                            page_ctrl_simple
-
-permalink:                              /pages/public/learn/roundtrip/present_images/
-regenerate:                             false
-
-resources:                              [
-                                          clipboard, rouge, carousel, lightbox,
-                                          justifiedGallery, lightGallery
-                                        ]
-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
-// -----------------------------------------------------------------------------
-
-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, 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 the 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 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 some more helpful. Check what
-LightGallery can do 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 as 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
-a bunch of 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 a text-show is a parallax text slider. If you
-want to place emphasis on your personal 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, therefor a pure text-based presentation
-may 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. A lot of different
-animations can be used. Internally, J1 Template is using some of the really
-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 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 of your site or the products offered.
-
-.Simple Image Carousel
-carousel::demo_simple[role="mb-3"]
-
-=== Carousel + Caption + Lightbox
-
-Carousels can be 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, a 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, all
-the other can be browsed as well.
-
-=== 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"]
-
-== 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
-built-in gallery app *gallery*.
-
-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!
-
-=== JustifiedGallery
-
-Pictures you've made are typically not even in size. Images may have the
-same size (resolution), but some of them are orientated landscape or other
-may portrait. For that reason, a more powerful gallery is needed to create
-so-called justified views.
-
-JustifiedGallery 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 JustifiedGallery
-gallery::jg_customizer[]
-
-== Whats 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-present-videos}[Present videos].