Dottoro Theme Documentation

Tutorial to get your theme to work

18. Slideshows and Popup Slideshows

Dottoro Theme provides a totally unique and extremely flexible way for creating slideshows. You can choose from two basic slider types: single and scroller (carousel), and with the help of the Dottoro template system you can specify what and where you want to display. You can place the navigation buttons below, next to, or above the slides, the play/pause button over the slides, etc. The template system gives you full control not just over the main components of a slider, but also over the look and feel of the slides. Images, videos, pages and posts and any custom HTML content can be displayed in slideshows and with the help of post templates you can specify what data and where you want to display. Image titles and descriptions, post thumbnails, titles, excerpts, categories and tags, authors, custom fields can all be displayed.

Table of contents

• 18.1 Slideshows - Examples For Slideshows
• 18.2 Popup Slideshows - Examples For Popup Slideshows
• 18.3 Slideshow Settings
• 18.3.1 Most Often Used Slideshow Options
• 18.3.2 All Slideshow Options
• 18.4 Slideshow Templates - Slideshow Specific Shortcodes
• 18.5 Styling Guide For Slideshows
• 18.5.1 Styling Of Slideshow and Post Templates
• 18.6 Slides

18.1 Slideshows

As a first step, create a slideshow. Go to Slideshows » Slideshows, click on "Add New" at the top of the page, give your slideshow a name, then click on "Create Slideshow". Then choose one from the premade slider configurations (profiles). There are profiles for both single and scroller type sliders. Just select one that best suits your need then click save.

As you can see, there are several options you can set to change the way a slideshow works. You probably won't need to change most of the settings, but you should check the Slide Width/Height and Media Width/Height options in the Slide Settings section. These options must be set correctly otherwise the slideshow will not look and work as expected. The other options are not so important, you can always change them later.

Now you have a slideshow. The next step is to decide what you want to display in the slideshow. A slideshow can display a gallery or a list of galleries and it is also possible to query for posts and display them in a slideshow.

Examples:

Example 1 - How to add an image slideshow to my homepage?

First you need to create a gallery that contains the images you want to display in the slideshow. Go to the edit screen of your homepage and click on the "Edit Galleries" button in the "Dottoro Galleries" metabox. Create a new gallery in the opening gallery editor, add your images to it then save it. Finally, add a [slideshow] shortcode to the content of your homepage:

[slideshow name="id_of_slideshow" galleries="name_of_gallery" /]

For ease of use, if you want to display the default gallery of a page/post, the gallery doesn't need to be specified:

[slideshow name="id_of_slideshow" /]

Example 2 - I have 3 blog posts that I want to display in a slideshow on my homepage. How do I do this?

Similar as in the previous example, create a new gallery for your homepage and add the 3 blog posts to it. Then add a [slideshow] shortcode to the content of your homepage:

[slideshow name="id_of_slideshow" galleries="name_of_gallery" /]

Example 3 - How to add a slideshow to my homepage that displays the 5 latest blog posts?

Add a [slideshow] shortcode to the content of your homepage by specifying the name of the slideshow you want to display and put a [query] shortcode into it:

[slideshow name="id_of_slideshow"]
	[query post_type="post" posts_per_page="5" /]
[/slideshow]

Example 4 - How to add a slideshow to my homepage that displays the 5 latest blog posts from a the "tech" category?

Add a [slideshow] shortcode to the content of your homepage by specifying the name of the slideshow you want to display and put a [query] shortcode into it:

[slideshow name="id_of_slideshow"]
	[query post_type="post" posts_per_page="5" categories="tech" /]
[/slideshow]

Example 5 - I want to display the same slideshow in the content of every post on my site. How do I do this?

The easiest way to do this is to add a [slideshow] shortcode to the post template used for the posts (more on Post Templates). Then create a global gallery ("Galleries" menu on the admin screen) and specify it for the slideshow shortcode:

[slideshow name="id_of_slideshow" galleries="0:name_of_gallery" /]

Example 6 - I want to add a slideshow to every post on my site and I want the slideshow to display the default gallery of the post. How do I do this?

Add a [slideshow] shortcode to the post template used for the posts (more on Post Templates). Since you want to display the default gallery of the posts, only the name of the slideshow needs to be specified:

[slideshow name="id_of_slideshow" /]

Example 7 - I want to add a slideshow to every post on my site and I want the slideshow to display the "my-gallery" gallery of the post. How do I do this?

The answer is the same as in the previous example, but the gallery must be specified for the slideshow shortcode:

[slideshow name="id_of_slideshow" galleries="my-gallery" /]

Example 8 - How to display the same slideshow in the header/subheader of every post and page on my site?

Create a global gallery ("Galleries" menu on the admin screen) and add the following [slideshow] shortcode to the content of the header/subheader:

[slideshow name="id_of_slideshow" galleries="0:name_of_gallery" /]

If you want to add the slideshow to a subheader, you can also use a gallery of the subheader instead of a global gallery. Add a new gallery to the subheader with the "Edit Galleries" button in the "Dottoro Galleries" metabox and add the following [slideshow] shortcode to the content of the subheader:

[slideshow name="id_of_slideshow" galleries="id_of_subheader:name_of_gallery" /]

The "id_of_subheader" must be replaced with the post id of the subheader.

Example 9 - How to add a slideshow to the header/subheader of every post on my site that displays the default gallery of the post?

Add a [slideshow] shortcode to the to the content of the header/subheader:

[slideshow name="id_of_slideshow" /]

Example 10 - How to add a slideshow to the header/subheader of every post on my site that displays the "my-gallery" gallery of the post?

Add a [slideshow] shortcode to the to the content of the header/subheader:

[slideshow name="id_of_slideshow" galleries="my-gallery" /]

Example 11 - How to add the same slideshow to the sidebar/footer of every post and page on my site?

Create a global gallery ("Galleries" menu on the admin screen) and put a Slideshow Widget into a widget area that is displayed in the sidebar/footer of every page and post (more on Widget Areas). Finally, select the global gallery for the "Gallery" option of the Slideshow Widget.

Example 12 - How to add a slideshow to the sidebar/footer of every post that displays the default gallery of the post?

Put a Slideshow Widget into a widget area that is displayed in the sidebar/footer of every post (more on Widget Areas) and select "Default Post Gallery" for the "Gallery" option of the slideshow widget.

Example 13 - How to add a slideshow to the sidebar/footer of every post that displays the "my-gallery" gallery of the post?

Put a Slideshow Widget into a widget area that is displayed in the sidebar/footer of every post (more on Widget Areas), select "Custom" for the "Gallery" option of the slideshow widget and write "my-gallery" into the input next to it.

Example 14 - How to add a slideshow to the sidebar/footer of every post that displays the 5 latest blog posts?

Put a Slideshow Widget into a widget area that is displayed in the sidebar/footer of every post (more on Widget Areas), and add a [query] shortcode to the "Extra Settings" field:

[query post_type="post" posts_per_page="5" /]

Example 15 - I have slideshow on my homepage displaying images. I want to add the same slideshow to the content of another page. How do I do this?

If the images are in a global gallery, just add the same slideshow shortcode to the content of the page:

[slideshow name="id_of_slideshow" galleries="0:name_of_gallery" /]

If the images are in a gallery of your home page, then you need to refer to the post id of your home page (23 in the example):

[slideshow name="id_of_slideshow" galleries="23:name_of_gallery" /]

Example 16 - I have slideshow on my homepage displaying images. I want to add the same slideshow to the content of another page, but I want the images to be smaller. How do I do this?

You should do the same as in the previous example, but put an [item_settings] shortcode into the slideshow shortcode to modify the size of the images.
Something like this:

[slideshow name="id_of_slideshow" galleries="name_of_gallery"]
	[item_settings media_width="200" media_height="100" /]
[/slideshow]

18.2 Popup Slideshows

Popup Slideshows can be managed under Popups » Gallery Popups. Since popup slideshows are needed on almost every website, the theme comes with a couple of predefined popup slideshows that are designed to meet the most common needs. They are fully responsive meaning they auto-adjust depending on the screen size of the device in both directions, horizontally and vertically. Builtin popup slideshows are readonly, but with the help of premade slider configurations (profiles) you can easily create custom ones.
In the following section, you will find examples for popup slideshows. For a description of popup slideshow options, please read the Slideshow Settings section.

18.2.1 How to open popup slideshows - examples for popup slideshows

Example 1 - How to add an image to the content of a page/post that opens a popup slideshow when the user click on it?

First, create a gallery for the page/post by clicking on the "Edit Galleries" button in the "Dottoro Galleries" metabox on the edit post screen. Give your gallery a name and add the images or any other media, posts or pages to the gallery that you want to display in the popup slideshow.
You will find a Gallery Popup option at the top of the gallery. It allows you to select a popup slideshow for the gallery. For ease of use, you don't need to select a popup slideshow for every single gallery. You can select a default popup slideshow for the whole site, for pages, for posts by post types and for every single post and page (more on the Gallery Popup option).
Save your gallery and close the gallery wizard window. Now click on the "Add Media" button above the WordPress content editor to insert an image to the content of your page/post. When you have selected the image in the media dialog, you will find an Overlay option on the right hand side of the dialog. Select an overlay for your image that contains a [gallery_button]. For instance, the "Gallery" overlay (more on Overlays). Finally, click on the "Insert Into Post" button.
You are done. When the mouse hovers over the image an overlay will be shown and clicking on the gallery button opens a popup slideshow displaying the gallery of the post. If you want to add another image to your page that opens the same popup slideshow, you don't need to do anything else but select the same overlay (or another one that contains a [gallery_button]) on the media dialog.

