With the Easy FancyBox Pro comes the possibility to change light box parameters per media link. Here is how to do this:
Basics
- Go to Settings > Media and activate the option Include the Metadata jQuery extension script… under FancyBox | Miscellaneous | Advanced.
- 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 brackets (or 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="button {width:360,height:640}" href="https://youtu.be/qw9hwa_-raA">Feel Good (portrait, meta data)</a>If the value contains text instead of a number or boolean (true/false), 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
| Key | Default value * | Description |
|---|---|---|
| padding | 10 | Space between FancyBox wrapper and content |
| margin | 20 | Space between viewport and FancyBox wrapper |
| opacity | false | When true, transparency of content is changed for elastic transitions |
| modal | false | When true, ‘overlayShow’ is set to ‘true’ and ‘hideOnOverlayClick’, ‘hideOnContentClick’, ‘enableEscapeButton’, ‘showCloseButton’ are set to ‘false’ |
| cyclic | false | When 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’ |
| width | 560 | Width for content types ‘iframe’ and ‘swf’. Also set for inline content if ‘autoDimensions’ is set to ‘false’ |
| height | 340 | Height for content types ‘iframe’ and ‘swf’. Also set for inline content if ‘autoDimensions’ is set to ‘false’ |
| type | Forces content type. Can be set to ‘image’, ‘ajax’, ‘iframe’, ‘swf’ or ‘inline’ | |
| href | Forces content source | |
| content | Forces content (can be any html data but passed via meta data it can not contain single or double quotes) | |
| index | Custom start index of a gallery | |
| autoScale | true | If true, FancyBox is scaled to fit in viewport |
| autoDimensions | true | For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results |
| centerOnScroll | false | When true, FancyBox is centered while scrolling page |
| hideOnOverlayClick | true | Toggle if clicking the overlay should close FancyBox |
| hideOnContentClick | false | Toggle if clicking the content should close FancyBox |
| overlayShow | true | Toggle overlay |
| overlayOpacity | 0.3 | Opacity of the overlay (from 0 to 1; default – 0.3) |
| overlayColor | ‘#666’ | Color of the overlay |
| titleShow | true | Toggle 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, speedOut | 300 | Speed of the fade and elastic transitions, in milliseconds |
| changeSpeed | 300 | Speed 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 |
| showCloseButton | true | Toggle close button |
| showNavArrows | true | Toggle navigation arrows |
| enableEscapeButton | true | Toggle 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.