Image Slider

Morfik Image Slider Package


package-view.png
package-down.png


The Morfik Image Slider package contains a single widget (Image Slider) that creates a horizontal display of multiple images that can have titles displayed and can be grouped by category .

A Quick Walkthrough

To use the Morfik Image Slider 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.


security-fig1.png
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.

is_f2.png
Figure 2: Widgets List


The Widget in Action

Take a look at Figure 3 The Image Slider Widget to see a sample of the widget in action (this mimics the one found on the Apple Mac web page (http://www.apple.com/mac/). The main parts of the widget are the images, the image captions, the scroll bar and the category captions on the scroll bar. Although not evident in Figure 3, the images slider can also be used as a slide show. All of these features are discussed below.


is_f3.png
Figure 3: The Image Slider Widget


Getting Started with the Image Slider Widget

After dropping an image slider widget on a form, you can use the Settings property to configure the widget, add images, captions and categories. To access the settings, click on the small arrow at the top right (see Figure 4 Accessing the Settings) and select Settings.


is_f4.png
Figure 4: Accessing the Settings


After clicking the Settings options, the dialog box displayed in Figure 5 Configuring the Image Slider will be displayed. Two options are displayed for loading the images: Data-bound where the images will be loaded from a data source and Images List where the images are individually selected using a file browser.

If the Data-bound option is selected, the form on which the widget is embedded must be linked to a data source and four fields in the data source must be set for the widget: 1 - The Image field (which must be of type Picture); 2 - The Title (caption) field that will be displayed adjacent the image, 3 - The Category field and 4 - The Id field (the unique identifier for the record in the data source).

If the Images List option is selected, the images must be loaded by clicking on the Add button. When browsing for images to load, be sure the path to the image file has no spaces in it or the image will not be loaded. For that new image, the caption will be set to the image file name but may be edited by clicking on the caption. You can either type a new category in to the category drop down list box or select an existing category from the list.

Note: Images will be displayed full size in the Image Slider widget so have the correct sizes for the images before loading them.

Clicking on the Options tab allows the background color and the Title (caption) font to be changed.


is_f5.png
Figure 5: Configuring the Image Slider


Design-Time Properties

Through the property inspector, there are a few important items that can be adjusted: Item Bottom sets how many pixels above the bottom that the images will be displayed; Slider Width sets how wide in pixels the slider will be displayed and Text Position determines whether the Title will be displayed Under the image, within but at the top of the image (Top), within but at the center of the image (Center), within but at the bottom of the image (Bottom) or Under the image.

There are also four events that are surfaced of which the most important is the On Item Click event which passes as a parameter the Id of the image which was clicked.

Runtime Control

The slide show feature can be initiated at controlled at runtime using the Start and Stop methods of the Image Slider Widget. The code sample below provides an implementation of runtime control and using the On Item Click event.

FX Code

Procedure Form1.Button1Click(Event: TDOMEvent);
Begin
    mfk_ImageSlider1.Start;    // Start slideshow
End;
 
Procedure Form1.Button2Click(Event: TDOMEvent);
Begin
    mfk_ImageSlider1.Stop;      // Stop the slideshow
End;
 
Procedure Form1.mfk_ImageSlider1ItemClick(Sender: TObject; ID: integer);
Begin
    DebugOut('Clicked:' + IntToStr(Id));
End;


Other important runtime properties include:

Property Count: Integer returns the number of images displayed in the widget

Procedure Next: Highlight the next image with wrapping to the first image when the last image is reached.

Procedure Previous: Highlight the previous image with wrapping to the last image when the first image is reached.

Procedure MoveNext: Highlight the next image with no wrapping when the end is reached.

Procedure MovePrev: Highlight the previous image with no wrapping when the first is reached.

Property Current: Integer: The index number of the currently highlighted image.

Property PlayTime: Integer: The number of milliseconds the image is displayed in the slideshow before the next one is displayed.

See Also

Back to top