Welcome to the preview page focussing on the image module. This page shows all the valuable features of the J1 Theme to manage your image-based content using using lightboxes, carousels, sliders, and galleries. The image modules of J1 Theme offer a wide range of complex functionality based on powerful OpenSource libraries like Lightbox2, Master Slider, LightGallery, or JustifiedGallery for high-end, masonry-styled preview maps.
J1 Lightbox blocks
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 Lightbox2, 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 Theme, two different lightboxes are available:
-
Lightbox2 (lightbox)
-
LightGallery
The default tool employed by J1 Theme is Lightbox2, 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.
| 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 Lightbox2 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.
| For details of the default lightbox of J1 Theme, see the documentation under the Lightbox module. |
Lightbox block examples
Find below an example of using the lightbox Lightbox standalone. See how single (individual) images are linked for use with Lightbox.
Lightbox supports image groups (image sets). Click on the images below to see how Lightbox manages a group of images.
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.
J1 Carousel
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.
Simple Text Carousel
A slider or carousel is typically used for displaying images. Still, the implementation for the J1 Theme supports a lot more sources to be displayed as a slide show: simple text, for example.
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 shows can be placed as banners on a page. For text shows, different animations are available. Internally, J1 Theme uses some of the great CSS styles offered by animate.css.
| Have a look a 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 the J1 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.
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: Lightbox2; or short: lightbox.
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.
J1 Master Slider
The Javascript tool Master Slider is a 3rd party plugin fully integrated into the J1 Theme by the module masterslider. J1 Theme uses the free version of Master Slider (MS Lite). The Lite version does not support all features: the functionality of filters, layouts are limited and no overlay techniques are supported by the MS Lite version.
Carousels versus Sliders
Sliders and Carousels are focussing quite the same thing: presenting image data dynamically as an app. The features of Sliders go far beyond what simple Carousels can do: presenting image-based data as slideshows. Well-known Office Products to create presentations are Microsoft Powerpoint or Google Docs. Modern sliders like Master Slider provide similar features to present animated shows (presentations) based on digital image data combined with text elements, buttons, or overlay techniques, e.g., for images or other digital data sources.
In short: Carousels are used to present images, and sliders are used to create complex image-based slideshows (presentations).
| For more details of the dimplementation of Master Slider of J1 Theme, see find documentation at Master Slider module. |
MS Slider using Controls + Filters + Lightbox
The following slider uses the (CSS) filter feature of Master Slider. Filters can be used, for example, to transform the style of the images presented by a slider. In this example, the slider images are transformed from style color to sepia.
| Lightbox support is only available for the MS Lite version of J1 Theme. The product versions MS Lite and MS Pro does not support Lightboxes on sliders out-of-the-box. |
| Click on the Lightbox symbol in the slides to see the colored images configured for the slider. |
MS Slider using Text Elements (MSInfo)
One of the major features of sliders is to present additional (animated) elements, like text data, connected to the images presented by a slider: the slideshow. MS Slider provides functions to combine images and text elements: the MSInfo element.
MS Slider using ThumbImages
To give the users better control over a slideshow, sliders provide complex UI elements like thumbs placed side-by-side (left|right), at the top, or at the bottom of a slideshow. Find two examples to control a slideshow by thumb images.
MS Slider using ThumbInfo
To give the users better control over a slideshow, MS Slider provides complex UI elements like thumbs placed side-by-side (left|right), at the top, or at the bottom of a slideshow.
MS Slider using Layout partialview
The following slider presents a slideshow that combines an MSInfo element at the bottom and the MS Layout partialview. A slideshow typically presents a larger number of slides. The layout partialview accompanies the active slide by their neighbors on the left and the right.
More about Master Slider
If you’re interested to learn more about MS Slider, go for the following documents:
-
MS Slider Previewer
-
MS Slider Module documentation
JustifiedGallery
JustifiedGallery is a great jQuery Plugin to create responsive, infinite, and high-quality justified image galleries. J1 Theme combines the Gallery with the lightboxes supported to enlarge the images of a gallery. See the gallery 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!
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.
The J1 Theme support playing video on web pages by HTML5 Video, the new standard of HTML. HTML5 Video implements a pure HTML way to show video on the web. Modern browsers support the video tag <video> for the HTML5 video standard. The previous proprietary de facto standard software like Flash Player, Quicktime, or Silverlight is no longer needed as the Jekyll theme JekyllOne provides HTML5 Video support for local video content and from online sources on the Internet.
Incredible? See the next example page Present Videos.