The Morfik Lightbox package Version 2 is an update to the original Lightbox package and contains a single widget (LightBox) that allows you to overlay a full size image on a page by clicking on a thumbnail image using a transition effect to display it. Images can be loaded from either the repository or from an associated database table.


package-view.png
package-down.png


A quick walkthrough

To use the Morfik Lightbox 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. Once added [a single widget] will appear on the home ribbon when the form designer is active (see Figure 2 Widgets List). These widgets can be placed on application forms and provide immediate functionality with minimal coding.


security-fig1.png
Figure 1: Used Packages Command


LightBox.jpg
Figure 2: Widgets list


After adding a widget to the form, you can set the Thumb Picture property in the Properties panel, but most of the properties are set by clicking on the small arrow at the top-right of the widget and selecting Settings (refer to Figure 3 Selecting the Settings Option). This will bring up the Settings dialog shown in Figure 4 Widget Settings.


LightBox_1.jpg
Figure 3: Selecting the Settings Option


LightBox_2.jpg
Figure 4: Widget Settings


On the Images tab in the Settings dialog, you can either select to add the images from the application’s repository (Image List) or from selected fields in the form’s data source Data-bound).


Using Selected Images

If you choose to use the Image List option, click on the Add button to select an image from the repository to use (you may add multiple images). Although images may be added from other locations than the repository, if the path to the image contains any spaces, the image will not be loaded. Images added to the list will be displayed full size in a popup window along with a title. To edit the title below the added image, click on the text and an edit window will be displayed. If more than one image is listed then, when the first image is displayed in the popup window, there will be a Next button available to proceed through the images in the list, along with a Prev button when applicable. You may add the ability to run a slideshow for multiple images by going to the options tab and checking Slideshow and setting the time interval each image should be displayed. When the image then appears in the popup window a control to play the slideshow will be visible.


Using Data-bound Images

When selecting the Data-bound option, the images will be extracted from the data source specified for the form. The data source should contain fields for the thumbnail image, full size image and title text and those fields should be selected in the appropriate drop-down lists. Using the data-bound option automatically adds the ability to scroll through the images from the data source in the popup window; the option to create a slide show will also display all the images from the data source. The scrolling and slideshow are available even if the form is set to vmSingle mode rather than vmContinuous.


Using the mfk_ImageThumbnail Show Method

The Lightbox widget can also be called directly in a web application to display the popup window by calling the Show method. Add a widget to a form and set it to be not visible then add some images in the settings panel. You don’t need specify a thumbnail image sine the widget will not be visible. To display the popup window, just call mfk_ImageThumbnail1.Show(n) where n is the number of the image in the image list to display initially (the first image being number 0). You can easily combine this widget with either the Quicksand package or the Image Rotator package to create some interesting effects. For example, using the Image Rotator widget, the following code could be used to popup a clicked image:


FX Code

Procedure Form1.mfk_ImageRotator1ImageClick(Sender: TObject);
Begin
    mfk_ImageThumbnail1.Show(mfk_ImageRotator1.Current);
End;


Notes

The data-bound option works very effectively with a multi-column form. On the Options tab of the Settings dialog, you can also change the background color and set the font for the title text. Although the initial version of the Lightbox package required a javascript file to be downloaded, this version is written entirely in native “Morfik”, which provides an opportunity to investigate how to implement image transitions using Morfik’s built-in effects.


See Also

Back to top