Our Rapid Reveal widget creates expanding content areas for individual images or entire galleries. Clicking on an image thumbnail reveals an enlarged image, title, and description text, along with an option to link to other pages.
Content previews are linked to one another within galleries, allowing users to use previous and next buttons to navigate through all expanded content areas in a slideshow format using mouse or keyboard control. This widget is fully responsive, and looks great across all screens!
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.3
Supported Devices: Desktop, Tablet, Phone
Release Log
1.3: Adds Email button option to content preview areas (10/21/2016)
1.2: Added option to open Read More links in new window, in addition to opening in the same window (10/14/2016)
1.1: Adds text formatting tool link, allows individual link enabling per image, and stretches preview content area properly across browser (07/19/2016)
Setup
Drag the widget from the library and drop into your project in Design mode.
You will notice that the widget doesn't have a MuseThemes logo, but instead has a triangle with and "!" in the middle, with the text "Unable to generate thumbnail" underneath. This is normal. We didn't add an image (we call it a page poster) to the widget because the widget preview in Design mode will render all changes made in the options panel in real time. This is handy for getting a sense of how your images or galleries will look without having to preview in browser.
Open the widget option panel and set your columns and grid padding. There are no size settings for thumbnails because this widget uses a percentage-based grid system which allows for true responsive resizing. The lower the number in the “column” setting, the larger the images will appear. Images will resize and regroup as the browser size changes. This widget works great at a fixed size setting or full width.
Use the first two Images and Content sections to load your images and add your content:
Be sure to enable the exact number of images you plan to use
After uploading your image(s), add your title and content text. We've added a link to an online HTML text editor. This tool is handy for converting plain text to HTML that you can use to format your text in the content area. Simply type your text content into the online text editor, convert and copy the provided HTML, then paste into the content area in the widget panel.
Supported text formatting options include: font styles, font sizing, bold text, underline, indenting, paragraph breaks (not a complete list)
Every content area has a link option, which is enabled individually in each image loader area. The link text is set in the Preview Content Settings section
Thumbnail Settings: This section determines how the thumbnail images look and interact with the user’s mouse input
Thumbnail Overlay Color and Opacity apply to the entire gallery of thumbnails. Use this setting to apply a site branding color or to make the title text more readable
Thumbnail Opacity On Hover is not related to the first two Overlay settings. When hovering over an image, the overlay is no longer applied. Lower opacity settings reveal more of the background fill color or image
Inactive Thumbnail Opacity applies to the image thumbnails that are not selected when an image has been clicked and expanded
The rest of the settings in this section apply to the title seen on the thumbnail
Preview Content Settings: This section determines the content text, styling, placement and more:
The Content Text Alignment setting controls placement of all text: Left, Center, or Right
Content Padding controls the space between the content and the nearest boundary. With left alignment, padding affects the top and left boundary spacing. Center alignment affects top boundary spacing. Right alignment affects top and right boundary spacing.
The link in the content area can be set to be either text only, or a button. The bottom-most area of this section controls all of the link options
Navigation Settings This final section controls the look of the previous, next, and close buttons in the content area:
The previous, next and close buttons use text for their icons. Since the buttons aren’t all that big, it’s best to use single characters ( “<“ “>” “x” ) for the button text, rather than words such as “prev” or “next”
Rapid Reveal supports images of any aspect ratio (landscape, portrait, etc). For a gallery full of images using a similar layout, e.g., all landscape, we suggest ensuring that all of your images are the exact same WxH ratio (4x3, 5x7, etc). This will result in a consistent and uniform gallery