Row Scroll Gallery

Row Scroll Gallery is a beautiful gallery that animates entire gallery rows as the page is scrolled. Gallery rows slide in forward or reverse, depending on the direction of scroll – placing users in full control and ensuring site visitors are engaged with your content.

The widget includes 8 different gallery display modes – each with unique animation styles and customization settings. Also, links may be applied, directing users to an external page or a lightbox slideshow of gallery images.

Note: this widget may cause conflicts or unexpected results when combining with other widgets on the same page. This is due to the fact that Row Scroll Gallery widget takes control of page scroll, which may create issues for other widgets.

Preview: https://demo.wocode.com/row-scroll-gallery

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the gallery to appear.
  • You may resize the widget container using the blue resize handle in the bottom left corner.
  • The gallery height is adjusted in the Design section of the widget settings.
  • Consider setting the row the widget is placed in to “Full Bleed” for a full width responsive gallery.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: Be sure to use unique ID’s when using multiple instances of the widget on the same page.
  • Gallery Mode: This sets the display mode of the gallery (Columns, Columns Rotated, Fixed, Horizontal, One Line, Perspective, Rotated and Small).
  • Thumbnail Click Action: This setting controls whether the thumbnails open a lightbox, an external link, or nothing.
  • Images: Load your images here. In the settings for each image, you will find additional options:
  • Image Caption: This sets a caption for the image, which is seen in the lightbox. Thumbnail Click Action must be set to Lightbox for users to see the captions within the lightbox (leave blank for no caption).
  • Image Link: Set the link for the image. To use an external link, you must set Thumbnail Click Action to External Link.

DESIGN SETTINGS

  • Widget Height: This sets the height of the gallery.

Each Gallery Mode ( Columns, Columns Rotated, Fixed, Horizontal, One Line, Perspective, Rotated and Small) have settings that are unique to that display mode, such as Item Spacing or Column Count. Use these settings to fine tune the look of your gallery. Individual display mode settings will not be discussed in detail here because the settings are self-explanatory and are labeled with their exact function.