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. Images are linked to the gallery via Airtable, offering dynamic real-time updates and the simplest drag and drop image loading and organization ever in a MuseThemes gallery.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
1.0: Initial release
Setup in Muse
Place the widget on your site where you would like the gallery to appear.
The widget container may be resized in order to control the size and shape of the gallery once previewed or published.
Use the Resize dropdown in the Top Menu to control the respomsive behavior of the gallery.
Open the widget option panel.
Airtable API URL: Images for this gallery are loaded and organized in Airtable. Copy your Airtable API URL and paste it here. For detailed instructions on acquiring your Airtable API URL, see the Acquiring Airtable API URL section below.
Airtable View Name: Enter the View Name of your Airtable. The provided template uses the view name "Gallery", so this value is already entered for you. If your Airtable View Name is different, enter it here. For more information on Airtable View Names, see the Acquiring Airtable API URL section.
Gallery Mode: This selection allows you to choose the display style of the gallery. Each mode offers unique animations and interactions for the gallery.
Thumbnail Click Action: This setting controls whether the thumbnails open a lightbox, an external link, or nothing.
Container Background Color: This sets the background color of the gallery.
Background Color Opacity: This sets the opacity of the background color. You may leave this set to 0 if you want a transparent background.
GALLERY MODE SETTINGS
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.
ACQUIRING AIRTABLE API URL
As mentioned previously, the gallery is linked to an Airtable. Images are loaded and organized using the Airtable, and any changes made to the Airtable will be seen in the gallery without the need to open Muse. This means that you may make changes to your gallery dynamically without republishing your site.
Airtable is incredibly easy to use, and offers drag and drop loading for images. If you're familiar with our Connect series of widgets, the concept here is similar, except that you will use Airtable instead of a Google Sheet for linking images. We expect you'll find this process more intuitive.
In this section, we will cover the steps to linking your Airtable to your gallery.
Click the Airtable Template link near the bottom of the widget option panel to open the Airtable Template.
You may be required to sign in or sign up if you are new to Airtable.
You cannot view the template but not edit it. You will need to duplicate the table in order to edit it.
Click the small triangle next to the table name at the top of the page.
Select Duplicate Base from the dropdown.
You may now edit the duplicated base.
To acquire your API URL, go to https://airtable.com/api
Select the base you created when you duplicated the template. Your bases will differ from the image below.
Select Authentication from the sidebar menu.
Tick the box titled "Show API Key"
Copy the URL you see under "EXAMPLE USING QUERY PARAMETER"
Copy only the URL (do not copy the "$ curl")
Paste this URL into the Airtable API URL field to link your table to the widget.
Note: The Airtable View Name field in the widget option panel should match the view name set in Airtable. By default, both of these will be set to "Gallery". If these do not match, you may rename either. It is best to use Gallery for both.
USING THE AIRTABLE TEMPLATE
Airtable is an excellent platform for organizing your gallery. You can use Airtables like you would use a spreadsheet, but Airtable offers additional flexibility through drag and drop functionality. In this section, we will cover the Airtable template, including image loading, captions, links and more.
To load images, simply drag and drop them into the Image column, one by one. However,you will need to delete the sample images first. To do this, click on an image and then click the trash can icon to delete it.
The Image URL column serves as a fallback for the image placed in the Image column. As a best practice, you may host the image elsewhere and place a direct link to the image here.
The Image Caption column allows you to enter captions for the images. These captions are seen in the lightbox after the site visitor clicks on a thumbnail.
The External Link column is used to enter a link location for your image. Links are only functional when Thumbnail Click Action is set to External Link.
Redirect Target allows links to open in the same tab or a new tab.