How to use image slider for articles

Posted by nguyen nhung on June 24, 2014 in TZ Portfolio

1.    Create image slider

When creating or editing the article, you select the tab “Image slider” next to the tab “Image”.

1

In this tab, you will have to enter the following information:
Image:  Select a picture from computer to upload to the server Browse server or choose a photo already on the server, if not select a photo from your computer Image title.
Image title: The title of the photo can enter or not enter.

2.    Image slider options

There are three ways to configure image options.
The 1st way is to configure for all articles using image slider. In this way, you go to Components / TZ Portfolio /Options/Image Slider. You can see the following table:

2

The 2nd way is to configure for each menu item.

5

The 3nd way is to configure for each article using image slider. In this way, when creating an article, you can see on the right hand where you can do some configurations for image slider options.

4

•    Show Image Slider. (Use Global/Hide/Show). Whether or not to show the article’s image slider.
•    Detail Image Gallery Size. (Use Global/XSmall/Small/Medium/Large/XLarge). The Image size of detail article is shown on all page.
•    Slider Auto Run. (Use Global/No/Yes). Whether or not to use animate for the article’s slider.
•    Show Button Direction. (Use Global/Hide/Show). Whether or not to show the article’s button direction for the slider.
•    Show Control Navigation. (Use Global/Hide/Show). Whether or not to show the article’s control navigation for the slider.
•    Show Pause/Play. (Use Global/No/Yes). Whether or not to show the article’s button pause/play for the slider.
•    Pause On Action. (Use Global/No/Yes). Whether or not to pause the slideshow when interacting with control elements, highly recommended.
•    Pause On Hover. (Use Global/No/Yes). Whether or not to pause the slideshow when hovering over slider, then resume when no longer hovering.
•    Use CSS. (Use Global/No/Yes). Whether or not to override the use of CSS3 translate 3d animation.
•    Slide Direction. (Use Global/Horizontal/Vertical). Select the sliding direction, horizontal or vertical.
•    Animation Type. (Use Global/Slide/Fade). Animation type for slideshow.
•    Slide Show Speed. Optional field that allows you to customize the speed of the slideshow cycling.
•    Animation Duration. Optional field that allows you to customize the speed of animations.
Note: Before create image, should set image size for this item in a global configuration.

Features

0 0