ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Looper control
  • Overview
  • Gallery in rows
  • Overview
  • Creating a gallery in rows
  • Characteristics of gallery in rows
  • Gallery in columns
  • Overview
  • Creating a gallery in columns
  • Characteristics of gallery in columns
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview
The "Image gallery" Looper control is used to manage the display of a set of images without programming. Images can be of different sizes and proportions: the Image Gallery field ensures a harmonious display..
Navigation between images is automatically managed. The control displays images from a directory or database, or images defined programmatically.
Gallery in rows

Overview

An image gallery in rows proposes the same height for each image of the same row . Lines don't necessarily have to be the same height: this is determined automatically according to the images in the line.
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 field: A line gallery is made up of 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.
  • Scrolling popup: A scrolling popup can be opened automatically when the reference field is clicked:
    • At runtime, the height of each row automatically adjusts to fit the content displayed.
      Please note: the display mode of the Image field 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 height of the row can be variable: this height is determined automatically according to the images displayed.
    Example:

    Creating a gallery in columns

    Characteristics of gallery in columns

    • Reference field: A column gallery is made up of 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.
    • Scrolling popup: A scrolling popup can be opened automatically when the reference field is clicked:
      • At runtime, the height of each row automatically adjusts to fit the content displayed.
        Please note: the display mode and docking options of the Image field 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:
      Photo_Gallery Complete examples (WEBDEV): Photo_Gallery
      [ + ] This example is a photo gallery site and is composed of 2 main parts:
      - the "visitor" part,
      - the administration part.  
       
      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
      WD Gallery Control Training (WINDEV): WD Gallery Control
      [ + ] This example demonstrates the use of the "Image Gallery" control.
      WM Gallery Control Cross-platform examples (WINDEV Mobile): WM Gallery Control
      [ + ] This example shows how to use the "Image Gallery" control.
      Minimum version required
      • Version 23
      This page is also available for…
      Comments
      Click [Add] to post a comment

      Last update: 09/21/2024

      Send a report | Local help