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 include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc

// 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:

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

++++

<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}/lightbox-image-1.jpg" data-sub-html="#caption1">
    <img src="{images-dir}/lightbox-thumb-1.jpg" alt="Golden Gate Bridge with San Francisco in distance">
  </a>
  <a href="{images-dir}/lightbox-image-2.jpg" data-sub-html="#caption2">
    <img src="{images-dir}/lightbox-thumb-2.jpg" alt="Forest with mountains behind">
  </a>
  <a href="{images-dir}/lightbox-image-3.jpg" data-sub-html="#caption3">
    <img src="{images-dir}/lightbox-thumb-3.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

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 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

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

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

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

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

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 {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 . www2.videojs.com/[video.js], a excellent Javascript video library

.HTML5 Video Gallery carousel::bg_video_html5

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

What's next?

You've found cards for your web that fit your needs? If so, really great.

Content counts - no way. If a page is opened, yes a great one, the very first what your vistors will see is what is top most on a page - a header. A header is somewhat like an intro. Very important to make a reader feel right on a page. Or interested to go for reading.

Beside simple text headers, J1 support *Image Headers* using pictures or videos. To create eye-catching headers no expensive software is needed.

What? Find out how it works: {roundtrip-typography}[J1 Typography].

/////

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 {roundtrip-cards}[to check what Cards are all about]. /////