isotope right to left support

isotope can be modified to support right-to-left layouts for languages like Hebrew and Arabic.

See test: Right to left

WHAT I DID IS TO ADD THIS TO THE JQUERY CALLING THE ISOTOPE

isOriginLeft: false,

for example



function applyIso()
{
container.isotope({
layoutMode : '',
itemSelector : '.isotope-item',
transitionDuration: '0.6s',
isOriginLeft: false,
//transformsEnabled: false,
filter: "*"
}, function()

You’ll need to make the following changes:

  • Modify Isotope’s _positionAbs method
  • Set transformsEnabled: false in the Isotope options
  • Add CSS transition property styles for right/top

JavaScript for right-to-left support

/ modify Isotope's absolute position method
$.Isotope.prototype._positionAbs = function( x, y ) {
  return { right: x, top: y };
};

// initialize Isotope
$('#container').isotope({
  transformsEnabled: false
  // other options...
});

CSS for right-to-left support

.isotope .isotope-item {
  -webkit-transition-property: right, top, -webkit-transform, opacity;
     -moz-transition-property: right, top, -moz-transform, opacity;
      -ms-transition-property: right, top, -ms-transform, opacity;
       -o-transition-property: right, top, -o-transform, opacity;
          transition-property: right, top, transform, opacity;
}