Example 2 - How to add two images to the content of a page/post that open the same popup slideshow but displaying different galleries?

Create two galleries for the page/post that you want to display in the popup slideshows. Then similar as in the previous example, select an overlay for your images on the media dialog. You will find a Popup Galleries option below the Overlay option on the media dialog. Here you can specify the name of the gallery you want to display in the popup slideshow.

Example 3 - How to add a link, button or any HTML content to a page/post that opens a popup slideshow when the user click on it?

Put the link, button or HTML content into a [popup_opener] shortcode.

For instance:

[popup_opener]<a href="#">Open Gallery</a>[/popup_opener]

Example 4 - I have a post listing page displaying portfolio posts. I want to open a popup slideshow when clicking on the post thumbnails in the list. How do I do this?

First, you should select an overlay for the post thumbnails that opens a popup slideshow (Thumbnail Overlay option in the "Post Thumbnail & Overlay" section).
Then enable popup slideshows with the Enable Popup Galleries option in the "Popup Gallery" section.
Additionally, the Popup Galleries option below it allows you to specify the name of the galleries you want to display in the popup slideshow. You can display any gallery of the posts in the popup slideshow and it is also possible to display the posts themself.
The next option, the Separate Popup Galleries, allows you to select whether you want the popup slideshow to display the given gallery of only the corresponding post or all posts.
Finally, with the help of the Gallery Popup option you can select a popup slideshow for the list.

Example 5 - I have a post_list shortcode displaying posts thumbnails in a 2-column layout. I want to open a popup slideshow when clicking on the post thumbnails. How do I do this?

You should put an [item_settings] shortcode into the post_list shortcode and use the media_overlay attribute of the item_settings shortcode to select an overlay for post thumbnails that opens a popup slideshow. Then, put a [popup_gallery_settings] shortcode into the post list shortcode to specify the properties of the popup slideshow. For details, please see the [popup_gallery_settings] shortcode.

Example 6 - I have a gallery containing posts and a [gallery_list] shortcode that displays the post thumbnails of the gallery in a 3-column layout. I want to open a popup slideshow when clicking on the post thumbnails. How do I do this?

The answer is the same as in Example 5.

Example 7 - I have a [gallery_list] shortcode that displays the 5 latest blog posts. I want to open a popup slideshow when clicking on the post thumbnails. How do I do this?

The answer is the same as in Example 5.

Example 8 - I have a slideshow displaying images. I want to open a popup slideshow when clicking on the images. How do I do this?

First, you should select an overlay for the images that opens a popup slideshow (Media Overlay option in the Slide Settings section).
Then enable popup slideshows with the Enable Popup Galleries option in the Popup Gallery section. If you want to display the same images in the popup slideshow as in your "normal" slideshow, set the Popup Galleries option to "_same". If your slideshow displays post thumbnails, then it is also possible to display the galleries of the posts in the popup slideshow. Just specify the name of the gallery for the Popup Galleries option or set it to "_default" to display the default gallery of the posts.

Example 9 - When I click on the post thumbnail on single post pages a popup slideshow opens. How can I change this popup slideshow?

You will find a Gallery Popup option on the Edit Post screen. It allows you to select a gallery popup for the page.
If you want to change the gallery popup for every post on your site, use the Gallery Popup option under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings.
Finally, to change the default gallery popup for the whole site, use the Gallery Popup option under Theme Options » General.

18.3 Slideshow Settings

Slideshows can be created and managed under Slideshows » Slideshows, popup slideshows under Popups » Gallery Popups. Since normal and popup slideshows work the same way, the same options are available for them. But since gallery popups determine the look of the popup window not just its content, popup related options are also available for them. In the following sections, the slideshow options will be described. For a description of popup related options, please read the Popup Settings section.

Regardless of whether you create a normal or popup slideshow, you will find a profile selection at the top of the page. Each profile is a predefined slideshow configuration. There are profiles for both single and scroller type sliders.

Just select one that best suits your need.

18.3.1 Most Often Used Slideshow Options

Most Often Used Slideshow Options
Slide Width and Height, Media Width and Height	You will find these options in the Slide Settings section and they allow you to set the size of the slides and media displayed in them. If post thumbnails or other images are displayed in the slideshow and the Media Width and Height options are not specified, the full size images will be loaded. It does not mean that the images will be displayed in full size, they will be resized/scaled down if there is no enough space for them. For instance, if you want a single image slider to display 500 pixels wide images, it is advisable to set this option to 500 and not the width of the slideshow/slides to 500, otherwise the images will be downloaded in their original size that can result in slower page loading and more server traffic. It is not always necessary to set the Slide Width and Height options. But for instance if a slide contains only layers (slide posts - Slideshows » Slides - usually contains only layers), the Slide Width and Height must be specified, otherwise the slides will have zero size (layers are absolutely positioned). Tip: You can use selectors for these settings. For instance, you can specify different thumbnail width for posts from different categories. For further details, please see: Slide Width, Slide Height, Media Width, Media Height
Navigation Settings	You will find these options in the "Navigation Buttons - Nested Navigation Sliders" section. You can choose from a couple of simple navigation types (disc, rect, numbered, thumbnail) and you can also use custom navigation buttons. It is also possible to put the navigation buttons into a nested slider. This is extremely useful for a mobile-friendly design and when there are a lot of navigation buttons. For further details, please see the Navigation Buttons - Nested Navigation Sliders section.
Autoplay Settings	In the "Autoplay" section, you can enable or disable automatic playing, set the skin and shape of the autoplay button and the timeline and more. Additionally, on the Autoplay tab in the Transitions section, you can totally customize the properties of the autoplay transition (delay, duration, end action, etc.). For details, please see the Autoplay and Transitions section.
Circular	The Circular option in the General section allows you to select whether the slider should be circular, or not.
Range Navigation	In the Range Navigation section (only available for carousel sliders and not for single sliders), you can select whether you want to show a range navigation for the slider or not and you can also set some of its properties.
Slideshow and Post Templates	Slideshow and post templates give you total creative freedom. A slideshow template specifies what slideshow components and how you want to display. With the help of slideshow templates you can place the navigation buttons below, next to, or above the slides, the play/pause button over the slides, etc. A post template determines how to create slide from a post or media. Post thumbnails and any media, titles and descriptions, categories and tags and more can be displayed in slides. Additionally, you can use selectors for post templates that allow you to target posts, pages and media according to their attributes, such as CSS class, post type, post format, categories and tags. For details, please see the Slideshow Template and Post Template options.

18.3.2 All Slideshow Options

