The J1 lightbox module supports groups of images as well. Click on the image group below to see how a group is managed.
lightGallery provides more complex image data functions than the default lightbox. 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.
lightGallery - Gallery or Lightbox The name lightGallery implies a sort of a gallery, but the library is a lightbox, and provides enhannced functionality on image-based data rather than enlarged displaying of images. |
J1 Carousel is based on OWL Carousel V1 in the latest version. The carousel is a powerful jQuery plugin for creating fully responsive and touch-enabled carousel slideshows.
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.
Important statements or topics can be placed 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.
A more emphasized type of text-based carousel is a parallax text slider. If you want to focus 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 Template 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. |
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.
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.
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 as a group. If one picture is opened in the lightbox, others are browsed by easy-to-use control buttons.
The build-in 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.
Slick is a popular jQuery plugin for creating responsive and fully customizable carousels. It allows developers to easily create beautiful and dynamic carousels that can display images, videos, or any other type of content in a visually appealing way.
The plugin is designed to be lightweight, fast, and easy to use, making it a popular choice for all web developers. It has many features, including multiple navigation options, lazy loading, or autoplay. Slick carousels are compatible with all modern browsers and devices, making it a great choice to create a responsive and mobile-friendly website.
All Slick carousels for the J1 Template can be easily customized in various ways, such as changing the number of posts displayed, the slider speed, or the navigation options like Arrows and Dots.
An Slick image carousel typically consists of a container with images and a navigation system, including buttons, arrows, or dots that allow users to move back and forth between images or select a specific image. Image carousels can also include animation effects, such as fade-in or slide-in transitions between images, to make the presentation more engaging and visually appealing.
A carousel from a collection for J1 Template is a pre-defined element type to display articles from a Jekyll collection on a webpage. All carousels for collections display the article image and a link to the article as a caption.
A Carousel from posts for J1 Template is a pre-defined carousel type to display post articles on a webpage. It is a popular way to showcase a selection of post articles visually appealingly and can be useful for highlighting important or featured content for your posts content.
Post carousels pull news articles from a specific group. All Carousels for posts display the post category, the title, the author information and date.
slick::post_carousel_featured[]
More about Slick Carousels If you’re interested to learn more about Slick, go previewer page Slick Previewer, |
Masterslider is a jQuery plugin fully integrated into the J1 Template. Jekyll One uses the free version of Masterslider well-known as MS Lite. The lite version does not support all features of the full product. The functionality of filters and layouts are limited and no overlay techniques are supported by the MS Lite version.
Sliders and Carousels are focussing quite the same thing: presenting images dynamically. The features of Sliders go far beyond what simple carousels can do: presenting image-based data as slide shows.
Well-known Office Products to create presentations are Powerpoint from Microsoft or Google Docs. Modern sliders like Master Slider provide similar features to present animated presentations based on digital image data combined with text elements, buttons, or overlay techniques for images or other digital data sources.
In short: Carousels are used to present images, and sliders are used to create complex image-based presentations.
For more details of the implementation of Master Slider for J1 Template, find more helpful information at the page Master Slider module. |
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 Template. The original 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. |
One of the major features of sliders is to present additional animated elements, like text data, connected to the images presented by an slideshow. MS Slider additionally provides functions to combine images and text by so-called MSInfo blocks out-of-the-box.
To give the users better control over a slideshow, sliders provide complex UI elements to place dor example mini-images or short text elements side-by-side left or right, or at the bottom of a slideshow. Find two examples below how to control such a carousel element.
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 Master Slider, go for the following documents:
|
Masonry for J1 is a great tool to create dynamic image galleries. Image galleries are popular on many websites, and masonry can be a useful tool for creating dynamic galleries.
By using the Masonry module, you can create a gallery that displays images of different sizes in an aesthetically pleasing and functional way.
More about Masonry Find more on how the Masonry module can be used on the Masonry Preview page. |
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 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. J1 Gallery is based on Justified Gallery to create so-called masonry grid layouts.
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. For sure, you’ll have seen it in action all over the Internet.
I hope, 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 Template support playing audio and video on web pages by using the HTML5 audio and video support, the new standard of HTML. HTML5 implements a pure HTML way to show play audio or playing video on the web. Modern browsers support the audio tag <audio>
and the video tag <video>
for the HTML5 standard.
The previous proprietary de facto standard software like a Flash Player, Quicktime, or Silverlight is no longer needed as the Theme JekyllOne provides HTML5 video for local content and from online sources on the Internet.
Incredible? See the next example page Audio Player.