PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • 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
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
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 by programming.
Versions 24 and later
WINDEVWindows This type of control is now available for WINDEV applications in Windows.
Android This type of control is now available for Android applications.
iPhone/iPad This type control is now available for iPhone/iPad applications.
New in version 24
WINDEVWindows This type of control is now available for WINDEV applications in Windows.
Android This type of control is now available for Android applications.
iPhone/iPad This type control is now available for iPhone/iPad applications.
WINDEVWindows This type of control is now available for WINDEV applications in Windows.
Android This type of control is now available for Android applications.
iPhone/iPad This type control is now available for iPhone/iPad applications.
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

WEBDEV - Server code To create an image gallery in rows from a preset control:
  1. On the "Creation" pane, in the "Data" group, expand "Looper" and select "Gallery in rows".
  2. Click the position where the control will be created in the page.
    The Gallery in rows control includes:
    • a "Gallery in rows" Looper control.
    • a Dynamic Image control that is using the "Homothetic centered without enlargement" browser display mode.
    • a Static control used to display information.
    • a pager used to display the different looper pages.
    • three buttons (favorites, comment, share).
  3. The created Gallery control can be customized. No code is associated with the different elements of Gallery control.
Remark: You can also create a standard Looper control and to configure it in order to get a gallery in rows.
Versions 24 and later
WINDEVWINDEV Mobile To create an image gallery in rows from a preset control:
  1. On the "Creation" pane, in the "Data" group, expand "Looper" and select "Gallery in rows".
  2. Click the position where the control will be created in the window.
    The Gallery in rows control includes:
    • a "Gallery in rows" Looper control.
    • an Image control.
    • a Static control used to display information.
  3. The created Gallery control can be customized. No code is associated with the different elements of Gallery control.
Remark: You can also create a standard Looper control and to configure it in order to get a gallery in rows.
New in version 24
WINDEVWINDEV Mobile To create an image gallery in rows from a preset control:
  1. On the "Creation" pane, in the "Data" group, expand "Looper" and select "Gallery in rows".
  2. Click the position where the control will be created in the window.
    The Gallery in rows control includes:
    • a "Gallery in rows" Looper control.
    • an Image control.
    • a Static control used to display information.
  3. The created Gallery control can be customized. No code is associated with the different elements of Gallery control.
Remark: You can also create a standard Looper control and to configure it in order to get a gallery in rows.
WINDEVWINDEV Mobile To create an image gallery in rows from a preset control:
  1. On the "Creation" pane, in the "Data" group, expand "Looper" and select "Gallery in rows".
  2. Click the position where the control will be created in the window.
    The Gallery in rows control includes:
    • a "Gallery in rows" Looper control.
    • an Image control.
    • a Static control used to display information.
  3. The created Gallery control can be customized. No code is associated with the different elements of Gallery control.
Remark: You can also create a standard Looper control and to configure it in order to get 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:
    • WEBDEV - Server code In the Looper control description window, in the "Details" tab, check "During click, open a popup for automatic scroll".
    • Versions 24 and later
      WINDEVWINDEV Mobile In the Looper control description window, in the "Details" tab, check "Display a popup on click".
      New in version 24
      WINDEVWINDEV Mobile In the Looper control description window, in the "Details" tab, check "Display a popup on click".
      WINDEVWINDEV Mobile In the Looper control description window, in the "Details" tab, check "Display a popup on click".
  • 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 image applies at run time.
    • 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

WEBDEV - Server code To create an image gallery in columns from a preset control:
  1. On the "Creation" pane, in the "Data" group, expand "Looper" and select "Gallery in columns".
  2. Click the position where the control will be created in the page.
    The Gallery in columns control includes:
    • a "Gallery in columns" Looper control.
    • a Dynamic Image control that is using the "Homothetic centered without enlargement" browser display mode.
    • a Static control used to display information.
    • a pager used to display the different looper pages.
    • three buttons (favorites, comment, share).
  3. The created Gallery control can be customized. No code is associated with the different elements of Gallery control.
Versions 24 and later
WINDEVWINDEV Mobile To create an image gallery in columns from a preset control:
  1. On the "Creation" pane, in the "Data" group, expand "Looper" and select "Gallery in columns".
  2. Click the position where the control will be created in the page.
    The Gallery in columns control includes:
    • a "Gallery in columns" Looper control.
    • an Image control.
    • a Static control used to display information.
  3. The created Gallery control can be customized. No code is associated with the different elements of Gallery control.
New in version 24
WINDEVWINDEV Mobile To create an image gallery in columns from a preset control:
  1. On the "Creation" pane, in the "Data" group, expand "Looper" and select "Gallery in columns".
  2. Click the position where the control will be created in the page.
    The Gallery in columns control includes:
    • a "Gallery in columns" Looper control.
    • an Image control.
    • a Static control used to display information.
  3. The created Gallery control can be customized. No code is associated with the different elements of Gallery control.
WINDEVWINDEV Mobile To create an image gallery in columns from a preset control:
  1. On the "Creation" pane, in the "Data" group, expand "Looper" and select "Gallery in columns".
  2. Click the position where the control will be created in the page.
    The Gallery in columns control includes:
    • a "Gallery in columns" Looper control.
    • an Image control.
    • a Static control used to display information.
  3. The created Gallery control can be customized. No code is associated with the different elements of Gallery control.

