Meta data – how to use different parameters per link

With the Easy FancyBox Pro comes the possibility to change light box parameters per media link. Here is how to do this:

Basics

  1. Go to Settings > Media and activate the option Include the Metadata jQuery extension script… under FancyBox | Miscellaneous | Advanced.
  2. Go to the post/page/widget with the media link that requires specific settings and add or modify the link class to contain the custom parameters wrapped in curly braces like the following example.
<a class="anyclassname {key1:value1,key2:value2}" href="...

Some rules apply, to prevent errors:

  • The meta data must be separated from other class names by a space.
  • The meta data must be wrapped in curly braces ( { and } ).
  • Keys can be any of the parameters in the list below.
  • Keys are paired with a value by a colon ( : ) mark.
  • Key and value pairs must be separated by a comma ( , ).
  • Values can be numbers (without ‘px’ or other unit identifier), boolean values (true/false or 0/1) or text. A text value must be wrapped in quotes. Key and value pairs must be separated by a comma.

Example

Let’s say you are showing different Youtube videos on your site and the global landscape (16:9 ratio) size set on Settings > Media works fine for most of them, except some that show video shot in portait mode.

To prevent these portait mode videos from being “letterboxed” (i.e. shown with black bars on the sides to fill up the unused space) you can use meta data to set an alternative size like this:

<a class="{width:360,height:640}" href="https://youtu.be/qw9hwa_-raA"&gt;

If the value contains text instead of a number, it needs to be wrapped in quotes. In this example, it should use single quote marks otherwise it will break the double quotes wrapping the entire class value. For example:

class="fancybox-youtube {title:'Vertical video',titleShow:true,titlePosition:'inside',width:360,height:640}"

Apart from width and height and title parameters, there are many parameters you can use. A complete list below.

Available parameters

KeyDefault value *Description
padding10Space between FancyBox wrapper and content
margin20Space between viewport and FancyBox wrapper
opacityfalseWhen true, transparency of content is changed for elastic transitions
modalfalseWhen true, ‘overlayShow’ is set to ‘true’ and ‘hideOnOverlayClick’, ‘hideOnContentClick’, ‘enableEscapeButton’, ‘showCloseButton’ are set to ‘false’
cyclicfalseWhen true, galleries will be cyclic, allowing you to keep pressing next/back.
scrolling‘auto’Set the overflow CSS property to create or hide scrollbars. Can be set to ‘auto’, ‘yes’, or ‘no’
width560Width for content types ‘iframe’ and ‘swf’. Also set for inline content if ‘autoDimensions’ is set to ‘false’
height340Height for content types ‘iframe’ and ‘swf’. Also set for inline content if ‘autoDimensions’ is set to ‘false’
typeForces content type. Can be set to ‘image’, ‘ajax’, ‘iframe’, ‘swf’ or ‘inline’
hrefForces content source
contentForces content (can be any html data but passed via meta data it can not contain single or double quotes)
indexCustom start index of a gallery
autoScaletrueIf true, FancyBox is scaled to fit in viewport
autoDimensionstrueFor inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results
centerOnScrollfalseWhen true, FancyBox is centered while scrolling page
hideOnOverlayClicktrueToggle if clicking the overlay should close FancyBox
hideOnContentClickfalseToggle if clicking the content should close FancyBox
overlayShowtrueToggle overlay
overlayOpacity0.3Opacity of the overlay (from 0 to 1; default – 0.3)
overlayColor‘#666’Color of the overlay
titleShowtrueToggle title
titlePosition‘outside’The position of title. Can be set to ‘outside’, ‘inside’ or ‘over’
transitionIn, transitionOut‘fade’The transition type. Can be set to ‘elastic’, ‘fade’ or ‘none’
speedIn, speedOut300Speed of the fade and elastic transitions, in milliseconds
changeSpeed300Speed of resizing when changing gallery items, in milliseconds
changeFade‘fast’Speed of the content fading while changing gallery items
easingIn, easingOut‘swing’Easing used for elastic animations
showCloseButtontrueToggle close button
showNavArrowstrueToggle navigation arrows
enableEscapeButtontrueToggle if pressing Esc button closes FancyBox

*) Default values here are the light box script defaults, and may be different on your site, depending on your plugin settings on Settings > Media.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.