Media Pro Gallery is our most popular widget of all time. Version 2.0 is a complete rebuild of our classic flagship gallery widget.
We’ve rebuilt the widget from the ground up to ensure stability, improve compatibility with modern web browsers, and guarantee the best experience on mobile and touch devices. In addition, we’ve added a bunch of awesome new features based on the enhancement requests we’ve received from users in product reviews.
Media Pro Gallery 2.0 is the ultimate gallery widget for Muse. Use it to display responsive galleries that look great across any device. Full control of category filters are available using default or custom buttons. Images and video are displayed in a lightbox when a gallery thumbnail is selected. Choose from several gallery display modes, including Grid, List, Standalone Thumbnails, and Dynamic Galleries that allow galleries to be launched from a single button.
All-new features in version 2.0:
• Rebuilt from scratch
• Multiple gallery layouts
• Support for mixed aspect ratios (such as landscape and portrait)
• Standalone thumbnails
• Thumbnail navigation within lightbox
• Download option
• Social sharing
• Improved control of collections
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 2.2
Supported Devices: Desktop, Tablet, Phone
Release Log
2.2: Added custom text option for the "All" button, allowing for support of any language. (03/21/2018)
2.1: Added separate image Alt tag field (in addition to Alt tags applied by Caption Text field), Added positioning options for default collection buttons (left, center, right), fixed bug causing trouble displaying 2 or 3 column views.
2.0: Rebuilt widget from scratch
Video Playlist
Setup
Drag the widget from the library and drop into your project in Design mode.
You will see that there are 4 separate widget components:
Gallery Component: This widget determines the size and placement of the gallery within your page. It also contains the majority of the settings in the option panel.
Toolbox Component: This widget enables functionality of the Media Pro Gallery. One instance is required for any page that uses Media Pro Gallery 2.0 (regardless of the number of instances of galleries).
Collections Component: This widget allows you to apply custom graphic elements to collection buttons.
Loader Component: This widget is used to load images and video into your galleries.
Positioning Gallery
Place the Gallery Component where you would like it to appear on your page. You may size the widget container how you like, including stretched to browser width.
All other widget components may be placed out of the way off canvas.
Loader Component: Loading Images and Video
Open the Loader Component widget option panel.
Gallery ID: This setting allows the loader to be applied to a particular gallery. This name should match the Gallery ID name found in the Gallery Widget component Gallery ID field. Multiple Loader components may be used per gallery. Duplicate this widget component as needed.
Open the Gallery Items section.
The Loader component allows 5 items to be loaded per component. Enable items as needed.
Item Source Type: This option allows for usage of local source files from your computer, or external sources, such as images stored on Dropbox.
Local Source File: This Add File option allows you to select your source file. This is the item that will be seen in the lightbox when a thumbnail is clicked. You may load images or videos.
External Source: This setting allows you to link to an external image or video source. This URL should end in .jpg, .jpeg, .png, .gif, or .mp4. Note that not all web storage options provide a direct link to the URL that ends in the file type.
Use Source as Thumbnail (Image Only): This enable/disable option allows you to apply the image used as the source image to be automatically used as a thumbnail image in the gallery. This setting only applies to images, not video. When this setting is not enabled, you may have separate images for the thumbnail and lightbox/source.
The thumbnail options are identical to the source selection options above.
Item Collection: If you wish to use category filters in your gallery, choose collection names and enter the collection name which you would like the item to be applied to. This setting relates to the "Collection Names" setting in the Gallery Widget component (discussed further below)
Item Caption Title and Item Caption Text: These settings allow for applying titles and subtitles to items. Captions (titles) may be applied to thumbnails. Captions and caption text (titles and subtitles) may be applied to images and video within lighboxes.
The Source File setting accepts both images and video files.
Collections Component: Using Custom Collection Buttons The Collections Component allows you to apply custom button graphics as collection filter buttons. If you would like to use default buttons, you don't need to change any settings in this widget. Default buttons may be enabled in the Gallery component widget. Each custom button will need it's own Collections Component widget, so duplicate this widget as needed.
Gallery ID: This setting allows the Collections Component (and associated custom buttons) to be applied to a particular gallery. This name should match the Gallery ID name found in the Gallery Widget component Gallery ID field.
Create a custom collection button graphic using a text box, rectangle, or state button. Apply a graphic style to the button.
You may duplicate buttons to speed up the process. Just make sure to change the button text and apply unique graphic styles to each button.
Define the button graphic style name in the Custom Cleection Button Graphic Style.
Collection Name: This name determines which images will be associated with the button. When using the Loader Component to load images, you may apply each image to a collection using the Item Collection setting in the Loader Component option panel.
Use As 'Show All' Button: This setting allows you to use the custom button as the "Show All" button. When enabled, the button will show all images. No collection will be associated with the graphic when this option is enabled.
A unique instance of the Collections Component widget must be used for each custom button. Duplicate as needed.
Gallery Component: The Main Settings Widget
This component determines the location of the gallery on your web page and also contains the majority of the settings for Media Pro Gallery 2.0.
Position the widget as you like (see "Positioning Gallery" section above)
Open the widget option panel.
Enter a Gallery ID. This field should match the Gallery ID's used in the associated Loader and Collection components.
Select a Gallery Type:.
Regular: This is a standard thumbnail gallery.
Standalone Thumbnail: This mode allows a single thumbnail to be displayed in place of a full gallery.
Dynamic: This mode allows the gallery to be launched from a single custom button. For details on this mode, see the "Dynamic Gallery" section below.
Gallery Ordering: This setting allows the thumbnails to be positioned in order, or shuffled.
Collection Display Style: This setting allows for use of custom or default buttons.
Collection Names: This field is where you will list your collection names. These names should exactly match the collection names used in the Loader Component. Collection names are case sensitive.
Standalone Thumbnail Index: This setting determines the ordering of the thumbnails when Standalone Thumbnail mode is enabled in the Gallery Type.
Dynamic Gallery Element: This field allows you to define the graphic style name used to associate the gallery with a custom button to trigger the gallery using the the Dynamic Gallery Type. For details, see the "Dynamic Gallery" section below.
Gallery Layout Section This section contains the bulk of the settings associated with the layout of the gallery.
The Layout Type setting determines the type of layout that will be shown. There are 4 modes:
Uniform Grid: This mode displays images in their original aspect ratio. This is the ideal mode to use when all images are sized to the same aspect ratios. If mixed aspect ratios (e.g. mixed landscape and portrait images) are used, unwanted gaps will be seen in this mode.
Stacked Grid: This mode arranges images of any aspect ratio into a grid, gap-free. This approach is referred to as masonry, and is ideal for galleries containing mixed aspect ratios, such as landscape and portait images. Note that this mode will likely leave an uneven bottom row since the variable height of images move images up and down within columns.
Constrained Thumbnail Grid: This mode creates uniform grids by constraining thumbnails to a defined height (see 'Thumbnail Height' setting). This layout type may be ideal for those that choose not to crop or size their images uniformly before loading into the Loader Component. Even though the thumbnail height may be defined, image width is variable since this widget is responsive. Keep in mind that drastically-different sized images may create gaps at various browser sizes. We suggest refraining from using long vertical/portrait images for this reason.
List: This mode displays images in a vertical list layout. This is likely to be less commonly used as a layout type, though could be useful for single column arrangements.
Grid Layout Max Columns: This setting allows the maximum number of columns to be determined. This is useful for retaining control of the shape and presentation of thumbnail images across various browser sizes.
Gallery Padding: This setting adds padding on the left and right sides of a gallery. This setting is best utilized when your gallery is stretched to full browser width. This setting does not apply to the List
Thumbnail Margin:: This setting applies a margin around each thumbnail image, useful for creating space between thumbails. The margin is applied to all sides of thumbnail images.
Thumbnail Height: This setting applies a manual height setting to thumbnail images. This option applies to the Constrained Gallery mode only.
Layout Arrangement Icons: Shows or hides the layout arrangement icons. The arrangement icons offer the user convenient icons to switch back and forth between grid and list views. The follwing 2 settings allow for color changes of the active and non-active icons.
Gallery Thumbnail Filter: Several filter options are available for the gallery thumbnails. This option allows you to select a filter style.
Gallery Thumbnail Filter State: Filters may be applied to thumbnails in normal state, or hover state. This option allows you to choose which state will receive the filter.
Filter Transition Duration: The duration of time it takes for the filter transition to take.
Thumbnail Hover Cursor: A custom cursor may be used when hovering over gallery thumbnails, if you wish. "Default" keeps standard cursor behavior, "Custom" enables custom icons which are loaded below.
Thumbnail Hover Cursor Image and IE Thumbnail Cursor (.cur) options allow you to upload your own custom cursor image. You may use typical image types, except Internet Explorer requires ".cur" files. These options allow your custom cursor to work on any browser.
Zoom Effect on Hover: Enable or disable a subtle zoom effect when hovering over a gallery thumbnail.
Icon and Title Overlay: Enable or disable icon and title on thumbnail hover.
Overlay Icon: This field allows you to enter a font ID from Font Awesome's font library:
Slideshow Settings Section
Transition Animation: Many transition styles are available for the transitions between slides.
Transition Easing: The easing of the transition between slides.
Transition Duration: The time it takes to transition from slide to slide (in milliseconds).
Video Maximum Width: This setting sets a maximum width for video thumbnails and playback.
Lightbox Gallery Width and Lightbox Gallery Height: These settings set the width and height of the lightbox. These settings are percentage based, so be sure to include a % on your value (e.g. 80%)
The following checkbox options in this section allow you to enable various options that will appear in the Lightbox. You may mix and match which options you wish to include.
Lightbox Settings Section (Key Settings)
Progress Bar Color and Progress Bar Background Color: These colors apply to the progress bar that indicates progress between slide transitions. You may set the progress bar color as well as the background color.
Lightbox Thumbnails: This option enables or disables the thumbnails seen at the bottom of the lightbox area.
Lightbox Thumbnail Width and Lightbox Thumbnail Height: These settings allow sizing control of the thumbnails in the lightbox. Note that if thumbnails are set too large, they may cover the image captions.
Lightbox Thumbnail Margin: This setting sets the space between thumbnails in the lightbox.
Lightbox Thumbnail Border Settings: Several settings are available to style the thumbnail borders.
Lightbox Filter Settings: Several settings are available for customizing filters for the thumbnails in the lightbox. These settings are similar to the filters available for the gallery thumbnails. See the Gallery Layout Section above for details.
Enable Lightbox Thumbnail Drag: This setting allows the entire row of thumbnails within the lightbox to be dragged left or right on a touch device or with a mouse. This function will not be possible unless the row of thumbnails exceeds the space of the browser width.
Show Lightbox Thumbnail Toggle: This setting enables the thumbnail toggle icon in the bottom right corner of the lightbox. It allows the lightbox thumbnails to be hidden and unhidden if enabled.
Collection Button Settings Section This section provides settings that allow for customization of the default collection buttons, along with a few settings that allow you to apply filters and opacity settings to custom buttons. This section will discuss the key settings within this section.
Header Height: This option sets the height of the header above the gallery. This setting is only relevant for default buttons, as custom buttons appear where you place them in Design mode.
Collection Button Alignment: Provides several default positioning options for the default collection buttons.
The next group of settings apply styling options to the default buttons.
The last group of settings apply filter and overlay settings to custom buttons. These settings only take effect if Custom Buttons are selected in the "Collection Display Style" setting near the top of this widget.
Custom Collection Button Normal State: Several options for filters are available.
Custom Style Filter Value: This sets the value for the filter effect chosen in the above setting. A value of 1 is maximum, 0.5 is half, and a value of 0 is none.
Normal State Opacity and Active State Opacity: These settings set opacity values for the normal and active states of the custom collection buttons. These settings are precentage based, and are relative to the filter value set in the Custom Style Filter Value. For maximum effect, the Custom Style Filter Value should be set to 1. The opacity settings will be varying degrees less than 100% when thw Custom Style Filter Value is set to 1.
Remaining Sections The remaining sections – Caption Styling, Autoplay Settings, Zoom Settings and Social Share Settings are smaller sections containing rather simple settings that are fairly self explanatory and consistent with other widgets in our library.
Image Alt tags are applied automatically from the text entered into the Caption Text field. Additionally, you may enter custom Alt tags in the Alt Text field in the Loader widget component. Text entered in the Alt Text field overrides Caption Text as image Alt tags.