How to use image and image hover and cloud’s zoom for articles

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

1.    Image and Image hover

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

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: Choose a photo already on the server, if not select a photo from your computer
Image title: The title of the photo can enter or not enter.

2. Image option

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

2

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

6

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

3

•    Show Image. (Use Global/Hide/Show). Whether or not to show the Article’s Image.
•    Use Image Hover. (Use Global/No/Yes). Agree or not to use image hover of the article.
•    Image Hover Speed. Optional field that allows you to customize the speed that show image when hover into image of the article.
•    TZ Image Size. (Use Global/XSmall/Small/Medium/Large/XLarge). The image size is shown on Portfolio, Timeline, Gallery, Tags and User page.
•    Featured Image Size. The Image size of featured article is shown on Portfolio and Timeline page.
•    Detail Image Size. (Use Global/XSmall/Small/Medium/Large/XLarge). The Image size of detail article is shown on all page.

3. Cloud Zoom Options

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

4

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

7

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

5

•    Use Cloud Zoom. (Use Global/Hide/Show). Whether or not to use the image’s cloud zoom.
•    Cloud Zoom Image Size. (Use Global/XSmall/Small/Medium/Large/XLarge). The image size when using cloud zoom
•    Zoom Width. Optional field that allows you to customize the width of the zoom window in pixel.
•    Zoom Height. Optional field that allows you to customize the height of the zoom window in pixel.
•    Position. (Use Global/Inside/Left/Right/Top/Bottom). Specifies the position of the zoom window relative to the small image. Allowable values are ‘left’, ’right’, ‘top’, ‘bottom’, ‘inside’ or you can specify the id of an html element to place the zoom window in e.g. position: ‘element1’. Default value ‘inside’.
•    AdjustX. Optional field that allows you to fine tune the x-position of the zoom window in pixel.
•    AdjustY. Optional field that allows you to fine tune the y-position of the zoom window in pixel.
•    Tint Color. Optional field that allows you to specifies a tint colour which will cover the small image. Colours should be specified in hex format, e.g. ‘#aa00aa’. Does not work with softFocus.
•    Tint Opacity. Optionla field that allows you to customize opacity of the tint, where 0 is fully transparent and 1 is fully opaque.
•    Lens Opacity. Optional field that allows you to customize opacity of the lens mouse pointer, where 0 is fully transparent and 1 is fully opaque. In tint and soft-focus modes, it will always be transparent.
•    Soft Focus. (Use Global/No/Yes). Whether or not to apply a subtle blur effect to the small image. Set to true or false. Does not work with tint.
•    Show Title. (Use Global/No/Yes). Whether or not to show the title tag of the image.
•    Title Opacity. Optional field that allows you to customize specifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque.
Note: Before create image, should set up image size for this item in a global configuration.

Features

2 0