Characteristics of gallery in columns

  • WEBDEV - Server code Defining the number of columns ( "Details" tab of the control description): You have the ability to customize the display mode of columns in the gallery:
    • Fixed number of columns and variable width: If the width of the looper allows the display of an additional column, the number of columns does not change. Only the width of columns is modified.
    • Variable number of columns and fixed width: If the width of looper control is sufficient to display an additional column, this column is added. Before adding the column, the rows are centered horizontally.
    • Variable number of columns and variable width: If the width of looper control is sufficient to display an additional column, this column is added. Before adding the column, the rows are stretched horizontally.
  • Versions 24 and later
    WINDEVWINDEV Mobile Defining the number of columns ( "Details" tab of the control description): You have the ability to customize the display mode of columns in the gallery:
    • Variable column width: If the width of the looper allows the display of an additional column, the number of columns does not change. Only the width of columns is modified.
    • Variable width and number of columns: If the width of looper control is sufficient to display an additional column, this column is added. Before adding the column, the rows are stretched horizontally.
    • Variable number of columns (left): If the width of looper control is sufficient to display an additional column, this column is added. Images are aligned to the left. Before adding the column, an empty area may appear on the right.
    • Variable number of columns (columns): If the width of looper control is sufficient to display an additional column, this column is added. Before adding the column, the columns are centered and an empty area may appear on either side of the centered columns.
    • Fixed width and number of columns (left): The number of columns and the width of the columns are not changed. Columns are aligned to the left.
    • Fixed width and number of columns (centered): The number of columns and the width of the columns are not changed. The columns are centered.
    New in version 24
    WINDEVWINDEV Mobile Defining the number of columns ( "Details" tab of the control description): You have the ability to customize the display mode of columns in the gallery:
    • Variable column width: If the width of the looper allows the display of an additional column, the number of columns does not change. Only the width of columns is modified.
    • Variable width and number of columns: If the width of looper control is sufficient to display an additional column, this column is added. Before adding the column, the rows are stretched horizontally.
    • Variable number of columns (left): If the width of looper control is sufficient to display an additional column, this column is added. Images are aligned to the left. Before adding the column, an empty area may appear on the right.
    • Variable number of columns (columns): If the width of looper control is sufficient to display an additional column, this column is added. Before adding the column, the columns are centered and an empty area may appear on either side of the centered columns.
    • Fixed width and number of columns (left): The number of columns and the width of the columns are not changed. Columns are aligned to the left.
    • Fixed width and number of columns (centered): The number of columns and the width of the columns are not changed. The columns are centered.
    WINDEVWINDEV Mobile Defining the number of columns ( "Details" tab of the control description): You have the ability to customize the display mode of columns in the gallery:
    • Variable column width: If the width of the looper allows the display of an additional column, the number of columns does not change. Only the width of columns is modified.
    • Variable width and number of columns: If the width of looper control is sufficient to display an additional column, this column is added. Before adding the column, the rows are stretched horizontally.
    • Variable number of columns (left): If the width of looper control is sufficient to display an additional column, this column is added. Images are aligned to the left. Before adding the column, an empty area may appear on the right.
    • Variable number of columns (columns): If the width of looper control is sufficient to display an additional column, this column is added. Before adding the column, the columns are centered and an empty area may appear on either side of the centered columns.
    • Fixed width and number of columns (left): The number of columns and the width of the columns are not changed. Columns are aligned to the left.
    • Fixed width and number of columns (centered): The number of columns and the width of the columns are not changed. The columns are centered.
  • 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:
    • WEBDEV - Server code In the Looper control description window, in the "Details" tab, check "During click, open a popup for automatic scroll".
    • Versions 24 and later
      WINDEVWINDEV Mobile In the Looper control description window, in the "Details" tab, check "Display a popup on click".
      New in version 24
      WINDEVWINDEV Mobile In the Looper control description window, in the "Details" tab, check "Display a popup on click".
      WINDEVWINDEV Mobile In the Looper control description window, in the "Details" tab, check "Display a popup on click".
  • 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 run time.
    • 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 site of photo gallery and it includes 2 main sections:
- the "visitor" section, developed in AWP mode therefore referenceable.
- the management section, developed in standard WEBDEV mode therefore secured.  
 
Among the available features, you will find:
- an organization of your photos by album
- different modes for presentation the photos: slide show mode, scroll mode, detailed mode
- a link to the social networks
- the ability for the visitors to comment your publications
- a contact form
- for the site management, you have the ability to upload your photos, to describe them, to turn them around, to encrust a watermark..
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
Video Galeria
https://youtu.be/ziHu5pnxrHM
https://windevdesenvolvimento.blogspot.com/2019/08/dicas-2254-windev-webdev-mobile-24.html
//
sFile is string
// Opens the file picker
sFile = fSelect("", "", "SELECIONA IMAGEN", "All the files (*.*)" + TAB + "*.*", "*.*")
LOOP_GalleryRow.AddLine(sFile)
amarildo
19 Aug. 2019