Image Rotator

The Morfik Image Rotator package contains a single widget (ImageRotator) that provides a scrollable image gallery display.


A Quick Walkthrough

To use the Morfik Image Rotator package simply add the package to the project by utilizing the “Used Packages” command on the project ribbon (see Figure 1 Used Packages Command), or simply drag the package file onto the application main client area.

Figure 1: Used Packages Command

Once added a single widget will appear on the home ribbon when the form designer is active (see Figure 2 Widgets List). This widget can be placed on an application form and provide immediate functionality with minimal coding.

Figure 2: Widgets List

How to Use the Widget

After dropping an ImageRotator widget on a form, you can use the settings panel to configure the widget. You can display the settings panel by clicking on the arrow on the top right of the widget and selecting Settings (see Figure 3 Selecting the Settings).

Figure 3: Selecting the Settings

Clicking on Options in the settings panel will allow you to configure whether or not to display a slideshow and, if desired, control its’ properties; whether or not to display the slider control for scrolling through the images; and whether to allow the display to be shown full screen.

Two Ways to Add Images to the Widget

While in the settings panel, you can click on the Images tab and add images to be displayed in one of two ways. The first way is to use the Image List option and click the Add button to select images from the Repository to display. (Note: you cannot add images that have a space anywhere in the complete path name.) After adding images, you can rearrange the images by clicking on an image and using the left or right buttons to move the image one position in that direction. You can also highlight an image and click the Remove button to delete the image from the display (this does not delete the file on the disk).

The second method of adding images is to select the Data-bound option and then select a data source for the display and the data field in the data source for the image. The images will be displayed left to right in the order they are found in the data source. Since queries can be used as a data source, you can use the query to arrange the images in the desired order.


In the property inspector for the widget, you can set an SQL Filter property for the Images if they are retrieved from a data source. (Note: As long as a filter statement is specified, you can also include an ORDER BY clause in the SQL Filter.) There are also four events that can be handled for the widget: three dealing with the image bar’s central image moving (OnBeforeMove, OnMove and OnAfterMove) and the fourth an OnClick event. Within the OnClick event, the image that was clicked on can be determined using the Current property of the widget (See below).

FX Code

Procedure Form1.mfk_ImageRotator1ImageClick(Sender: TObject);

Runtime Properties

A number of properties can be set on the browser and server side at runtime.

The following are browser side methods that can be called at runtime:

Next moves to the next image in the list
Previous moves to the previous image in the list
Start has the same effect as clicking on a Play button and begins the slide show
Stop has the same effect as clicking on a Stop button and terminates the slide show
Redraw redraws the whole gallery

The following are browser side properties that can be set at runtime:

PlayTime (Integer type) sets or retrieves the time lapse, in milliseconds, for the changing of images (Default: 750)
Current (Integer type) sets or retrieves the index of the current primary image
Duration (Integer type) sets or retrieves the animation time (Default: 750)
Offset (Integer type) sets the offset of adjacent pictures in pixels (Default: -1)
ShowSlider (Boolean type) sets whether the slider will be shown or hidden
ShowAutoPlay (Boolean type) sets whether Play and Stop buttons will be shown or hidden
ShowFullScreen (Boolean type) sets whether the Show Full Screen button will be shown or hidden
Gallery (TImageGallery type) sets a link to the object responsible for the drawing and managing of pictures
Count (Integer type) returns Images Count
GetFileName (Integer AIndex) returns file name
GetUrl (Integer AIndex) returns image's link
Show (Integer AIndex) shows image with AIndex equal

On the server side, you can change the images (if using the Image List option) at runtime as demonstrated in the following code:

FX Code

Procedure Form1.WebFormBeforeExecute(Sender: TWebDocument; Var PContinue: Boolean);
  ImgList: TStringList;
    ImgList := TStringList.Create;
       mfk_ImageRotator1.Images := ImgList;

See Also

Back to top