All Slideshow Options
General
Slideshow Template	Here you can select a custom slideshow template instead of the default one. Each slideshow profile comes with a predefined slideshow template (Default template). The slideshow template specifies what slideshow components and how you want to display. You can place the navigation buttons below, next to, or above the slides, the play/pause button over the slides, etc. If you want to change the main layout of a slideshow, you should create a custom slideshow template. But since there are a couple of slideshow settings that highly depend on the layout of the slideshow, it is advisable to always find the slideshow profile that is closest to your needs and use its default slideshow template as a basis to create your own one. For further details, please see Slideshow Templates. Tip: If you want to change the look and feel of slides, you should change the post template not the slideshow template. See Post Template option in the Slide Settings section.
CSS Class	Space separated list of CSS classes to add to the container element of the slideshow. You can use this option to apply individual styles to the slideshow.
Active Slide Index	Specifies the zero-based index of the slide that should be initially active.
Hide Slides From Search Engines	Select the slides you want to hide from search engines. Hidden slides will be placed in comments so search engines will ignore them. Since the contents of popup windows are hidden from search engines, this setting is relevant only if the slideshow is displayed in the content not in a popup window.
Orientation	Select whether the slider should be horizontal or vertical. RTL mode is also supported. Sliders automatically detect the text direction (direction CSS property) and if it is right-to-left, horizontal sliders will run in RTL mode. Please note that the Inner View Height option must be specified for vertical carousels.
Slide Align - Demo Site	Here you can set the default alignment of slides in the direction corresponding to the orientation of the slider. In other words, it specifies the horizontal alignment of slides in a horizontal and the vertical alignment of slides in a vertical slider. The value "left / top" means that the alignment is left in a horizontal and top in a vertical slider. Similarly, the value "right / bottom" means the alignment is right in a horizontal and bottom in a vertical slider. If this option is set to "direction", then the alignment is based on the placement of slides. If the first slide is leftward/topward (horizontal/vertical slider) from the last slide, the alignment will be "left / top", otherwise the alignment will be "right / bottom". This actually means that the alignment will be top in a vertical slider, and it will be right in a horizontal slider if the text direction is right-to-left, otherwise it will be left. Please note that the slide alignment specified here can be overridden by any slide transition (Slide Align option for transitions).
Slide Align - Opposite Direction	Here you can set the alignment of slides in the direction opposite to the orientation of the slider. In other words, it specifies the vertical alignment of slides in a horizontal and the horizontal alignment of slides in a vertical slider. The value "left / top" means that the alignment is left in a vertical and top in a horizontal slider. Similarly, the value "right / bottom" means that the alignment is right in a vertical and bottom in a horizontal slider.
Horizontal Slide Alignment	Select the horizonal alignment of slides. If the Context Dependent Slide Width option (Dimensions section) is disabled, this option only takes effect during transitions between different size slides.
Vertical Slide Alignment	Select the vertical alignment of slides. It only takes effect during transitions between different size slides.
Overscroll - Demo Site	Here you can set the amount of space before the first and after the last slide. It limits the scrolling area of the slides in a non-circular slider (see Circular option). In circular sliders, this setting does not have any effect. Possible values: none: no space before and after the slides min: the minimum amount of space that is required for the alignment of slides (see the "Slide Align" option above) to be met. If "Slide Align" is left/top, then no space before the leftmost/topmost slide and as much space after the rightmost/bottommost slide as needed for the slides to be left/top aligned. The right/bottom case is analogous to the left/top case. Finally, if "Slide Align" is center, then as much space before and after the slides that is needed for the slides to be centered. max: as much space as needed for the first and last slides to be positioned as the "Slide Align" option specifies. If "Slide Align" is left/top, then no space before the leftmost/topmost slide and as much space after the rightmost/bottommost slide as needed for the last slide to be positioned to the left/top. The right/bottom case is analogous to the left/top case. Finally, if "Slide Align" is center, then as much space before and after the slides that is needed for the first and last slides to be centered.
Circular - Demo Site	Select whether the slider should be circular, or not.
Slides Per Page	Specifies the number of slides in a page. This setting is relevant only if a page-based navigation is used for the slider (Navigation Unit option in the "Navigation Buttons" section). The value of 0 means that the slider will automatically determine the number of slides based on the view size.
Pause Autoplay On Over	Select whether slide transitions should be paused when the mouse is over the slideshow, the slides or no need to pause transitions.
Pause Type	Set the type of pause. Hard pause means that the current slide transition should be stopped immediately while soft pause allows the current slide transition to be finished but new transitions (autoplay) cannot start. This setting has no effect on infinite slide transitions, they stop immediately.
Slide Activation	Select whether clicking on a slide activates it or not. If this option is enabled, clicking on a slide triggers an absolute transition. For the settings of absolute transitions, please see the Transitions section below.
Auto Slide Align	Select whether the slides should be aligned automatically at the end of dragging and at the end of scrolling with the range control.
Slide Settings Selectors are supported for the next options
Slide Width	Set the width of the slides, in pixels. This option works differently based on the setting of the Context Dependent Slide Width option (Dimensions section). If Context Dependent Slide Width is: enabled, then you can also use percentage values for the Slide Width. This is mostly useful for full browser width sliders when you want the slides to have the same width as the screen of the user. In this cases, just set the Slide Width to "100%". disabled, then you cannot use percentage values for the Slide Width. Leave Slide Width blank if you want the size of slides to be determined by their content, for instance, when you want variable width slides. Or specify the width of the slides, in pixels (no need to write "px" at the end). Please note that since slide posts (Slideshows » Slides) usually contains only layers and layers are absolutely positioned, if a slideshow displays slide posts and the Context Dependent Slide Width option is disabled, then the Slide Width must be specified, otherwise the slides will have zero-width.
Slide Height	Set the height of the slides, in pixels. Leave this field blank if you want the size of slides to be determined by their content, for instance, when you want variable height slides. Please note that since slide posts (Slideshows » Slides) usually contains only layers and layers are absolutely positioned, if a slideshow displays slide posts, the Slide Height must be specified, otherwise the slides will have zero-height.
Media Width	Set the width of media, in pixels. For external media, it specifies the max-width. Also see the "Media Sizing Method" below. For images, if the width and height are not specified, the full size images will be loaded. It does not mean that the images will be displayed in full size, they will be resized/scaled down if there is no enough space for them. But for instance, if you want a single image slider to display 500 pixels wide images, it is advisable to set this option to 500 and not the width of the slideshow/slides to 500, otherwise the images will be downloaded in their original size that can result in slower page loading and more server traffic.
Media Height	Set the height of media, in pixels. For external media, it specifies the max-height. Also see the "Media Sizing Method" below. For images, if the width and height are not specified, the full size images will be loaded.
Media Sizing Method	Select a sizing method for media. Exact: the media should be displayed in the size as specified by the Media Width and Height options. Max Cut: if the media is wider and higher than the area specified by the Media Width and Height options, then works the same as "Exact", otherwise if needed, the media will be cut down to fit the area, but will never be enlarged. Max No Cut: if the media is larger than the area specified by the Media Width and Height options, the media will be scaled down to fit the area while keeping the aspect ratio. In other words, it keep the aspect ratio and works the same as the CSS max-width and max-height properties. Please note that the sizing method is always "Max No Cut" for external media. Examples: If the size of the media is 400 x 200: Media Width/Height options Exact Max Cut Max No Cut 100 x 100 100 x 100 scaled down to 200 x 100 and 50 pixels are cut from both the left and right sides 100 x 100 scaled down to 200 x 100 and 50 pixels are cut from both the left and right sides 100 x 50 scaled down to 100 x 50 800 x 100 800 x 100 scaled up to 800 x 400 and 150 pixels are cut from both the top and bottom sides 400 x 100 50 pixels are cut from both the top and bottom sides 200 x 100 scaled down to 200 x 100 200 x 400 200 x 400 scaled up to 800 x 400 and 300 pixels are cut from both the left and right sides 200 x 200 100 pixels are cut from both the top and bottom sides 200 x 100 scaled down to 200 x 100 800 x 400 800 x 400 scaled up to 800 x 400 400 x 200 400 x 200
Post Template	Select a post template for the slides. A post template determines how to create slide from a post or media. Post thumbnails and any media, titles and descriptions, categories and tags and more can be displayed in slides (more on Post Templates). Please note that no post templates used for slide posts (Slideshows » Slides) in main sliders. Their contents are displayed as they are. But this is not true for navigation sliders. In navigation sliders, the post template setting applies to slide posts as well. Tip: If you want to change the main layout of the slideshow, you should change the slideshow template not the post template. See Slideshow Template option in the General section.
Post Content Preview	Select whether the whole content, the teaser or the excerpt of posts should be shown in slides or you want none of them to show. This option only has an effect on posts and not media and relevant only if the post template contains a [post_content] shortcode.
Excerpt Length	Set the length of excerpts in characters. Works for both media descriptions and excerpts of posts. This option is relevant only if the post template contains a [post_content] shortcode, and for posts if it displays an excerpt (see Post Content Preview option above).
Heading Tag	Specify the HTML heading tag of post titles. This option is relevant only if the post template contains a [post_title] shortcode.
Show Title as Link	Select whether to show the title as a link or not. This option is relevant only if the post template contains a [post_title] shortcode.
Show Media as Link	Select whether to show post media as a link or not. This settings has an effect only on thumbnails ([post_thumbnail] shortcode) and on image attachments (self hosted images). This option is relevant only if the post template contains a [post_title] shortcode.
Show Media Frame	Select whether to show a frame around media or not. This option is relevant only if the post template contains a [post_media] or [post_thumbnail] shortcode.
Media Overlay	Select an overlay to appear over media. It has an effect on both self hosted an external media and on thumbnails as well. This option is relevant only if the post template contains a [post_media] or [post_thumbnail] shortcode. If you want to open a popup window from the overlay, the Enable Popup Galleries option must be set to true. More on Overlays
Dimensions
Slideshow Width	Set the width of slideshow, in pixels. In most cases, it is enough to set the width of the slides/media (Slide Settings section) and not necessary to set this option.
Slideshow Height	Set the height of the slideshow, in pixels. This option is rarely needed. In most cases the height of the slideshow should be determined by its content. The only case when the height should be set is when the orientation of a carousel slideshow is vertical. But in this case, it is better to set the height of the visible area of slides (Inner View Height option) not the slideshow.
Flexible Height	Select whether the height of the slideshow should be reduced when there is not enough vertical space for the slideshow. This option should be selected if the height of the slideshow is set (Slideshow Height option above or with CSS) and the vertical space available for the slideshow can be less than the height of the slideshow. For instance, when the slideshow is displayed in a popup window. For performance reasons, if the height of the slideshow is not set, this option should not be selected. Technically, this option adds a js-flex-height class to the slideshow wrapper element which is one of the features of the Dottoro CSS Extension JavaScript Toolkit.
Inner View Width	There are two wrapper elements around the slides, the outer wrapper - outer view and the inner wrapper - inner view. The outer wrapper determines the viewport - the visible area of slides while the inner wrapper is intended to provide a reference system that gives you more options for aligning the slides and when you want to put the previous and next buttons or any other content over the slides. With the "Inner View Width" option you can specify the width of the inner view. For further details, please see outer and inner views.
Inner View Height	This option is mostly useful for vertical carousels (Orientation option in the General section) and specifies the height of the inner view. Also see the Inner View Width option above and the Inner View Flexible Height option below. For further details, please see outer and inner views.
Inner View Flexible Height	Select whether the height of the inner view should be reduced when there is not enough vertical space for it. This option should be enabled if the height of the inner view is set (Inner View Height option above) and the vertical space available for the viewport can be less than the height of the visible area. For instance, when the slideshow is displayed in a popup window. For performance reasons, if the height of the inner view is not set, this option should not be selected. Technically, this option adds a js-flex-height class to the slideshow\'s inner view which is one of the features of the CSS Extension JavaScript Toolkit. For further details, please see outer and inner views.
Context Dependent Slide Width	Select whether the slide width should depend on the context or the content of the slide. This option affects the way the Slide Width option works (Slide Settings section). If you select this option, you can use percentage values for the Slide Width option (such as 100%). This is helpful for full browser width slideshows when the width of the slideshow depends on the screen size of the user.
Scale Slides	Select whether the slides should be scaled down when they are wider/higher then the visible area. This feature is mostly useful if the slides contain some text (not just images). Single sliders: The active slide will be scaled down if it is wider or higher than the visible area. Horizontal carousel (scroller): The slides will be scaled down if the highest slide is higher than the visible area. Please note that if the Inner View Flexible Height option is enabled, the slides will not be higher than the visible area only if their CSS min-height is specified. Vertical carousel (scroller): The slides will be scaled down if the widest slide is wider than the visible area. Note that CSS "max-width: 100%" is set for slides, by default. If you want the scale feature to work for vertical carousels, you need to set a min-width for slides (or remove the max-width).
Scale Highlighting	With the help of these options you can highlight some slides by displaying them in a larger size than the others. The measure of scale is based on the align of slides (see Slide Align in the General section) and position of the slide. For instance, if the slides are centered, slides closer to the center will be the larger. Number of slides to highlight: The maximum number of slides that should be highlighted. The value 0 means the scale highlighting feature is disabled, no need to highlight at all. There is a special value, the -1 that means highlight the visible slides. Minimum scale: The scale amount of non-highlighted slides. Overlap: The measure of overlap of slides. The value 0 means no overlap. Limitations: If the scale highlighting feature is on: The Overscroll option in the General section will be ignored, "max" will be used. The Navigation Unit option in the Navigation Buttons section must be set to "slide". The Unit option on the Relative tab in the Transitions section (and in the Autoplay tab if specified) must be set to "slide", "%" or "px". The "page", "view" and "view - slide boundary" values cannot be used.
Transitions
There are basically two types of slide transitions: relative and absolute. The result of a relative transition depends on while the result of an absolute transition is independent of the current state of the slider. The previous and next buttons, the left and right arrow keys on the keyboard and the autoplay trigger relative slide transitions. The navigation buttons (thumbnail navigation, disc navigation, etc.), range navigation and clicking on a slide (see Slide Activation option) trigger absolute transitions. Settings under 'Default Transition' affect both absolute and relative transitions. In the "Absolute" tab, you can override these settings for absolute transitions. In the "Relative" tab, you can override these settings for relative transitions and you can also set some relative transition specific properties. Options in the "Autoplay" tab allow you to specify the autoplay transition settings. Since autoplay triggers a relative transition, you only need to set those settings that are different from the relative transition settings.
Default Transition
Autoplay After Transition	Set the state of autoplay after the transition. The "do not change" means that the autoplay state will be the same after the transiton as it was before the transition.
Slide Align - Demo Site	Set the alignment of slides at the end of the transition. This option specifies the alignment in the direction corresponding to the orientation of the slider. In other words, it specifies the horizontal alignment of slides in a horizontal and the vertical alignment of slides in a vertical slider. Possible values: auto: the alignment is determined by the Slide Align option in the General section. scrolling direction: the slides will be aligned to the top/left/bottom/right if scrolling to the top/left/bottom/right. If you choose this option, it is advisable to set the Overscroll option to "none" or enable the Circular option (General section).
Change Active Slide - Demo Site	Select whether the transition should change the active slide or not. For instance, if clicking on the previous and next buttons does not change the active slide, the slides will be scrolled but the transition will not change which slide is active. Some notes: Usually, this option must be set to "change" in main sliders and to "do not change" in navigation sliders. If the navigation unit is slide for an absolute transition, the transition always changes the active slide. In other words, if the Navigation Unit option in the "Navigation Buttons" section is set to slide, clicking on the navigation buttons will change the active slide. Additionally, if the Slide Activation option is enabled (General section), clicking on a slide will make it active.
Active Slide Position - Demo Site	Set the zero-based position of the active slide relative to the align of slides (see Slide Align). For instance, if the position is 1 and the slides are left aligned, the active slide will be the second one from the left at the end of the transition. This setting has effect only if the slides are not centered and the transition changes the active slide (see the Change Active Slide option and its description for details).
Move Slides - Demo Site	Select which cases the slides should be scrolled. This setting is relevant only if the transition changes the active slide (Change Active Slide option). Possible values: always: always move the active slide to the position specified by the Slide Align and Active Slide Position options. visible: scroll the slides only if the active slide is not visible. inward: scroll the slides only if the active slide is not visible or on the edge of the view. The active slide is on the edge of the view if it is further away from the center as the Active Slide Position option specifies. For instance, if Active Slide Position is set to 1 and Slide Align is left, then if the active slide is the first visible slide from the left, or it is the second one but the first one is not entirely visible, the active slide is on the edge of the view and will be scrolled to the second position from the left.
Animation Duration	The duration of the transition animation, in milliseconds. Please note that the transition may take shorter time depending on the value of the Minimum Scrolling Speed option. In scroller type sliders (carousels), you can also use negative durations for autoplay transitions (Autoplay tabs). Negative duration means infinite scrolling. In these cases, the Delay option is ignored. For instance, If the duration is set to -1000 on the Autoplay tab, the Unit is "slide" and the Value is 1, then the automatic playing will scroll the slides infinitely, one slide per second. If the duration is 1000 and the Delay is 2000, then the automatic playing will scroll one slide per second but wait 2 seconds before every transition. If the duration is 1000 and the Delay is 0, then you will get a similar effect as when the duration is -1000, but the Animation Easing option has an effect on the transition although, you can set the Animation Easing to linear to get the same effect as when the duration is -1000, but the animation will not as smooth as for negative durations. In summary, if you want a smooth, continuously scrolling autoplay animation for a carousel, set the duration to a negative number. In other cases, set the duration to a positive number and use the Delay option to specify the delay between transitions.
Minimum Scrolling Speed	Specifies the minimum number of pixels the slides should be scrolled by during the transition animation per second.
Animation Type	The type of the transition animation.
Animation Easing	The easing of the transition animation.
Type-specific Transition Options
Relative Transitions
Unit	Specifies the unit of navigation. For the page unit, you can use the Slides Per Page option (General section) to specify the number of slides in a page. The value of 0 means that the slider will automatically determine the number of slides based on the view size. This is helpful for a responsive design when the view size, thereby the number of visible slides can change. The "view" and "view - slide boundary" units are similar. The "view" unit means scroll by the size of the view. The "view - slide boundary" unit means that scroll as much as possible but the maximum amount of scroll is the size of the view and the slides must be aligned as specified by the Slide Align option. The percentage unit allows you to scroll by an amount that is relative to the sum size of the slides. For instance, if the Value option is set to 20, then it means that scroll by the 20% of the sum size of the slides. It is mostly useful for autoplay animations when you want a "lap" to always take the same time, regardless of the size/number of the slides. Also see the Value option.
Value	Specifies the amount of units to scroll by. The unit is specified by the Unit option above. This option is not supported (value is always 1) for the "view - slide boundary" unit.
End Action	Set the action that should be taken when the transition cannot be performed because the slides are scrolled to the start/end position. This option has only effect on non-circular sliders (Circular option - General section).
Autoplay Transition
Direction	Select the direction of the autoplay animation.
Delay	Specifies the delay time, in milliseconds, before the transition begins. If the Animation Duration is negative, the delay is ignored.
Autoplay
Enable Autoplay	Enable or disable automatic playing.
Show Autoplay Button	Select whether to show the play/pause buttons, or not. Technically it determines whether the [slider_button type="play" /] shortcode in the slideshow template should generate any content or not. If there is no [slider_button type="play" /] shortcode in the slideshow template, this option has no effect.
Autoplay Button Visibility	Select whether the autoplay button should be always visible, only when it is enabled or only when the mouse hovers over the slideshow.
Autoplay Button Skin	Select a skin for the autoplay button.
Autoplay Button Shape	Select the shape of the autoplay button. If you select "Custom", you should add a background image and/or custom styling to the play button.
Play Button Icon	Set the icon of the play button. Default is 'arrow-right-2'. For a complete list of icons, see Font Icons. If you do not want to display any icon, set the value to "none". Technically, this option specifies an icon for the [slider_button type="play"] shortcode in the slideshow template.
Pause Button Icon	Set the icon of the pause button. Default is 'pause'. For a complete list of icons, see Font Icons. If you do not want to display any icon, set the value to "none". Technically, this option specifies an icon for the [slider_button type="pause"] shortcode in the slideshow template.
Show Timeline	Select whether to show the autoplay progress line, or not. Technically it determines whether the [slider_timeline /] shortcode in the slideshow template should generate any content or not. If there is no [slider_timeline /] shortcode in the slideshow template, this option has no effect.
Timeline Skin	Select a skin for the timeline.
Previous and Next Navigation - Dragging
Show Prev/Next Buttons	Select whether to show the previous and next buttons, or not. Technically it determines whether the [slider_button type="prev" /] and [slider_button type="next" /] shortcodes in the slideshow template should generate any content or not. If there is not previous and next buttons in the slideshow template, this option has no effect.
Prev/Next Buttons Visibility	Select whether the previous and next navigation buttons should be always visible, only when they are enabled or only when the mouse hovers over the slideshow.
Prev/Next Buttons Skin	Select a skin for the previous and next buttons.
Prev/Next Buttons Shape	Select the shape of the previous and next buttons.
Previous Button Icon	Set the icon of the previous button. Empty string means that the icon is selected automatically (arrow-left-3 or arrow-up-3) based on the orientation of the slideshow. If you do not want to display any icon, set the value to "none". For a complete list of icons, see Font Icons. Technically, this option specifies an icon for the [slider_button type="prev"] shortcode in the slideshow template.
Next Button Icon	Set the icon of the next button. Empty string means that the icon is selected automatically (arrow-right-3 or arrow-bottom-3) based on the orientation of the slideshow. If you do not want to display any icon, set the value to "none". For a complete list of icons, see Font Icons. Technically, this option specifies an icon for the [slider_button type="next"] shortcode in the slideshow template.
Pause Autoplay On Over	Select whether the slideshow should be paused when the mouse is over the previous or next button.
Enable Keyboard Navigation	Select whether keyboard navigation is allowed, or not. If this option is enabled, slide transitions can be performed using the left and right arrow keys.
Repeat Delay	Holding down the left mouse button or your finger on the previous or next navigation button changes the slides continuously. The same happens when the keyboard navigation is enabled and you hold down the left or right arrow keys. The "Repeat Delay" option allows you to specify the pause time between slide transitions, in milliseconds. A negative value means that automatic playing is disabled.
Drag Support	Select the devices you want the drag support to be enabled for.
Navigation Buttons - Nested Navigation Sliders
Navigation Type	Select the type of the navigation. You can choose from image (with and without border), numbered, disc, rectangle and custom navigations. Regardless of the selected navigation type, you can decide whether you want to display the navigation buttons in a nested slider or not. For details, please see the Nested Slider For Navigation option. A custom navigation is always displayed in a nested slideshow and in these cases the nested slideshow allows you to select post templates for the slides (the navigation buttons are the slides of the nested slideshow). It gives you full control over the look and feel of the navigation.
Skin	Set the skin of navigation. Works for disc, rectangle and numbered navigations. The "auto" means that the look of the navigation is determined by the skin of the theme (Components » Slideshows in the theme editor).
Navigation Visibility	Select whether the navigation should be always visible or only when the mouse hovers over the slideshow.
Alignment	Set the alignment of the navigation.
Pause Autoplay On Over	Select whether the slideshow should be paused when the mouse is over the navigation, or not.
Show tooltip	Select whether to show a tooltip over the navigation items or not. Works for all navigation types excluding the custom one. If you want to show a tooltip for a custom navigation, add a [tooltip] shortcode to the media/post template used for the navigation items.
Event	Select the event that should trigger the slide transition.
Navigation Unit	Select the unit of the navigation. This option is only available for disc, rectangle and numbered navigations. For other navigation types, the unit is always "slide". For the page unit, you can use the Slides Per Page option (General section) to specify the number of slides in a page. The value of 0 means that the slider will automatically determine the number of slides based on the view size. This is helpful for a responsive design when the view size, thereby the number of visible slides can change. Limitations: If the navigation unit is page: The Slide Align option in the General section must be set to "left / top" or if a horizontal slider runs in RTL mode, "right / bottom". Scale highlighting is not supported. The "Number of slides to highlight" must be set to 0 for the Scale Highlighting option in the Dimensions section.
Map Gallery	By default, the same gallery is used for the navigation as for the slideshow (slides), but you can change this behavior. Currently, only the _parent_post value is supported that means that the gallery used for the navigation will contain the parent posts of the gallery items used for the slideshow. For instance, if the slideshow displays the "gallery1" gallery of the posts with id of 21, 22 and 23 and the "Map Gallery" option is set to "_parent_post", the navigation will display the posts with id of 21, 22, and 23 not their galleries. Or another example. If the Separate Popup Galleries option is disabled for a post list, then clicking on the post thumbnails open a popup slideshow displaying the merged galleries of the posts. If you want a navigation for the slideshow that displays the post titles: You should create a custom post template that displays the post title (more on Post Templates): [post_title /] Select this post template for the navigation items (Post Template option in the nested slider used for the navigation). And set the "Map Gallery" option to "_parent_post". Clicking on the navigation buttons the slides will be scrolled to the first gallery item to the post. Note that the "Map Gallery" option is only supported for custom navigations (Navigation type option) and if the "Map Gallery" option is specified, the Navigation Unit option will be ignored.
Nested Slider For Navigation	Select whether to use a nested slider for the navigation or not. With the help of nested sliders, a slider can easily be made mobile-friendly. Moreover, nested sliders are extremely useful when there are a lot of navigation buttons for a slider. For a nested slider, The same options are supported as for a main slider. Profiles, previous and next buttons, autoplay and more are all supported for nested sliders. Additionally, nested sliders can also have a navigation buttons that can also be displayed in a nested slider.
Navigation Item Width	Set the width of the navigation items, in pixels. This option is available only if the navigation is not displayed in a nested slider. If the navigation is displayed in a nested slider, the Slide Width option of the nested slider (Slide Settings section) provides similar functionality.
Navigation Item Height	Set the height of the navigation items, in pixels. This option is available only if the navigation is not displayed in a nested slider. If the navigation is displayed in a nested slider, the Slides Height option of the nested slider (Slide Settings section) provides similar functionality.
Scale Down	Select whether the navigation should be scaled down if there is no enough space for it or the items should be displayed in multiple rows. This option is available only if the navigation is not displayed in a nested slider.
Range Navigation
Show Range Navigation	Select whether to show a range navigation, or not. Technically it determines whether the [range_control] shortcode in the slideshow template should generate any content or not. If there is no [range_control] shortcode in the slideshow template, this option has no effect.
Thumb Skin	Select a skin for the thumb of the range navigation.
Animation Duration	Specifies how long the thumb should take, in milliseconds, to move to a new position. The value 0 means go to the new position immediately. For instance, if this value is 1000 and the user clicks on the track of the range control, the thumb will take one second to reach to the new position.
Animation Easing	Select an easing for the thumb animation.
Popup Gallery
Enable Popup Galleries	Enable this option if you want to open popup slideshows from the slideshow. There are two shortcodes that are designed to open popup slideshows: the [gallery_button] and [popup_opener] shortcodes. If you select an overlay or post template for the posts (Media Overlay and Post Template options) that contains a [gallery_button] or [popup_opener] shortcode, then clicking on it will open a popup slideshow. The popup slideshow will display the given gallery (Popup Galleries option) of the corresponding post or all posts based on the setting of the Separate Popup Galleries option. For this feature to work, the "Enable Popup Galleries" option must be enabled. For performance reasons, do not enable this option if you don't need popup galleries.
Popup Galleries	Comma separated list of galleries that should be open in the popup slideshow. For instance, "gallery1" means that the popup slideshow will display the "gallery1" gallery of posts, while "gallery1, gallery2" means that the popup slideshow will display both the "gallery1" and "gallery2" galleries of posts. If this option is not specified, the default gallery will be used. Additionally, there are two special values: _default: identifies the default gallery. For instance, "_default" means the same as an empty string, "_default, gallery1" means that the popup slideshow will display both the default gallery and the "gallery1" gallery of posts. _same: the popup slideshow will display the same galleries/posts as the slideshow. It works when the gallery is specified with the "galleries" attribute of the [slideshow] shortcode and also when the slideshow displays the result of a query (nested [query] shortcode). For instance, if you have a gallery containing 5 videos and every video has a thumbnail, you can display the thumbnails as a carousel and clicking on the thumbnails opens a popup slideshow displaying the videos. Or for instance, you can display the thumbnails of the 5 latest posts in the carousel and clicking on the thumbnails a popup slideshow opens displaying full size thumbnails, post titles and descriptions. See this demo page, it demonstrates the use the the "_same" value for post list pages.
Separate Popup Galleries	Select whether the popup slideshow should display the given gallery (Popup Galleries option) of only the corresponding post or all posts. For instance, if the Popup Galleries option is set to '_default', then: if the "Separate Popup Galleries" option is enabled, then the popup slideshow will display only the default gallery of the corresponding post if the "Separate Popup Galleries" option is disabled, then the popup slideshow will display the default galleries of all posts
Gallery Popup	Select a gallery popup for the slideshow. It will be used by the [gallery_button] and [popup_opener] shortcodes to display popup slideshows. The "Determined by gallery" means that the (first) displayed gallery determines the gallery popup. For further details, please see Popup Slideshows.

