jQuery Postify Plugin Examples

Basic Options

adjustSize: parent
duration: 500ms
$('div.postify-basic1').postify({adjustSize: "parent", duration: 500});
adjustSize: auto
duration: 1000ms
$('div.postify-basic2').postify({adjustSize: "auto", duration: 1000});
adjustSize: cover
duration: 1000ms
$('div.postify-basic3').postify({adjustSize: "cover", duration: 1000});


$('div.postify').postify({delay: 1000, adjustSize: "cover", duration: 500, animation: "scale"});
$('div.postify').postify({delay: 1000, adjustSize: "cover", duration: 500, animation: "fade"});
$('div.postify').postify({delay: 1000, adjustSize: "cover", duration: 500, animation: "slideLeft"});

Custom Animations

When you override the
property you can define custom animation by providing an array containing at least two objects and an optional
function step(now, fx)
. The first object describes the start and and the second contains the final state. Attention: you can't animate complex, non numeric css properties. If you want to animate e.g. the transform property you have to define the first object with the initial state and the second with optional end points. The step function sets the css for each frame manual.
$('div.postify-custom').postify(undefined, {delay: 1000, adjustSize: "cover", duration: 500, animation: [{opacity: 0}, {opacity: 0.5}]});


Option Description Default Values
url Overrides the url in the data-postify attribute undefined custom string
animation Choose one of the predefined animations or declare a custom one fade
  • fade
  • slideUp
  • slideDown
  • slideLeft
  • slideRight
  • flip
  • scale
  • custom animation:
    [{{..}, {..}, optional: function(now, fx)}]
duration Defines the duration of all animations Slow Fast, slow, amount of ms
delay The delay of the image loading in ms 0ms amount of ms
priority Loads pictures in a certain order 0 all numbers >= 0
showLoading Defines whether a loading animation should be displayed or not true true, false
loadingClass The class of the surrounding loading animation postify-loading custom class name
loadingElements When your loading animation needs more items they can be added here <div></div><div></div><div></div><div></div> custom html string
adjustSize How should the postloaded image adjust the size itself or the size of the containing element. parent: adjust the size of the parent so it matches the size of the image. cover: Scale the image, that it fills the parent. childHeight: Force the child to adjust its height by parent. childWidth: Force the child to adjust its width by parent. auto: choose automaticly how to adjust the size of the image that it fits the parent. parent parent, cover, childHeight, childWidth, auto

Functional Tests