Overview

Example:

Creating a gallery in rows

To create an image gallery in rows from a preset control:

1. On the "Creation" tab, in the "Data" group, expand "Looper" and select "Gallery in rows".
   
2. Click where you want to create the control in the page.
   
   The Gallery in rows control includes:
   • a "Gallery in rows" Looper control.
   • a Dynamic Image control that uses the "Homothetic centered without enlargement" browser display mode.
   • a Static Text 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.

Note: It is also possible to create a standard RepeatString Looper control and then configure it to create a line gallery..

To create an image gallery in rows from a preset control:

1. On the "Creation" tab, in the "Data" group, expand "Looper" and select "Gallery in rows".
   
2. Click at the desired location to create the control.
   
   The Gallery in rows control includes:
   • a "Gallery in rows" Looper control.
   • an Image control.
   • a Static Text control used to display information.
3. The created Gallery control can be customized. No code is associated with the different elements of Gallery control.

Note: It is also possible to create a standard RepeatString Looper control and then configure it to create a line gallery..

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:
  • In the Looper control description window, in the "Details" tab, check "During click, open a popup for automatic scroll".
  • 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.
  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.

Overview

Example:

Creating a gallery in columns

To create an image gallery in columns from a preset control:

1. On the "Creation" tab, in the "Data" group, expand "Looper" and select "Gallery in columns".
   
2. Click where you want to create the control in the page.
   
   The Gallery in columns control includes:
   • a "Gallery in columns" Looper control.
   • a Dynamic Image control that uses the "Homothetic centered without enlargement" browser display mode.
   • a Static Text 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.

To create an image gallery in columns from a preset control:

1. On the "Creation" tab, in the "Data" group, expand "Looper" and select "Gallery in columns".
   
2. Click where you want to create the control in the page.
   
   The Gallery in columns control includes:
   • a "Gallery in columns" Looper control.
   • an Image control.
   • a Static Text 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

• Setting the number of columns ("Detail" tab in the field description): It is possible to set the gallery column display mode:
  • Fixed number of columns and variable width: If the width of the RepeatString zone allows the display of an additional column, the number of columns remains unchanged.. Only the width of columns is modified.
  • Variable number of columns and fixed width: If the width of the RepeatString zone allows the display of an additional column, then it is added.. Before adding the column, the rows are centered horizontally.
  • Variable number of columns and variable width: If the width of the RepeatString zone allows for the display of an additional column, then it is added.. Before adding the column, the rows are stretched horizontally.
• Setting the number of columns ("Detail" tab in the field description): It is possible to set the gallery column display mode:
  • Variable column width: If the width of the RepeatString area allows the display of an additional column, the number of columns remains unchanged.. Only the width of columns is modified.
  • Variable width and number of columns: If the width of the RepeatString zone allows for the display of an additional column, then it is added.. Before adding the column, the rows are stretched horizontally.
  • Variable number of columns (left): If the width of the RepeatString area allows the display of an additional column, it is added.. Images are aligned to the left. Before adding the column, an empty area may appear on the right.
  • Variable number of columns (centered): If the width of the RepeatString area allows the display of an additional column, then it 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): Number of columns and column width remain unchanged. Columns are aligned to the left.
  • Fixed width and number of columns (centered): Number of columns and column width remain unchanged. The columns are centered.
• 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:
  • In the Looper control description window, in the "Details" tab, check "During click, open a popup for automatic scroll".
  • 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.
  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.