--- #scrollbar: true title: Roundtrip tagline: Various ways to present Image Data description: J1 Template Roundtrip - Present image based data tags: [ Template, Roundtrip, Images ] index: [] categories: [ pages ] permalink: /pages/public/start/roundtrip/present_images/ regenerate: false resources: [ carousel, justified_gallery, lightbox, light_gallery, bs_gallery ] 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 // ----------------------------------------------------------------------------- //:my-asciidoc-attribute: // 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 // NOTE: Place an excerpt at the most top position // ----------------------------------------------------------------------------- // Page excerpt text .. // // [role="clearfix mb-3"] // excerpt__end // 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[ 400, {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[ 400, {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] ++++
Golden Gate Bridge with San Francisco in distance Forest with mountains behind Bicyclist looking out over hill at ocean
++++ == 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. ++++
++++ 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 `