'Image gallery' Looper control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help

Editors

Controls (window/page/report)

Controls

Looper control

'Image gallery' Looper control

See also

'Image gallery' Looper control

Overview

The "Image gallery" Looper control is used to manage the display of a set of images without programming. The images can have differents sizes and proportions: the Image Gallery control performs a harmonious display.

The navigation between images is automatically managed. The control displays the images found in a directory, coming from a database or defined through programming.

Versions 24 and later

This type of control is now available for WINDEV applications in Windows.

New in version 24

This type of control is now available for WINDEV applications in Windows.

Gallery in rows

Overview

An image gallery in rows proposes the same height for each image of the same row . The rows do not necessarily have the same height: this height is automatically defined according to the images found on the row.

The gallery in rows automatically adapts the width of each row to respect the image proportions.

Example:

A Gallery in Rows control is recommended to display images only (without text below for example).

Creating a gallery in rows

Characteristics of gallery in rows

Reference control: A gallery in rows includes several rows. Each row contains at least one reference control. This reference control corresponds to an Image control, a clickable Image control or a Thumbnail control. This reference control is used to define a reference size (a minimum size).
This reference control is defined in the "Details" tab of the Looper control description window.
Scroll popup: It is possible to automatically open a scroll popup when clicking on the reference control:
At runtime, the height of each row automatically adjusts to fit the content displayed.
Caution: the display mode of Image control is very important.
- If the source image is smaller than the reference Image control, the display mode of the image is applied at runtime.
- If the height of source image is greater than its width in relation to the reference Image control, the row height will be increased.

Gallery in columns

Overview

An image gallery in columns proposes the same width for each row of the same column. In each column, the row height can change: this height is automatically defined according to the images displayed.

Example:

Creating a gallery in columns

Characteristics of gallery in columns

Reference control: A gallery in columns includes several rows. Each row contains at least one Image control. The "Gallery in columns" Looper control is associated with this Image control (or Clickable Image control or Thumbnail control). This control is used to define a reference size.
This reference control is defined in the "Details" tab of the Looper control description window.
Scroll popup: It is possible to automatically open a scroll popup when clicking on the reference control:
At runtime, the height of each row automatically adjusts to fit the content displayed.
Caution: the display mode and the anchoring options of Image control are very important.
- If the source image is smaller than the reference Image control, the dimensions of reference control are applied to the image at runtime.
- If the width of source image is greater than its height in relation to the reference Image control, the column width will be increased.

Related Examples:

Complete examples (WEBDEV): Photo_Gallery

[ + ] This example is a photo gallery site and is composed of 2 main parts:
- the "visitor" part, developed in Active WEBDEV Page mode and SEO-compatible.
- the administration part, secured and developed in standard WEBDEV mode.

These are some of the available features:
- organize photos via albums
- include links to social networks
- enable users to comment on posts
- user login via WEBDEV'S GPU
- contact form
- ability to upload, describe, and classify photos via albums on the administration side

Training (WINDEV): WD Gallery Control

[ + ] This example demonstrates the use of the "Image Gallery" control.

Cross-platform examples (WINDEV Mobile): WM Gallery Control

[ + ] This example shows how to use the "Image Gallery" control.