18.4 Slideshow Templates - Slideshow Specific Shortcodes

There are two kinds of templates that can be used for slideshows: slideshow template and post template.

With the help of slideshow templates you can specify what slideshow components and how you want to display. You can place the navigation buttons below, next to, or above the slides, the play/pause button over the slides, etc. You will find a Slideshow Template option in the General section for every slideshow. It allows you to select a custom slideshow template for the slideshow.

Although slideshow templates give you total creative freedom, but does not allow you to change the look and feel slides (and custom navigations). For these purposes, the post templates can be used.

In the following sections, the slideshow template and the slideshow specific shortcodes will be described. For a description of post templates, please read the Post Templates section.

18.4.1 Creating and Managing Slideshow Templates

Slideshow templates can be created and managed under Templates » Slideshow Templates. The theme comes with a couple of predefined templates and you can also create custom ones. The contents of custom slideshow templates can be edited the same way as the contents of pages and posts, and you can also use shortcodes in them. There are some shortcodes that have been designed for slideshow templates. You will find their description in the Slideshow Specific Shortcodes.
The predefined templates are read-only, but you can view their content that give you a good basis to create your own templates.

To create your own slideshow template:

• Since you want to create a slideshow template, you probably already have a slideshow. If not, create a slideshow first and select a profile for it that is close to your expectations. For details, please see the Slideshows section.
• Now take a look at the Slideshow Template option of your slideshow (General section). Here you will find the name of the default template used by the profile.
• Go to Templates » Slideshow Templates and click on this template.
• Copy its content to the clipboard, then click on "Add New" at the top of the page.
• Give your new slideshow template a name, then click "Create slideshow template".
• Paste the clipboard content into the content editor below the title field.
• Make the required modifications in the content of the slideshow template.

  For instance, if you want to move the navigation buttons from the bottom to the top of the slideshow, put the [slider_navigation] shortcode before the [slider_slides] shortcode.

  As you can see, there are a couple of shortcodes that are designed for slideshow templates. They are described in the following section.
