Scroll

Widgets - Galleries

Media Gallery Thumbnail List

This component allows users to create and manage the thumbnail preview within your Flash image gallery. You can set the number of rows and columns for your thumbnail preview, set colors and the size of thumbnails, border color, etc. Thanks to friendly arrow navigation, there is no need to close the image in order to go to the next one.

Let’s take a deeper look inside this advanced Moto CMS module:

1. To open Media Gallery Thumbnail List select Widget – Galleries  Media Gallery Thumbnail List:
12.png

2. Double click on the “Media Gallery Thumbnails” window, click on the "Add Items" button, select the images for your thumbnail gallery and click the “Select” button. You will be asked to choose the size of your thumbnails and which images should be used for preview.

3. Now you can start editing your thumbnail gallery widget:
preview_thumbs.png

The following functions are available within this widget:

  • Widget Connection ID (this function allows you to link this widget with other modules);

  • Prevent Second Click (you can enable or disable this function);

  • Image to Start From (you can choose from which image your thumbnail preview will be starting);

  • Item creation Delay;

  • Item Corner Radius;

  • Item Border Width ;

  • Item Border Color (set borders for your thumbnails and choose any color for it);

  • Item Border Alpha;

  • Orientation (horizontal and vertical);

  • Rows (you can set the number of thumbnail rows);

  • Item Width;

  • Vertical Spacing;

  • Columns (you can set the number of thumbnail columns);

  • Item Height;

  • Horizontal spacing;

  • Arrows Width (you can make them as wide or short as you wish);

  • Arrows BG Color and Alpha, Arrows Corner Radius;

  • Preload Widget (you can enable or disable this function);

  • Rotation (you can set the rotation angle);

  • Alpha;

  • Blend Mode (Normal, Darken, Multiply, Screen, etc.).

4. You may link each thumbnail image to a page, popup, external URL or file:
link_thumbs.png

5. Now you can click the “Preview Website” button and see the result.

Also, see our Video Tutorial about Media Gallery Thumbnail List here.

Media Gallery Preview

This component is really convenient and useful for photographers, since it allows them to set the big preview for their photo works right within a control panel. With the help of this widget you can perform a great number of functions that are described below:

1. To open Media Gallery Preview select  Widget – Galleries  Media Gallery Preview:
13.png

2. Double click on the “Photo Gallery Preview” window:
on_stage.png

Select images and click on the “Save” button:
add_items.png

The following functions are available within this widget:

  • Widget Connection ID (this function allows you to link the widget with other ones);

  • Slideshow (you can enable or disable this function);

  • Slideshow Delay (you can set the length of intervals);

  • Corner Radius;

  • Border Width;

  • Border Color (set borders for your gallery preview and choose any color for it);

  • Border Alpha;

  • Arrows BG Width (set the background width);

  • Arrows BG Color (set any color for the background);

  • Arrows BG Alpha;

  • Preload Widget;

  • Rotation (you can set the rotation angle);

  • Alpha;

  • Blend Mode (Normal, Darken, Multiply, Screen, etc.).

3. Now let’s click the “Preview Website” button and see the result:
preview.png

Also, see our Video Tutorial about Media Gallery Preview widget here.

Media Gallery Lightbox

Using this Widget you can add more useful interactive features to your gallery, e.g. interactive arrow buttons, close button as well as enable slideshow function and set the background color, etc. It can easily be linked with Grid and Preview widgets: the combination of these three innovative photo gallery components that are linked, creates a powerful basis for exhibiting photo works online in the most advanced and functional way.

1. To open Media Gallery Lightbox select Widget – Gallery - Media Gallery Lightbox:
14.png

2. Select the placement where you would like to place the Lightbox:
holder.png

3. Drag-and-drop the “Media Gallery Lightbox” window to your thumbnail gallery. Now you can edit the Lightbox:
preferences_lightbox.png

The following functions are available within the widget:

  • Widget Connection ID (this function allows you to link the widget with other galleries);

  • Slideshow (you can enable or disable this function);

  • Slideshow Delay (you can set the length of intervals);

  • Key navigation (you can enable or disable this function);

  • Mouse Wheel  (you can enable or disable this function);

  • Background Color;

  • Background Alpha;

  • Button Color;

  • Button Background;

  • Button Background Alpha;

  • Preload Widget (you can enable or disable this function).

      4. The Lightbox Widget should be connected with another widget – for example, Photo Gallery Thumbnail List. Please, place the thumbnail list to the same page with the Lightbox and give the same Widget connection ID to both of these widgets. Now the Lightbox will show the images from the thumbnail list:
preview_lightbox.png

Also, see our Video Tutorial about Media Gallery Lightbox widget here.

Have more questions? Submit a request

Comments