jquery.mb.bgndGallery 1.7.5. Make your custom transition

I’ve just updated the mb.bgndGallery adding some defaults effects for an easy implementation.

For all of you that where getting creasy on how to set the correct transition for the sliding images, this update introduces some built in effects you can easily apply to your gallery.

Before this update you had to specify the transition using a “complex” JSON object containing the needed CSS for the ENTER and the EXIT behavior of images:

effect: {
  enter:{transform:"scale("+(1+ Math.random()*5)+")",opacity:0},
  exit:{transform:"scale("+(1 + Math.random()*5)+")",opacity:0}, 
  enterTiming:"cubic-bezier(0.19, 1, 0.22, 1)", 
  exitTiming:"cubic-bezier(0.19, 1, 0.22, 1)"
}

Now you can use the short name of one of the presets coming with this new release instead of this complex definition:

effect:"zoom"

This is the list of the short name you can actually use:

  • fade
  • slideUp
  • slideDown
  • slideLeft
  • slideRight
  • zoom

But if you want to make your custom transition effect, here is a short tutorial.

mb.bgndGallery_schema_1

The mb.bgndGallery transition effect can be split into three steps:

  1. ENTER
  2. DISPLAY
  3. EXIT

This means that for each image the component needs to know where the image should be placed before, during and after its display.

The only step you can’t customize is the DISPLAY one as it is the one where the image needs to have a specific position.

The ENTER and the EXIT steps can be customized and they define what kind of transition the image will perform to enter and to exit the screen.

To customize these behaviors you need to define the position of the image for the two state of the image using CSS.

The component will then animate from the ENTER position to the DISPLAY and then, after the display timing, to the EXIT position.

As this will be rendered via javascript, you need to define an Object containing all the CSS properties for the image. You can read more about CSS object on the jQuery API documentation site.

You can do that via the “effect” option of the initialize function. That option accept either one of the short name of the preset effects (see above) or an Object composed by 4 descriptors:

  • enter: (Object: CSS)
  • exit: (Object: CSS)
  • enterTiming: (string: cubic-bezier curve definition)
  • exitTiming: (string: cubic-bezier curve definition)

If you want the image to slide in from left and then exit sliding out to the right you’ll need:

The ENTER position of the image will be minus the container width: left = -100%
The EXIT position of the image will be plus the container width:
left = 100%

the code will be:

{enter:{left:"-100%"},exit:{left:"100%"}}

EnterTiming and ExitTiming

As the gallery is using the CSS3 transition capabilities you can define also the ease to be applied to the effects. You have two additional attributes for the JSON descriptor (enterTiming, exitTiming) used to define the enter and the exit timing. They accept a string with the cubic-bezier descriptor.

For example:

enterTiming: "cubic-bezier(0.19, 1, 0.22, 1)"

Lea Veru made a lovely tool to visualize and retrieve the cubic-bezier curve definition you can use to set the correct value of these two attributes.
You can also take a look at this easing visualizer.

 

Using this simple technique you can define your custom transition effect.
You can also add new effect definitions to the defaults as follow:

$.mbBgndGallery.effects["myEffect"] = {enter:{...},exit:{...}, enterTiming:"...", exitTiming:"..."}

And then using it as follow:

effect:"myEffect"

 

If you would have your custom transition included in one of the next release you can post your solution on the dedicated Q&A here

Read the documentation
Go to the download page
See the demo page