Media Gallery

Media Gallery element displays Images, Vimeo video, Youtube video, Self hosted video or audio, HTML5 video or audio, iframe or embed within grid or slider

Media Gallery element displays Images, Vimeo video, Youtube video, Self hosted video or audio, HTML5 video or audio, iframe or embed within grid or slider. Element popup contains following options;

Layout tab

  1. Holder box style  -  Adjust .thz-media-holder box style.
  2. Media layout  -  Select media layout mode.
  3. Media grid settings  -  Adjust grid settings. If the .thz-grid-item-in width is less than desired min width, the columns number drops down by one in order to honor the min width setting. This adjustment is active only if media container height is anything else but metro. On the other hand if the window width is below 980px and grid has more than 2 columns, only 2 columns are shown. Under 767px 1 column is shown.
  4. Media slider layout  -  Adjust media slider layout.
  5. Media slider animation  -  Adjust media slider animation.
  6. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Media box tab

  1. Media posters  -  Activate media posters for all media types except images. f this option is inactive, all videos and iframes load on pageload and increase page load time. This option adds a preview poster which than activates the media on click.
  2. Media grayscale  -  Add grayscale effect to media images.
  3. Media box style  -  Adjust .thz-media-item-media box style.
  4. Image size  -  Select the image size to be used in gallery.
  5. Media container height  -  Set media container height.

Media tab

  1. Media items  -  Add/edit media items. Drag and drop to reorder.
  2. Show title  -  Show/hide media title.

Media Title tab

  1. Title margin  -  Adjust title margin.
  2. Title font  -  Adjust item title font.

Lightbox tab

  1. Backdrop Style  -  Select backdrop ( popup background ) style.
  2. Backdrop Opacity  -  Set backdrop ( popup background ) opacity.
  3. Popup effect  -  Select popup window opening effect.
  4. Show thumbnails slider  -  Show/hide lightbox thumbnails slider.

Media Overlay tab

  1. Overlay display mode  -  Select overlay display mode.
  2. Media overlay background  -  Set media overlay background.
  3. Media overlay effect  -  Select media overlay hover effect and duration.
  4. Media image effect  -  Select media image hover effect and duration.
  5. Overlay element effect  -  Select media overlay element hover effect and duration.
  6. Media overlay distance  -  Distance the media overlay from media box edges.

Overlay icon tab

  1. Show overlay icon  -  Show/hide overlay icon.
  2. Icon metrics  -  Adjust icon metrics.
  3. Shape metrics  -  Adjust icon background shape metrics.

Filter tab

  1. Show filter  -  Show/hide sorting filter.
  2. Filter margin  -  Adjust filter margin.
  3. Filter link metrics  -  Adjust filter link metrics.
  4. Filter link style  -  Adjust filter links style. Hovered link takes properties from active link.
  5. Filter font  -  Filter links font metrics.

Effects tab

  1. Animate container  -  Add animation to the layers HTML container.
  2. Container parallax  -  Activate/deactivate container parallax.
  3. Media parallax  -  Activate/deactivate media parallax. This effect works for images only and it does NOT work if media height is auto! To parallax media for specific items only, add specific items in the order that you see them separated by comma like; 1,5,7. This would parallax media for 1st 5th and 7th item.