Floating Gallery

https://www.muse-themes.com/products/floating-gallery

This appropriately–named widget displays a gallery of thumbnail images that appear to float on the page. As you move your cursor, the entire gallery reacts by gently moving images in harmony with the cursor movements.

Clicking on any gallery item opens a new focus page with a full size image, title, description and button to link site visitors to other pages to learn more. This widget offers an interesting and beautiful self-contained gallery that's perfect for grabbing some serious attention!

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop, Tablet, Phone

Release Log

  • 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.
  • Most users will want to use this widget at full browser width, so that it is fully responsive.
  • Use the Resize dropdown in the Top Menu to control the responsive behavior of the gallery.
  • For maximum effect, unlock the page width using the double arrows in the breakpoint area (see "Useful Tips")

WIDGET OPTIONS

  • Open the widget option panel.
  • Background Text First Line: This will be the top line of text that you’ll see behind the gallery.
  • Background Text Second Line: This will be the bottom line of text that you’ll see behind the gallery.
  • Back Button Label: The text that will appear in the navigation that returns you to the main gallery page.
  • Mobile Grid Item Height: This sets the height of the image thumbnails on mobile devices. It is best to use a setting of 50% or less, so that images don't appear too tall and thin on the narrow viewports of mobile devices.

ITEM 1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16 SETTINGS
These sections allow you to enter all of the elements that are seen on the individual item pages.

  • Enable Item: This enables the item. For example, if you have 12 images to show in your gallery, you will enable items 1-12 but you will not enable items 13-16.
  • Image: This is the image that appears in the item details page. It is also the same image that appears as the thumbnail image on the main gallery page. It is suggested to use images that are optimized, and with a max width of at 1000px to 1500px.
  • Item Title: This is the large title text that overlaps the image on the item details page.
  • Item Subtitle: This is the item subtitle.
  • Content Text: This is the item content text (item description)
  • Enable Button: This enables a button for your item details page.
  • Button Link: The URL of your button link. You may also enable Current Page.
  • Button Label: The text that appears on your button.
  • Button Target: Choose whether you want the link to open in the same tab or in a new tab.

BACKGROUND TEXT STYLING SECTION
This section contains an extensive set of styling options for the text that appears behind the gallery. These options are labeled with their exact functions and will not be discussed in detail here as they are self-explanatory.

ITEM STYLING SECTION
This section contains an extensive set of styling options for all of the elements of the item details page. These options are labeled with their exact functions and will not be discussed in detail here as they are self-explanatory.

HELPFUL TIPS

  • Unlocking Page Width: The page lock arrows in Muse are important when using this widget. These arrows lock the content on a page so that all page content is constrained to the breakpoint. In the screenshot above, all content will be locked inside of the 960px breakpoint. If these arrows are facing inward on your page, all of the gallery images will be constrained between the arrows on your published/previewed site. This weakens the dramatic effect of the gallery. Assuming your page design allows for it, we suggest pointing these arrows outward. To do this, just click on the arrows (you only need to click on one side).

  • Uniform Images: This widget displays thumbnail images in an aspect ratio that shows as square to portrait, depending on the size of the screen. The gallery is responsive, and image aspect ratios display narrower on smaller screens. As with most all of our gallery widgets, it is advised that you consider how your images will look within the gallery. Choose images that will look good in a square or portrait layout. Other layouts – such as landscape – will be cropped on the left and right edges.

Commonly Asked Questions

No commonly asked questions


Known Issues/Conflicts

No known issues or conflicts


Additional Info Links