The Sun template comes with two pre-designed Fluid Infinity gallery widgets located on the Home page and Projects page. Use these galleries to show off all your visual images or videos to your users in a beautiful way.
Home Gallery
The Home Gallery uses the Fluid Infinity widget to deliver a fully responsive and customizable gallery to display your images. The home gallery uses your thumbnails as links throughout your project.
Adding Hover Effects
Through the Fluid Infinity Options Panel, you can control the different hover effects of your gallery thumbnails. Use the areas to apply filters, adjust transition speeds, and even the scale of your image once hovered.
Use the provided TextBoxes to style your galleries thumbnails captions quickly and easily. Use the thumbnails Title and Description areas to input the title and description that you would like for each thumbnail. Then set the style for your thumbnails for both the in-page and lightbox gallery through the Container Option Panel and the given Textboxes.
Step One
To start, click on the Thumbnails text box to change the background fill color and style. Apply Opacity, Imagery, and Color through the Fill Panel.
Step Two
Next click into the text box to change the Title and Description of each gallery items font, color, size or add a Paragraph style. The styles applied within the textboxes will be applied to the entire gallery.
Use the Text dropdown area to style the thumbnail captions. Use the areas to customize and style the placement, animation and spacing of your thumbnail captions.
Click here for more information about styling and editing the Thumbnail Text Styling box.
Click here for more information about styling and editing the Lightbox Text Styling box.
Thumbnails Using Google Sheets
The Home Gallery uses Google Sheets as its source for images. Google Sheets make it easy to add, adjust and edit your gallery content without even having to open your Muse file.
Step One
To start, open the Fluid Infinity options panel and under the Main tab, click on the Google Sheet empty Template that QooQee provides.
Step Two
Log in to your Google account and Make a copy of the file to Rename it.
Step Three
Now you can start adding your content. Keep in mind an image can only be used in one category but can have more than one filter. To separate filters, place a comma between with no spaces.
Step Four
You can also add in titles and descriptions for your items as well as a video or have the image link to another page. Each image can link to a different page, if desired.
Step Five
For the visibility section, you have a couple of options to determine where the image will be seen.
- In the Lightbox option, the image will only be seen when Lightbox is activated.
- In the Thumbnail & Lightbox option, the image will be visible as a thumbnail and in Lightbox.
- In the Thumbnail option, the image will only be viewable as a thumbnail.
- In the Thumbnail (no hover) option, the image will not have a hover effect applied to it.
Step Six
Now it’s time to publish your sheet. Go to File > Publish to the web.
Step Seven
Make sure you choose Entire Document and select the name of the sheet you want to publish. Then click Publish and hit OK.
Step Eight
Go to the URL and copy the part that comes after spreadsheets/d
This is your Google Sheets key, which you’ll need to plug back into Fluid Infinity in Muse.
Step Nine
Open the Fluid Infinity options panel, and in the Main tab add in your Google Sheets key.
For information on uploading images to Google Sheets, please click here.
Filter Button Gallery
The Filter Button Gallery uses the Fluid Infinity widget to deliver a responsive gallery that takes full advantage of Fluid Infinity's filtering and sorting features. With a few filter buttons, users will be able to reach your content quickly and directly.
Bulk Thumbnails
Step One
In the Library panel under the QooQee Fluid Infinity folder, drag out Thumbnails (Bulk).
Step Two
Open up the Bulk Thumbnails option panel and add your images. You can add up to 10 images. If you need more space, just drag another Thumbnails (Bulk) onto the page and continue to add in your images.
For information on how to use Bulk thumbnails, please click here.
Filtering
Adding filters to your images allows you to target those images in the gallery with the use of filter buttons. Below are the steps for adding filters and filter buttons.
Step One
Go to the Bulk Thumbnails option panel and add a filter for each image. Images can have more than one filter but must be separated by a comma.
Step Two
Then open the Filter Button’s options panel and enter in each filter category you wish to assign to that button.
Step Three
To have a button show all the images when clicked, make sure the Show All option is checked.
For information on how to use filter buttons, please click here.
Lightbox
This gallery has settings applied to the Lightbox which can further customize the experience of your viewers. These settings determine which images are included within your Lightbox when a thumbnail is selected.
Step One
In the Lightbox panel go to the Settings tab and from here you can select which kinds of images Lightbox includes.
- Same Category of the clicked thumbnail means that all the images within the same category will appear regardless if they are currently viewable or not.
- Visible/filtered images means that Lightbox will only show the images within the same category that are currently visible. Images that are not currently visible will not show.
For information on how to use lightbox with Fluid Infinity, please click here.