• Finally, click Save Template.

You are done, your custom slideshow template is ready to use. Now if you select the new slideshow template for your slideshow (Slideshow Template option in the General section), you will see the changes.

18.4.2 Slideshow Specific Shortcodes

These shortcodes can only be used in slideshow templates and display the main components of a slideshow.

• [range_control]

  Displays a range control for the slideshow. Range controls can only be used for scroller (carousel) type sliders. Single sliders ignores them.

  Attributes
  orientation	Specifies the orientation of the range control (horizontal | vertical). By default, the orientation of the range control is the same as the orientation of the slideshow.
  skin	Specifies the skin of the range control (dark | light). If this attribute is specified, it overwrites the Thumb Skin setting of the slideshow.

• [slider_timeline]

  Displays an autoplay timeline for the slideshow.

  Attributes
  skin	Specifies the skin of the timeline (dark | light). If this attribute is specified, it overwrites the Timeline Skin setting of the slideshow.

• [slider_button]

  With this shortcode, you can display different type of buttons in a slideshow. Optionally, you can put any HTML content into the button. This is helpful if you need a totally custom button, for instance, a custom next and previous button.

  Attributes
  type	Specifies the type of the button. Supported button types: prev: previous button - go to the previous slide next: next button - go to the next slide play: play button - start automatic playing pause: pause button - stop automatic playing
  event	Specifies the event that should trigger the previous/next transition (click | mousedown | mouseenter). Only works for previous and next slider buttons (when the "type" attribute is set to "prev" or "next").
  icon	Specifies an icon for the button. An empty string means that the default icon will be used. The default icon can be set with the Previous Button Icon, Next Button Icon, Play Button Icon and , Pause Button Icon slideshow options. For a complete list of icons, see Font Icons. If you do not need any icon, set the icon attribute to 'none'. Please note that if the [slider_button] shortcode has HTML content, no icon will be shown.
  skin	Specifies the skin of the button (dark | light).
  shape	Specifies the shape of the button (simple, square, square_border, square_small, square_small_border, square_medium, square_medium_border, rect, disc, disc_border, disc_small, disc_small_border, disc_medium, disc_medium_border, halfdisc, fullsize).
  visibility	Specifies whether the button should be always visible, only when it is enabled or only when the mouse hovers over the slideshow (always | enabled | hover | hover_hide_change).
  tag	Specifies whether the tag name of the wrapper HTML element for the button. Default is "div".
  transition	Specifies the properties of the slide transition triggered by the button. This option is only supported for the previous and next buttons and mostly useful if you want to add multiple previous/next buttons to a slideshow. For instance, a previous/next button that scrolls by slides and another previous/next button that scrolls by pages in a carousel. In these cases, you should override some transition settings for one of the previous/next buttons. The previous/next buttons trigger a relative transition. The settings of relative transitions can be specified in the Transitions section on the Edit Slideshow Screen. These can be overridden by the transition attribute of the slider_button shortcode. Some of the overridable properties: unit: The unit of the navigation. Overrides the Unit option. Possible values: 'slide', 'page', 'view', 'view_slide_boundary', 'px', '%'. value: The amount of units to scroll by. Overrides the Value option. Possible values: any number. end_action: The action that should be taken when the transition cannot be performed because the slides are scrolled to the start/end position. Overrides the End Action option. Possible values: 'stop', 'rewind'. anim_duration: The duration of the transition animation, in milliseconds. Overrides the Animation Duration option. Possible values: any number. The value of the transition attribute must be specified in JavaScript object literal format, but without opening and closing curly braces ("prop:value, prop:value, ..."). Example: [slider_button transition="unit:'page', value:1" type="prev" /]

