Overview
Version
| Report Server Version | Plugin Version | Functional Change |
|---|---|---|
11.0 | 1.0.0 | / |
11.0 | 3.0.1 | Added the functions for you to preview images in full screen/zoom in images, view prompt content, and be redirected to web links. |
Application Scenario
You want to dynamically display enterprise cultures/products/services in company's official website, and latest products/promotions on e-commerce platforms by images, and hope to be redirected to web links by clicking images, as shown in the following figure.
Function Description
FanRuan provides the Image Carousel plugin mainly to display images dynamically.
Horizontal and vertical carousel is supported.
You can be redirected to web links by clicking images.
Autoplay with a custom duration and interval is supported.
This plugin is not supported in IE browsers. You are advised to use Google or Firefox browsers.
This plugin is not supported on mobile terminals.
Plugin Introduction
Plugin Installation
You can obtain the plugin at https://community.finereport.com/plugin/?id=135.
For details about how to install the plugin in the designer, see Designer Plugin Management.
For details about how to install the plugin on the server, see Server Plugin Management.
Function Entry
1. General Report
Select and resize a cell, click the Insert Chart icon on the upper toolbar, and click Image Carousel, as shown in the following figure.
2. FVS Visualization Dashboard
Add a table component in FVS. Edit the table, select the Insert Chart icon on the upper toolbar, and select Image Carousel in the chart type window, as shown in the following figure.
Note:
3. FRM Dashboard
On the upper chart toolbar in an FRM dashboard, select the Image Carousel Chart icon to add the chart, as shown in the following figure.
Note:
Attribute Setting
Choose Cell Element > Setting on the right, as shown in the following figure.
The following table describes details.
| Setting | Description | |
|---|---|---|
Basic | Image Layout | Image display layout, which includes the following types:
|
Animation Type | Image carousel direction, which can be set to:
| |
Show Control Button | Whether to show the control button. If the checkbox is selected, the button for manual carousel control is displayed. | |
Link Opening Event | Carousel image click event for redirecting you to a web link, which can be set to:
If you select No Click Event, you will not be redirected to any link when clicking an image. | |
Link Opening Method | Method for redirecting you to a web link when you click a carousel image, which can be set to:
| |
Autoplay | Whether to enable automatic image carousel. If you select Autoplay, images are automatically played in the carousel way. You can customize Animation Duration(ms) and Animation Interval(ms). | |
Image File | Image file to be added. | Configuration Method: (1) Add/Modify Enter the image file address, web link, and prompt content. Click Add to add the corresponding information to the following list. Select a row in the following list and click Modify to modify the content. (2) Remove/Move Up/Move Down Select a row in the following list and click Remove/Move Up/Move Down to delete or resort the content. Configuration Requirement: (1) Image File: This parameter specifies the image source displayed during preview. You can enter a disk file and an absolute path.
(2) Web Link This parameter specifies the web link to which you are redirected after you click an image. If this optional parameter is left empty, you will not be redirected. (3) Prompt Content This parameter specifies the prompt content displayed when you hover your cursor over an image. If this optional parameter is left empty, no prompt content is displayed.
|
Dataset | Dataset from which image configuration is obtained. The path rule and configuration description are all consisitent with those under Image File > Edit. | |
Image Zoom During Preview
In the Pagination Preview mode, you can preview an image in full screen or zoom in/out an image.
(1) When you hover your cursor over a carousel image, a full-screen icon will appear in the upper right corner of the image. You can click the icon to preview the image in full screen.
(2) On the full-screen image preview page, you can drag the image or scroll your mouse wheel to zoom in/on the image.
(3) You can click the exit icon in the upper right corner of the full-screen image preview page to exit the image preview.
Example
Image Resource Preparation
You can download and decompress Carousel Image Sample.zip to obtain sample images.
Place sample images into /webroot/WEB-INF/resources of the project, as shown in the following figure.
New Chart
1. Create a general report.
2. Resize the cell as required and select the cell.
2. Click the Insert Chart icon on the upper toolbar, and select Image Carousel.
Chart Attribute Setting
1. Select the cell where the chart is located and click Cell Element.
2. Click Setting.
Basic: Select Show Control Button and retain the default settings of other attributes.
Autoplay: Select Autoplay and retain the default settings of other attributes.
Image File: Click Edit, select the sample images respectively in Disk File, and add the corresponding web links and prompt contents, as shown in the following figure.
Effect Display
Save the template and click Pagination Preview. The effect is the same as that shown in section "Application Scenario."
Note:Template Download
You can download the template Image Carousel.cpt.
Previous：Chart Export Upgrade Instructions
