FLUID PRO

U L T I M A T E M U S E G A L L E R Y

Overview

Features

Basic

Widget Options

Step by Step

Step by Step

SMART

INTERACTIVE RESPONSIVE GRIDS

Overview

The main purpose of the widget is to create easy responsive grids to display images and videos that are being organized in a unique lghtbox. All the thumbnails are connected with a single Slideshow, the slideshow will load the thumbnails no matter where it is placed on the page.

Features

  1. Proportional height and percentage based height.
  2. Unified, responsive and touch enabled slidehsow/lightbox.
  3. Hover effect on thumbnails and/or Image/video containers.
  4. Ability to combine image & Video in the lightbox.
  5. Customizable controls on the lightbox.

 

Basics

SMART is an Adobe Muse responsive widget consists of two main parts, The MAIN widget, and the Thumbnails.

 

The Main widget can be used to control the overall functionality of the thumbnails such as lightbox properties,  and basically everything else that is consistent on all the thumbnails.

 

The Thumbnails are separate widgets. each thumbnail widget controls the image, video, text, and appearance of one thumbnail on the page and in the lightbox. By duplicating a thumbnail, you can have unlimited instances (Image / videos).y.

Use this main widget to control the overall functionality.

  • Duplicated the thumbnails to get more.
  • To change the font attributes, use the text panel as the widget is selected.
  • Use the Fill panel to add background.

Widget Options

MAIN WIDGET

First/Largest Breakpoint

 

This is important to enter the size of the largest breakpoint in this option, and remember to update the number if you changed  the size of the fist breakpoint later on in the project.

 

By default, for a new project in Muse, the largest breakpoint size is 960 pixels, as it is in the widget option panel.

 

THUMBNAILS

Youtube/Vimeo Video

You can add video from Youtube and Vime. To add your video, type/paste the full URL of your video and the image of that thumbnail will be replaced by the video you added.

v.2

1.  Place the widget on the page.

2. Select the MAIN widget and Perform the following steps:

  • Click on the small blue icon      at the top-right side of the widget to see the widget option panel.
  • Enter the width of the First/Largest breakpoint in the widget optionpanel.
  • Use the other options to apply styling to all the thumbnails.

3.  Select the THUMBNAIL widget and Perform the following steps:

  • Click on the small blue icon      at the top-right side of the widget to see the widget option panel.
  • From the height panel, select a method for the height.
  • Use other options to style the selected thumbnail.

4.  Duplicate the THUMBNAIL widget

  • To duplicat the thumbnail widget, you can copy/paste the one on the page, or you can hold the Option/Alt key and drag the thumbnail to get a duplicate.
  • Make sure that you have changed the options you want on the thumbnail before duplicating, so you will not end up changing the options on all the duplicates at the end.

5.  Add image to the thumbnail

  • Toadd image to the thumbnails, select each thumbnail separately and use the Fill panel to add an image as the background image.

6.  Change the font, font-color, and font-size

  • The font can be changed on each thumbnail separately and also it can be changed for each breakpoint separately if you select the option "Format text on current breakpoint"    when you are changing the text

Documentation

Features

SMART

DOCUMENTS

FAQ

MAIN Widget

THUMBNAIL Widget

Copyright © 2016 QooQee.com | QooQee Muse Templates & Widgets.

Adobe Muse Widget by QooQee.com