Welcome to the preview page focussing on image modules. This page shows all of the powerful features of the J1 Template to manage your image-based content using lightboxes, carousels, sliders, grids, and galleries.
The image-related modules of the J1 Template offer a wide range of complex functionality based on powerful open-source libraries, such as PhotoSwipeJS, LightGallery, SwiperJS, Masonry, and Justified-Gallery, to create masonry-styled image preview maps.
Lightboxes
A lightbox is a helper which displays enlarged, almost screen-filling versions of images while dimming the remainder of the page. The technique, introduced by Lightbox Version 2, gained widespread popularity thanks to its simple style. The term lightbox has been employed since then for Javascript libraries to support such functionality.
For J1 Template, different lightbox modules are available:
-
PhotoSwipeJS (default)
-
lightGallery (optional)
The default tool employed by J1 Template is PhotoSwipeJS, a Javascript library free to use for private or business websites. For more complex use cases, like a thumbnail gallery preview or video support, LightGallery can be used alternatively.
| The Tool LightGallery is free to use based on a GPLv3 license for non-business websites. If you have plans to use this lightbox for your business or on a commercial site, you need to subscribe a so-called Commercial License. Find more on the paid solution on the page: lightGallery license. |
All lightboxes are fully integrated to be used as standalone modules or used as helpers under-the-hood by other modules focussing on image-data like gallerys or carousels.
| For details of the default lightbox of J1 Template, see the documentation under the Lightbox module. |
Lightboxes
Find below an example of using the the default lightbox used for standalone images. See how individual images are linked.
The J1 lightbox module supports groups of images as well. Click on the image group below to see how a group is managed.
lightGallery
The J1 Gallery module LightGallery provides much more complex image data functions than the default lightbox. The module supports a gallery-style thumbnail preview, image resizing, a download dialog, sharing provider support, and more helpful features. Check what LightGallery can do with 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 Slider
J1 Slider is based on SwiperJS in version 1.2.0 (January 7, 2025). The slider is a powerful tool to create fully responsive and touch-enabled slideshows.
Text Sliders
Swipers are 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.
| Text sliders can be placed like banners on a page’s section. For text sliders, different animations are available. |
Base Text Slider
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.
Parallax Text Slider
A more emphasized type of text-based slide is a parallax text slider. If you want to focus the meaning, this kind of a slide show may be interesting. Image-based slide may draw off the reader’s attention from the text. Therefore, a pure text-based presentation may a better choice.
Image Slider
Sliders (or carousels) are mostly used for picture data to animate images as a series. Find the following some examples of how to use a carousel for your image data.
A simple image slideshow is useful, for example, as an animated (or non-animated) banner presenting exciting things about your site or the products offered.
One Slide Slider + Pagination
The built-in Slider Module, SwiperJS, supports both multiple and single image shows. Here, you will find an example of a single-image slideshow with controls enabled to browse all images back and forth. An indicator below the slider shows how many images the show contains.
Image Slider + Lightbox
Sliders are used for an exceptionally compact form of image galleries. This example displays pictures with individual caption text and features a lightbox to enlarge images to full size.
The J1 Module lightbox 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.
Extendend Image Slider
Layouts in terms of the Slider Module (SwiperJS) for J1 Template are transformations of a Swiper slider. A layout is used to rebuild it for a more complex visual presentation for the Swiper’s slides. The Layout of a slider can improve the useability or make the presentation of a slideshow more interesting.
Layout Thumb Top|Bottom
To give users more visual control over a slideshow. The slider provides a UI element by placing minified images or text elements (thumbs) side-by-side (on the left|right) or at the bottom|top of a swiper. Find below examples of how to control such a slider.
| This Layout creates best results for high-quality images for websites mainly used on desktop computers. |
This Thumb Slider uses minified images that are placed to control the (main) slider at the top or the bottom. This swiper type creates a thumbed Swiper that uses two lines, which takes up a lot of space but can render the sliders' images optimally.
Layout Neighbor
A slideshow typically presents a larger number of slides, which requires a sort of navigation. The effect neighbors accompanies the active slide by their neighbors on the left and right as previews. The neighbor on the left acts like a previous button and scrolls the slides backward. The neighbor on the right acts like a next button and scrolls the slides forward.
| The effect transforms a slider into a quite compact presentation that does not require any (additional) navigation elements. |
Layout Panorama
The Panorama layout in SwiperJS sliders is used to create a 3D-like panoramic effect, where the slides are animated as they swipe, creating a continuous, curved panorama. The layout creates an immersive sense of depth and movement, which is especially beneficial when presenting wide images, landscapes, or other visual content with a large aspect ratio.
Masonry Gallery
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.
| 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. Find more on how the Masonry module can be used on the Masonry Preview page. |
Masonry arranges elements in a so-called brickwork-style, where the elements are staggered like bricks and arranged to maximize space efficiency. The elements are placed in optimal positions according to the available vertical space, creating columns of varying heights based on the natural height of the contents.
Justified Gallery
The 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.
Justified Gallery creates galleries where images are arranged in even, horizontally aligned (justified) rows. The row height is constant, and the image width is adjusted proportionally so that each row uses the full container width, similar to Flickr or Google Photos.
Pictures you’ve made are typically not even in size. Images may have the same size (resolution), but some are orientated landscapes, and 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, like fitting stones in a wall. For sure, you’ll have seen it in action all over the Internet.
What next
I hope you’ve enjoyed exploring the possibilities J1 offers for managing and displaying digital image content. However, there is much more that J1 Template can do for your website.
The J1 Template system supports playing audio and video on web pages by utilizing HTML5 audio and video support, the latest standard in HTML. HTML5 provides a pure HTML approach to playing audio or video on the web. Modern browsers support the HTML5 audio tag <audio> and the video tag <video>.
The previous proprietary de facto standard software like Flash Player, QuickTime or Silverlight is no longer needed, as the J1 Theme provides HTML5 video support for both local content and online sources on the Internet.
Incredible? See the next example page Audio Player.