Media Pro Gallery

This powerful and clever gallery widget displays both images and videos in a fluid grid layout. The responsive functionality ensures that your gallery will always display beautifully, regardless of screen or browser size.

Individual collections enable the ability to automatically sort images and videos based on categories. Use your choice of default or custom buttons. Complete with animation, custom filters, and a variety of lightbox display options, this widget provides maximum flexibility.

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

Release Log

  • 1.5: Updated to correct distortion occasionally seen on "vertical" portrait images (06/24/2016)
  • 1.4: Added more caption control and refinement, improved linking performance, adjusted to stop widget from adding ".html" to links (05/06/2016)
  • 1.3: Added captions and linking in gallery thumbnails, prev/next arrows in lightboxes (05/04/2016)
  • 1.2: Adds ability to resize gallery layout to mobile and tablet sizes (03/24/2016)
  • 1.1: Fixed height causing footer overlap (02/17/16)
  • 1.0: Adds collapsible panel functionality and support for responsive Muse
  • L11.5: Added ability to use links with gallery thumbnail images (07/21/2015)
  • L11.4: Fixed bug causing "Double Animation" seen in multiple browsers (05/26/2015)
  • L11.3: Fixed bug causing lightbox to display behind gallery thumbnails (05/07/2015)

Video Playlist


  • Drag the widget from the library and drop into your project in Design mode.
  • You will notice that there are 3 components on your workspace.
    • Layout: The largest component sets the size of the gallery when previewed or published. This component also has the bulk of the overall widget settings found in it’s option panel.
    • Customization Options: This component controls gallery thumbnail hover effects, transitions, and timing. There is also a custom animation field for those that would like to use their own animation code.
    • Collections: Use this component to load images and videos, as well as enter captions and links. Every collection in the gallery will have it’s own separate collection component. Multiple collections can be used.
  • To get started, place the Layout component on your page where you would like it.
  • Decide how many collections you plan to use in your gallery. Duplicate the Collections component so that you have a Collection component for every collection. Give each collection a unique title. Set the sort order, and the number of images in each gallery.
  • Load all of your images using the “Add File” button. If using a video, enter the video link and enable video by checking the box that labeled “Use Video URL.” Note that videos must be hosted on YouTube or Vimeo.
  • Set the captions and links if you will be using them.
  • At this point, your gallery will be functional. It’s a good idea to preview the gallery in browser to see how things look, and how you would like to style the gallery. Nearly every element of gallery and lightbox are customizable.
  • Go through each option in the Layout and Customization components to set the functionality and styling exactly as you like.

You can use an unlimited number of images or videos in the gallery by simply duplicating the "loader" widget and ensuring the collection names match.

Commonly Asked Questions

No commonly asked questions

Known Issues/Conflicts

This is a powerful widget that takes control of page positioning, and may conflict with other fullscreen or location-specific elements. We do not recommend combining it with the following:

  • Pushy Panes
  • Presentation Panels
  • Fullscreen Thumbnail Gallery
  • Versa Slide
  • Fullscreen Video Backgrounds
  • SHOW Video Backgrounds
  • Any scroll effects

Additional Info Links