The Zentools2 carousel layout merges your content with a supremely flexible responsive carousel. 

There are two main types of carousels available in Zentools2:

• standard 
• featured

Carousel with discs and no margin

The carousel below displays images from a folder using discs for pagination and the margin between items removed.

Carousel with numbers, title overlay

The carousel below displays images from a folder with the title overlaying the image.

Lagoon

Leapr

Lorem ipsum

Molestie non

Shadow

Skipper

Skynight

Sundebt

Windows

Woody

Three item carousel with next / prev buttons and animated title overlay

The carousel below displays images from a folder where 3 items are always visible in the carousel above small screen widths. The title is displayed in a caption above the image when the user hovers over the image.

Death_to_stock_photography_wild_1

Death_to_stock_photography_wild_10

Death_to_stock_photography_wild_2

Death_to_stock_photography_wild_3

Death_to_stock_photography_wild_4

Death_to_stock_photography_wild_5

Death_to_stock_photography_wild_6

Death_to_stock_photography_wild_7

Death_to_stock_photography_wild_8

Death_to_stock_photography_wild_9

Carousel with multiple columns

The following carousel displays each item in two columns. The carousel is set to only ever show a single item in the carousel at one time.

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Aenean pulvinar, nisi

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Trailing candidacy

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat.

In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Class aptent taciti

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Global Health Initiatives

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Sleuth managment

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

Featured Carousel

The featured carousel displays 3 items in the carousel with the central item enlarged and at full opacity. The carousel reduces to one item per carousel on small screens. The numbered and disc pagination is not available with this layout.

 

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat.

In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non...

 

Featured carousel with images and overlay

The carousel below displays images from a folder using the Featured layout.

 

Lagoon

Leapr

Lorem ipsum

Molestie non

Shadow

Skipper

Skynight

Sundebt

Windows

Woody

 

Featured carousel with boxed theme

The carousel below displays images from a folder using the boxed layout which adds a container element around the items in the carousel that appear after the first item. The carousel also has the equal heights option enabled which ensures all items in the carousel have the same height.

 

A platter

Concealed refinement

Preparing

Pugilism warrant

The Gear

Raw grains

Shopping for food

The man

Tools of the trade

 

Featured carousel with animated overlay

The carousel below displays images from a folder using the animated overlay theme. This means that when the user hovers over each item the item title or any other items in the layout are animated onto the page.

 

Lagoon

Leapr

Lorem ipsum

Molestie non

Shadow

Skipper

Skynight

Sundebt

Windows

Woody

 

Options available for the Featured carousel

• theme
• matchheight
• slide_speed
• autoplay
• autoplay_speed
• navigation
• nav_prev
• nav_next
• largescreen
• largescreen_items
• mediumscreen
• mediumscreen_items
• smallscreen
• smallscreen_items

Options available for the standard carousel

• theme
• matchheight
• margin
• slide_speed
• autoplay
• autoplay_speed
• pagination
• paginationNumbers
• largescreen
• largescreen_items
• mediumscreen
• mediumscreen_items
• smallscreen
• smallscreen_items
• navigation
• nav_prev
• nav_next

The grid layout uses a flexible responsive grid that allows the user to set a maximum number of columns (1-6) per module. The columns will automatically resize and display your content so it's always displayed at an optimum width. 

Maximum number of columns explained

This means that at it's widest point the grid will only be displayed in 1,2,3,4,5 or 6 columns. At screen widths larger than the desktop breakpoint the module will always display the maximum number of columns. At sizes smaller than the desktop valkue the grid will display in fewer columns that make your content more readable.

An example 

For instance if you set the large screen value to 1200px, medium screen value to 800px and the small screen value to 600px and the maximum column option to 4, when the browser is above 1200px the module will always display it's items in 4 columns.

On screens smaller than the desktop width the module will revert to 3 columns (in between 800px and 1200px) for medium screen sizes and 2 columns for screens larger than small screens and smaller than medium screens (600px to 800px). And for screens smaller than the small screen width (600px) the module will collapse to a single column layout.

Custom Screensizes

The module allows you to determine the value assigned to each screen size on a module per module basis or for all instances of the Zentools module, giving you complete control over how how your content displays in your template across a range of screensizes.

Maximum 4 column grid

The Grid below is set to display in a maximum of 4 columns. The settings in the module determine the points at which the grid resolves to 3,2 and 1 column.

Maximum 2 column grid

The Grid below is set to display in a maximum of 2 columns. The settings in the module determine the points at which the grid resolves to 3,2 and 1 column.

Columns within grids

The Grid below is set to display in a maximum of 2 columns. The settings in the module determine the points at which the grid resolves to 3,2 and 1 column.

Marginless grid

The Grid below is set to display in a maximum of 2 columns. The settings in the module determine the points at which the grid resolves to 3,2 and 1 column.

Grid with overlay

The grid below is displaying a maximum of 3 column grids, with no margins and the title element overlaying the image.

Marginless grid with animated overlay

The grid below is displaying a maximum of 3 column grids, with no margins and the title element transitions into view when the user hovers over the image.

Boxed theme with equal heights enabled

The grid below uses the boxed theme and the setting to make the items equal height enabled. The equal height settings ensures that your grid of items maintains a uniform and consistent display.

Boxed theme with equal heights disabled

The grid below uses the boxed theme and the setting to make the items equal height disabled.

The grid can also maintain it's columns on small screens

The grid below uses the setting called Enable grid on small screens to ensure that the grid items do not collapse when viewed on a small screen.

Themes and other display options

Themes

The grid layout also includes a number of different theme options. They include:

• none
• boxed
• overlay
• animate overlay

Display options

Other display options include:

• make each item equal heights
• remove the margin between items
• maintain it's columns on small screens.
• Display loading animation and delay the display of images until all images have loaded

Effects

The grid layout also has the option to provide an animated effect for when the item is visible on the screen. When this option is enabled and if the item is visible on the screen on page load or becomes visible on the page as the user scrolls the item is transitioned onto the page.

The available effects include:

• fade
• fade from left
• fade from top
• fade from right
• fade from the bottom.

Zentools2 comes with a number of slideshow layouts that can be used for to render content slideshows, image galleries, background responsive slideshows and more.

Basic slideshow

The slideshow below displays the image, title and content of items in a slideshow using the fadeUp transition. Next and previous buttons are enabled for navigation between items.

Wanton disregarding

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Walter Brown

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia sem sed sem lobortis viverra.

Trailing candidacy

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Thomas Ewing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia sem sed sem lobortis viverra.

Sleuth managment

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Samantha Cook

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia sem sed sem lobortis viverra.

Patricia Johnson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia sem sed sem lobortis viverra.

Neural path task

Cras nec lorem eget ligula varius aliquet at et mi. Fusce id quam in justo suscipit porta. Fusce non nisl nunc, id vestibulum augue. Donec interdum sapien vitae sem condimentum vel adipiscing leo consequat. In quis nisi sed velit lobortis congue in vulputate risus. Aliquam molestie, risus sed congue ullamcorper, mauris lacus volutpat mauris, nec luctus est risus in libero.

Julien Sanders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia sem sed sem lobortis viverra.

Video Slideshow

It is possible to create a slideshow that uses embedded video from vimeo or youtube. The video iframes are taken from the intortext of your Joomla content or from the K2 video item. Please note that the video stops once the slide progresses to the next slide in the slideshow and so it is advised that you disable autoplay if using video in your slideshow. 

Backstretch

The backstretch slideshow is ideal for slideshows that need to retain the same height across multiple device widths. The bvackstretch library centers the image and resizes the height or width to retain the aspect ratio as much as possible.

Slideshow overlay with thumbs

The slideshow below highlights the use of thumbnails to trigger the slideshow. The thumbnails are a linked carousel that scrolls through the available items in the slideshow. You can specify the number of thumbs to display across a variety of screen sizes. The thumbs displayed below the slideshow are displayed in a carousel that automatically scrolls so that the active item is shown in the carousel. The slideshow settings allow you to determine the number of thumbs that should be shown across large, medium and small screen sizes.

Balloon

Beaumar

Cactii

Derseter

Flaggey

Flower

Grand

Hunter

Lagoon

Leapr

Lorem ipsum

Molestie non

Shadow

Skipper

Skynight

Sundebt

Windows

Woody

Slideshow with animated overlay

The slideshow below uses the animated overlay half theme option. All items other than the image are displayed in the overlay which animates onto the screen a short time after the slideshow image is tansitioned.

Skipper

Skynight

Sundebt

Windows

Woody

Slideshow overlay half animated

The slideshow below uses the same settings as the exampel above except in this case it uses the animated overlay half style.

Balloon

Beaumar

Cactii

Derseter

Flaggey

Flower

Grand

Hunter

Lagoon

Leapr

Lorem ipsum

Molestie non

Shadow

Skipper

Skynight

Sundebt

Windows

Woody

Slideshow overlay full

The full slideshow overlay places an overlay over the entire image. The content of the slideshow is then displayed above the image.

Balloon

Beaumar

Cactii

Derseter

Flaggey

Flower

Grand

Hunter

Lagoon

Leapr

Lorem ipsum

Molestie non

Shadow

Skipper

Skynight

Sundebt

Windows

Woody

Slideshow Boxed

The boxed layout adds a box underneath the items in the slideshow except for the slideshow image.

Skipper

folder3

Skynight

folder3

Sundebt

folder3

Windows

folder3

Woody

folder3

Options and Settings

Theme

The theme applied to the slideshow. Includes none, boxed, overlay, overlay half, overlay full, animate overlay and animated overlay half.

Effect

Effect applied to the slide as it moves from one item to the next. Includes: fade, backslide, go down, fade up and slide. 

Autoplay

When enabled the slideshow automatically transitions to the next slide.

Autoplay Speed

The time between slides when slideshow is autoplaying.

Autoheight

When enabled the slideshow adjusts it's height to match the height of each item in the slideshow.

Slideshow Counter

Displays a counter that shows the number of the current slide and the total of all of the slides in the slideshow.

Navigation Arrows

When enabled next and previous buttons are used to navigate to the next and previous items in the slideshow.

Previous Text 

Text used for button that moves the slideshow to previous item

Next Text

Text used for button that moves the slideshow to next item

Pagination Type

The type of pagination to be used to trigger the display of individual items.Options: None, discs, numbers, thumbs.

Settings for thumbs as pagination

Large screen width

Items to show in the pagination area on large screens

Items to show on large screen

Items to show in the pagination area on large screens

Medium screen Width

Items to show in the pagination area on medium screens

Items to show on medium width

Items to show in the pagination area on medium screens

Small screen width

The px width (without px value) that small screen thumbs are used.

Items to show on small screen

Items to show in the pagination area on small screens

Thumbnail width

The width of thumbnails in the navigation

Thumbnail height

The width of thumbnails in the pagination.

Overview

The filter layout is a grid based layout that allows the user to filter the items that are shown in the module according to their respective categories. The triggers are automatically populated based on the category of your item.