• [slider_buttons_wrapper]

  This shortcode provides a standard way to create a wrapper element around certain slideshow buttons.
  The [slider_button] shortcode allows you to create a play and pause button separately to make it easier to design them. But since the play button does the opposite of the pause button, in most cases they are placed at the same place and only one of them is visible at a time. In other words they work like a toggle button.
  The slider_buttons_wrapper shortcode is designed for these cases. It provides a "layer" for the buttons to make it easier to position them.

  Technically, the slider_buttons_wrapper shortcode creates a div element with a type specific CSS class. Currently it can only be used for a wrapper element around a play and pause buttons, but it may be extended if the [slider_button] shortcode will support more button types.

  Attributes
  type	Specifies the type of the buttons wrapper element. Supported types: autoplay: creates a wrapper element around a play and pause button. Code: <div class="slider_buttons_wrapper slider_autoplay__buttons_wrapper"> ... <\div>

• [slider_slides]

  Displays the slides.

  Attributes
  table_layout	Only supported for scroller type sliders (carousels) and not for single sliders. Specifies whether the slides should be put into a HTML table or not (true | false). Default is false. By default, the slides are inline-block elements, but if this option is enabled, they will be put into a table (slides will be the table cells). This is mostly useful for horizontal carousels (scroller sliders) when you want the slides to have the same height but you don't want to set the height directly. For instance, when the slides have text content and you don't have a control over the length of the content. If the table_layout option is enabled for a horizontal slider, the slides will not be responsive vertically.
  inner_class	Space separated list of CSS classes to add to the inner wrapper element of the slides. CSS classes allow you to apply individual styling. As described in the Outer and Inner Views section below, the list of slides has two wrapper elements: an outer wrapper and an inner wrapper. In the Dottoro theme, if a shortcode gets an unknown attribute, it will be assigned to the top level HTML element of the content created by the shortcode. This means that if you specify the "class" attribute for the [slider_slides] shortcode ([slider_slides class="mySlides" /]), it will be added to the outer wrapper element. So, in short, to add custom CSS classes to the outer wrapper, use the "class" attribute, to add them to the inner wrapper, use the "inner_class" attribute.

  Outer and Inner Views

  The [slider_slides] shortcode puts the list of slides into three HTML elements:

  • outer wrapper element - the outer view. CSS class: slider_slides_outer_wrapper
  • inner wrapper element - the inner view. CSS class: slider_slides_inner_wrapper
  • and an innermost element. CSS class: slider_slides
  These elements give you full creative freedom in designing. Additionally, there are two shortcodes that can be nested into the [slider_slides] shortcode, the [outer_wrapper_custom] and [inner_wrapper_custom] shortcodes that allow you to add custom content to the outer and inner wrapper elements.
  For instance like this:

  [slider_slides]
  	[outer_wrapper_custom]
  		Your content here
  	[/outer_wrapper_custom]
  [/slider_slides]

  This is extremely useful if you want to put the previous and next buttons or any custom content over the slides.
  Single Sliders

  In single sliders, the inner wrapper has the same size as the currently displayed slide. The same is true for the innermost element. If you want to put the previous and next buttons or any other content over the slides, use the [inner_wrapper_custom] shortcode (you will find examples in the Scroller Sliders section below).
  The innermost element does not have much practical use for single sliders, but we wanted single sliders to have the same structure as the scroller sliders.
  The outer wrapper is a block element around the inner wrapper so it fills the available space horizontally. It is used to center the inner wrapper horizontally. You can add custom content to it with the [outer_wrapper_custom] shortcode.

  Scroller Sliders (Carousels)

  In scroller sliders, the innermost element is a container element for the list of slides. In a horizontal carousel, the slides are placed side-by-side, in a vertical slider, one below the other in the container. When the slides need to be scrolled, the innermost element is moved.

  In scroller sliders, the outer wrapper determines the viewport - the visible area of slides. Similar to single sliders, the outer wrapper is a block element so it fills the available space horizontally.
  The inner wrapper is intended to provide a reference system that gives you more options for aligning the slides and when you want to put the previous and next buttons or any other content over the slides.

  For instance, if you take a look at this demo slider, you will see that the slides are aligned to the left, but not to the left hand side of the outer view but 135 pixels from the left. This is useful if the slider is wider than the page content and you want the slides to be aligned to the left/right hand side of the content. In this demo, the inner wrapper has margin on the left and the alignment of slides (Slide Align option is set to left. The alignment of slides is always relative to the inner view not the outer view.

  You can find another example for the use of the inner view in this demo page. As you can see this is a full width slider on a fixed width page. The slides are aligned to the left hand side of the content not to the left hand side of the browser window. The slightly transparent dark previous and next navigation buttons are displayed over, on the left and right sides of the slider. If you move the mouse pointer over them, they become fully transparent and clicking on them navigatas to the previous/next slide.
  In this example, the width of the inner wrapper is set to the same width as the page. Although you can set the width of the inner wrapper with the Inner View Width slideshow option (Dimensions section), in this example another method is used. Since we want the inner wrapper to have the same width as the page content, we have added the "inner" class to the inner wrapper ([slider_slides inner_class="inner"]). The "inner" class specifies the width of the pages in the Dottoro theme.
  If you want to set a custom width for the inner wrapper, you can use the Inner View Width option, or you can add a CSS class to the inner wrapper ([slider_slides inner_class="my_slideshow_inner_wrapper"]) and use it to apply custom styles:

  .my_slideshow_inner_wrapper {width: 400px}

  
  Additionally, since we want the previous and next buttons to be displayed over the slides, we should put the buttons into an [outer_wrapper_custom] or [inner_wrapper_custom] shortcode. In this demo, we want the right side of the previous button to be aligned to the left side of the inner view, and the left side of the next button to be aligned to the right side of the inner view. So the previous and next buttons should be positioned relative to the inner view. Therefore the buttons are put into the [inner_wrapper_custom] shortcode:

  [slider_slides]
  	[inner_wrapper_custom]
  		[slider_button type="prev" class="custom_prev_next_button" /]
  		[slider_button type="next" class="custom_prev_next_button" /]
  	[/inner_wrapper_custom]
  [/slider_slides]

  And the custom_prev_next_button class is used to position the buttons:

  .custom_prev_next_button {
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	width: 10000px;			// will be enough for largest screens
  }
  
  .slider_prev_button.custom_prev_next_button {
  	right: 100%;		// align the right side of the previous button to the left side of the inner view
  }
  .slider_next_button.custom_prev_next_button {
  	left: 100%;			// align the left side of the next button to the right side of the inner view
  }

  Vertical Carousels

  The Orientation option of a slideshow allows you to select whether you want a horizontal or vertical carousel. Vertical carousels work similarly as horizontal carousels, but the height of the view must be specified for vertical carousels, otherwise all slides will be listed one below the other like in a one-column list. To make this easier, the Inner View Height option is provided for slideshows that allows you to set the height if the inner view. If the height of the outer view is not specified in CSS, the outer view will have the same height as the inner view.
  There are cases when the Inner View Height option does not provide enough flexibility. For instance, when the navigation of a full size popup slideshow is displayed in a nested slideshow and it should extend from the top to the bottom of the popup window. The easiest way to achieve this is to add a custom CSS class to the slider_slider shortcode in the slideshow template used for the nested navigation slideshow (such as [slider_slides class="full_size_vertical"]) and use this class to apply custom styles to the outer and inner view.
  Something like this:

  .slider_slides_outer_wrapper.full_size_vertical, .full_size_vertical > .slider_slides_inner_wrapper {
  	position: absolute;
  	top: 0;
  	bottom: 0;
  }

• [slider_custom_slides]

  Displays a list of custom slides.

  Custom slides allow you to display additional information for each slide. Similar to the slides, you can select post templates for custom slides (see the supported nested shortcodes below), but while slide transitions are controlled by the JavaScript slider for slides, transitions for custom slides are controlled by CSS.

  As an example, take a look at this slideshow, you will understand what we are talking about.

  Attributes

  map_gallery

  By default, the same gallery is used for the custom slides as for the slideshow (slides), but you can change this behavior. Currently, only the _parent_post value is supported that means that the gallery used for the custom slides will contain the parent posts of the gallery items used for the slideshow. For instance, if the slideshow displays the "gallery1" gallery of the posts with id of 21, 22 and 23 and the map_gallery attribute is set to "_parent_post", the custom slides will display the posts with id of 21, 22, and 23 not their galleries. Take a look at this this demo page. It lists portfolio posts. Clicking on the thumbnails opens the "Fullsize Single - Right Panel" popup slideshow that is included in the theme. If you take a look at the sidebar on the right, you will see that it displays the title of the post the current image belongs to. Below it the title and the description of the image are shown. The "Fullsize Single - Right Panel" popup slideshow uses the "Popup - Right Panel" slideshow template. You can view its content under Templates » Slideshow Template on WordPress admin. A code snippet from the right panel looks like this: <div class="panel_row panel_title_row"> [slider_custom_slides map_gallery="_parent_post"] [item_settings post_template="dottoro_slider_title" /] [/slider_custom_slides] </div> <div class="panel_row panel_desc_row"> [slider_custom_slides] [item_settings post_template="dottoro_slider_title_desc" /] [/slider_custom_slides] </div> As you can see, the first slider_custom_slides shortcode displays the "_parent_post" gallery while the second one displays the same gallery as the slideshow (as the main slides on the left). Since the slideshow displays post galleries, the "_parent_post" contains the holder posts of the galleries.

  Additionally, there are a couple of shortcodes that can be nested into the slider_custom_slides shortcode.
  These are:

  • [selector]
  • [item_settings], [popup_gallery_settings], [general_settings],
  These shortcodes allow you to specify the dimension and other settings of the slides.
  For instance, the following example sets the size of the slides to 300x150 pixels, the size of media to 100x100 pixels and select a post template for the slides:

  [slider_custom_slides]
  	[item_settings item_width="300" item_height="150" media_width="100" media_height="100" post_template="id_of_post_template" /]
  [/slider_custom_slides]

  Tip: You can add multiple custom slide lists to any slideshow. Just add two or more [slider_custom_slides] shortcodes to the slideshow template and select different post templates for your custom slides.
  For instance, post thumbnails in a carousel ("normal" slides) in the middle of the slideshow, the title of the active post above the carousel (custom slides 1), the teaser of the active post below the carousel (custom slides 2).
• [slider_navigation]

  Displays navigation buttons (disc, rect, image, etc.) for a slider.
  Although the slider_navigation shortcode has quite a few attributes (see below), but since these options are presented on the edit screen of slideshows, you don't need to specify them. The only case when some of these attributes should be specified if you want to add multiple navigations to a slideshow. For instance, a slide navigation (navigation unit is slide) and a page navigation (navigation unit is page). In these cases, you should add two slider_navigation shortcodes to the slideshow template and overwrite some of the settings for one of the navigations.

  Attributes
  type	Specifies the type of the navigation (disc | rect | numbers | images | image_no_border | custom). Overwrites the Navigation Type setting of the slideshow.
  skin	Set the skin of the navigation buttons (available skins). Works for disc, rectangle and numbered navigations. The "auto" means that the look of the navigation is determined by the skin of the theme (Components » Slideshows in the theme editor). Overwrites the Navigation Skin setting of the slideshow.
  align	Set the alignment of the navigation (left | center | right). Overwrites the Navigation Align setting of the slideshow.
  item_width	Specifies the width of a navigation button, in pixels. Overwrites the Navigation Item Width setting of the slideshow.
  item_height	Specifies the height of a navigation button, in pixels. Overwrites the Navigation Item Height setting of the slideshow.
  scale_down	Specifies whether the navigation should be scaled down if there is no enough space for it or the items should be displayed in multiple rows (true | false). Overwrites the Scale Down setting of the slideshow.
  pause_on_over	Specifies whether the slideshow should be paused when the mouse is over the navigation, or not. (true | false). Overrides the Pause Autoplay On Over setting of the slideshow.
  show_tooltip	Specifies whether to show a tooltip over the navigation items or not (true | false). Works for all navigation types excluding the custom one. Overwrites the Show Tooltip setting of the slideshow.
  visibility	Specifies whether the navigation should be always visible or only when the mouse hovers over the slideshow (always | hover | hover_hide_change). Overrides the Navigation Visibility option of the slideshow.
  event	Specifies the event that should trigger the slide transition (click | mousedown | mouseenter). Overrides the Event setting of the slideshow.
  unit	Specifies the unit of the navigation (slide | page). For the page unit, you can use the Slides Per Page option of the slideshow to specify the number of slides in a page. Overwrites the Navigation Unit setting of the slideshow.
  slideshow	If you want the navigation to be displayed in a nested slideshow, specify the id of the slideshow for this attribute. An empty string means, no need nested slideshow. To get the identifier of a slideshow, go to Slideshows » Slideshows and click on the slideshow. Here you will find the id of the slideshow. Overwrites the Nested Slider For Navigation setting of the slideshow.
  map_gallery	By default, the same gallery is used for the navigation as for the slideshow (slides), but you can change this behavior. Currently, only the _parent_post value is supported that means that the gallery used for the navigation will contain the parent posts of the gallery items used for the slideshow. Overwrites the Map Gallery setting of the slideshow.

• [slider_slide_counter]

  Displays the current slide number / total number of slides information.

  Attributes: No attributes.

18.5 Styling Guide For Slideshows

There are a number of CSS classes that help you in designing slideshows. Some of them are created based on the settings of the slideshow while others indicate the current state of the slideshow.

CSS Classes Added To The Slideshow Wrapper
slider	Added to every slideshow.
slideshow	Added to every slideshow.
type-single / type-scroller	"type-single" for single sliders, "type-scroller" for carousel (scroller) sliders.
mainslider / navigationslider	"mainslider" for main sliders, "navigationslider" for navigation sliders (when the navigation is displayed in a nested slideshow).
circular / noncircular	"circular" for circular sliders, "noncircular" for non-circular sliders. See the Circular option.
orientation-horizontal / orientation-vertical	"orientation-horizontal" for horizontal sliders, "orientation-vertical" for vertical sliders. See the Orientation option.
scrollable / unscrollable	Indicates whether the slider is scrollable or not. Only supported for carousel sliders.
slide-num-n	The number of slides in the slideshow. For instance, slide-num-10 when there are 10 slides in the slideshow.

CSS Classes Added To The Slides Wrapper Elements
slider_slides_outer_wrapper	Added to slides outer wrapper. For further details, please see outer and inner views.
slider_slides_inner_wrapper	Added to slides inner wrapper. For further details, please see outer and inner views.
slider_slides	Added to the innermost element enclosing the slides. Single sliders resize this element during slide transitions. In carousel sliders, this element is moved to scroll the slides.

.slider_slides_outer_wrapper.slider-mainslider {border: 5px solid red;}
.slider_slides.slider-mainslider > slider_slide_wrapper {border: 2px solid blue;}

CSS Classes Added To The Slides
slider_slide_wrapper	Added to each slide wrapper. There are two wrappers around the slides, the outer one is the "slider_slide_wrapper", the inner one is the "slider_slide".
slider_slide	Added to the innermost HTML element enclosing the slide. There are two wrappers around the slides, the outer one is the "slider_slide_wrapper", the inner one is the "slider_slide".

CSS Classes Added To The "slider_slide_wrapper"
active / inactive	"active" when the slide is active, "inactive" when the slide is inactive. The "active" and "inactive" classes are changing at the start of transition animations.
slide visibility	state-visible: The whole slide is visible. state-showing: In single sliders, Added to the incoming slide during slide transitions. In carousel sliders, added to a slide if it is only partially visible and last time it moved into the view. state-hiding: In single sliders, Added to the outgoing slide during slide transitions. In carousel sliders, added to a slide if it is only partially visible and last time it moved out of the view. state-hidden: The slide is not visible. Additionally, the following classes are also added to the slide to help you in designing: visible: The slide is visible. In other words, when "state-visible", "state-showing" or "state-hiding" is added to the slide. hidden: The slide is hidden. Same as "state-hidden".

CSS Classes Added To Navigations
slider_navigation_wrapper	Added to the wrapper element of the navigation.
slider_navigation	Added to the inner wrapper element of the navigation.
navigation_item_wrapper	Added to the wrapper element of each navigation item.
navigation_item	Added to the innermost element enclosing a navigation item.
active / inactive	"active" when the item is active, "inactive" when the item is inactive. The "active" and "inactive" classes are changing at the start of transition animations.

18.5.1 Styling Of Slideshow and Post Templates

As described in the Slideshow Templates - Slideshow Specific Shortcodes section, there are two kinds of templates that can be used for slideshows: slideshow template and post template.
Slideshow templates determine what slideshow components and how you want to display, while post templates determine the look and feel of slides and custom navigation items. These templates give you total creative freedom, but there is an important question. How to create responsive slideshow and post templates? In other words, how to create slideshows that look and work as expected on most devices.
Since slideshows are often displayed in popup windows, the problem is more complex. Slideshows should look good even if there is not enough space horizontally and even if there is not enough space vertically.
A part of the problems can be solved with CSS, but there are cases when the CSS language does not provide enough flexibility. This is particularly true for vertical cases.
This is the reason why we have created the CSSEx JavaScript toolkit that extends the CSS language. For further details, please see CSS Extension JavaScript Toolkit.

18.6 Slides

In the Dottoro theme, the whole concept of slideshows has been entirely changed in version 1.42.
Before version 1.42, if you wanted to add a slideshow to your site, you had to create a slideshow and a couple of slides and you had to add the slides to the slideshow. This system allowed you to create complex slideshows with layer animations, but if you only wanted to create a simple image or post slideshow, it was very difficult to use.
In version 1.42, the whole concept has been changed. In the new system, every time you want to add a slideshow to your site, you should specify the slideshow and the gallery you want to display in the slideshow. You can create multiple galleries to every page and post and each gallery can contain images, videos, posts, pages, any HTML content and even slides. The new system allows you to create both "simple" image/post slideshows and complex slideshows with layer animations (more on Galleries and Slideshows).
In the new system, using slides is rarely needed, but for instance, if you want to add a home slider to your site that displays a unique content (not page/post contents), slides can be helpful. Just create your slides and add them to a gallery (Creating And Managing Galleries). Then if you have not already done, create a slideshow (Creating Slideshows). Finally, use the [slideshow] shortcode or the Slideshow Widget to add a slideshow to your site that displays the gallery containing the slides.

Slides can be created an managed under SlideShows » Slides. The contents of slides can be edited the same way as the contents of posts and pages, and you can also use shortcodes in them.

Slide Options
Description	Specifies a description for the slide. The description can be displayed with the [post_content] shortcode.
Tooltip	Sets a tooltip for the slide. If a slideshow has non-custom navigation buttons (disc, rect, numbered or image), the tooltip will appear when the mouse hovers over the navigation button. Additionally, the [post_tooltip_text] shortcode allows you to display the tooltip in custom navigations.
Delay	Here you can set the amount of time in milliseconds that the slide should remain visible before it hides. This option has effect only in single sliders and not in scroller (carousel) sliders. If this option is specified, it overwrites the Autoplay Delay setting of the slideshow for the slide.
Animation Duration	The duration of the slide transition animation, in milliseconds. This option has effect only in single sliders and not in scroller (carousel) sliders. If this option is specified, it overwrites the Animation Duration setting of the slideshow for the slide.
Animation Type	Here you can select the slide transition animation and its easing. This option has effect only in single sliders and not in scroller (carousel) sliders. The "By Slideshow" value means the Animation Type and Animation Easing options of the slideshow determines the animation type and easing.
CSS Class	Space separated list of CSS classes to add to the HTML wrapper element of the slide. You can use this option to apply individual styles to the slide.
Slide Link	This option allows you to assign an URL to the slide. Clicking on the slide in a slideshow opens the specified URL. Additionally, you can use the post_visit_site and [visit_site_button] shortcodes to display a link/button pointing to this URL in a custom slideshow navigation.
Background Image	Sets a background image to the slide.
Thumbnail	Sets a thumbnail for the slide. This thumbnail will be used for image navigations in slideshows. Additionally, if you want to display the thumbnail in a custom navigation, use the [post_thumbnail] shortcode in the post template used for the navigation.

Adding layers to slides

A layer is timed content that can appear and disappear with an animation. In the Dottoro Theme, you can add any number of layers to slides. Creating layers is simple, just embed your HTML content into a layer shortcode.

For example:

[layer]Some text[/layer]
[layer style="top:20px;left:100px"]<a href="#">Link</a>[/layer]
[layer start="top:20,left:10" on="top:0,left:10" starttime="600"]<img src="myImage.jpg" />[/layer]
[layer start="right:30,bottom:50;" on="right:0,bottom:10" end="right:-30,bottom:-50"]text[/layer]

Layers can be used not only in slides but in the content of posts and pages as well. The layer shortcode supports several attributes, some of them are standard HTML attributes while others are for layer animation effects. For the available attributes, please see the [layer] shortcode.