Slideshow

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.

 

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.

 

 

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.

 

Slideshow overlay half

The slideshow below highlights the use of thumbnails to trigger the slideshow. The thumbnails are a linked carousel that scrolls through the available items int he slideshow. You can specify the number of thumbs to display across a variety of screen sizes.

 

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.

 

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.

 

Slideshow Boxed

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

  

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. 

It is possible to use icons rather than text for the previous buttons. To do so you must use the Zen Shortcode plugin which uses syntax as per the following screenshot and example.

slideshow icons

  

Next Text

Text used for button that moves the slideshow to next item

It is possible to use icons rather than text for the next button. To do so you must use the Zen Shortcode plugin which uses syntax as per the following screenshot and example.

slideshow icons

  

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.

  

Setting the width of the title for the Backstretch Slideshow

The backstretch slideshow has the option to specify the minimum width of the title overlay that sits on top of the image in the slideshow. This option can be found in the theme panel in the Zentools2 settings.

1. Go to the options panel in the module.

module theme panel

2. Scroll down to the backstretch section.

backstretch theme

3. Enter the desired minimum width for the slideshow title

4. Recreate master or custom css

create css

5. Click Save