DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Animation Effects Hook

(Available since version 0.4.0)

Use this hook if you want to add your own animation effects to the Magnific Popup lightbox by adding a new mainClass.

Please use animation wisely and when it’s really required. Do not enable it when your popup may contain large image or a lot of HTML text.

General

In general you will have to add some CSS to you page (maybe by TypoScript). CSS examples could be found here: http://codepen.io/dimsemenov/pen/GAIkt

For Images

To use an effect for the image-lightbox you will have to add the class (for example “mfp-zoom-in”) to constant plugin.tx_jhmagnificpopup.magnificpopup.mainClass in Constant Editor. (Please make shure to add only one animation effect, otherwise the lightbox fails.)

For Plugin

Actually there are two ways to register a new animation effect by adding mainClass:

  1. adding some PageTS
  2. using two hooks in an extension

1. Adding some PageTS

The faster way is to add two new lines to your PageTS (for zoom in effect):

tx_jhmagnificpopup.mainClass.zoom = mfp-zoom-in
tx_jhmagnificpopup.removalDelay.zoom = 500

tx_jhmagnificpopup.mainClass.zoom declares the class to be used for the animation effect. Whereas “zoom” will be selectable in selector-box mainClass in plugin FlexForm.

tx_jhmagnificpopup.removalDelay.zoom declares a removalDelay of 500ms to the lighbox. Whereas “zoom” will be selectable in selector-box removalDelay in plugin FlexForm.

1. Using two hooks in an extension

More complexive is to use a hook in your own extension.

Register your hooks like this:

$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['jh_magnificpopup']['mainClass'][] = 'EXT:mx_extension_key/Classes/Hooks/MainClass.php:Vendor\ExtensionName\Hooks\MainClass->animationEffectName';
$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['jh_magnificpopup']['removalDelay'][] = 'EXT:mx_extension_key/Classes/Hooks/MainClass.php:Vendor\ExtensionName\Hooks\removalDelay->animationEffectName';

The first hook should return an array like this:

array($animationTitle, $cssClassName)

The seconde hook should return an array like this:

array($animationTitle, $removalDelay)

After this your animation effect is available in FlexForm.

For a working demonstration please see EXT:jh_magnificpopup_animation.