A translation glitch when the img element have border style apply to it.

[kentliau]

To try it, apply border: 20px solid rgba(255,0,0,.2) to the <img> element, try it directly in devtools will do, you will see the closing animation glitch

I recorded a screenie, please wait for a while ,it is 3.5MB

https://cloud.githubusercontent.com/assets/1708463/3054784/c5820932-e1ba-11e3-9332-861fc18e06fd.gif

I simply fix it by

start from line 131

// Resize and position ghost element
$ghost.css({
  width: $img.width(),
  height: $img.height(),
  top: $img.offset().top - $wrap.offset().top + parseInt($img.css('borderTopWidth')), // it will be the computed value, em/% will become px
  left: $img.offset().left - $wrap.offset().left + parseInt($img.css('borderLeftWidth')),
});

[kentliau]

if you want a pull request from me, please tell me.

[terrymun]

I am a bit ambivalent about implementing this fix. This only enables partial support for extraneous dimensions added by padding and/or border — if you look into your modified page you will see that the enlarged image is no longer properly centered. So this all boils down to an all or none support for additional widths and paddings applied to the images, the former of which I feel is tricky to implement, and unnecessarily bloating; the latter of which I feel might limit the extensibility and applicability of Fluidbox.

I am looking into implementing support for paddings and borders. Stay tuned.

[Update] This feature is implemented in the v1.3.2 release.