1 ---

     2 title: Right to left

     3 layout: default

     4 category: tests

     5 body_class: demos

     6 ---

     7 

     8 <style>

     9   #content { direction: rtl; }

    10   

    11   #options li { float: right; }

    12 

    13   .isotope .isotope-item {

    14     -webkit-transition-property: right, top, -webkit-transform, opacity;

    15        -moz-transition-property: right, top, -moz-transform, opacity;

    16         -ms-transition-property: right, top, -ms-transform, opacity;

    17          -o-transition-property: right, top, -o-transform, opacity;

    18             transition-property: right, top, transform, opacity;

    19   }

    20 </style>

    21 

    22 <section id="copy">

    23   <p>Isotope can support right-to-left layouts for languages like Hebrew and Arabic. See docs: <a href="../docs/help.html#righttoleft_layouts">Help - Right to left layouts</a>.</p>

    24 </section>

    25 

    26 <section id="options" class="clearfix">

    27 

    28   {% include filter-buttons.html %}

    29 

    30   {% include sort-buttons.html %}

    31 

    32   {% include layout-options.html %}

    33 

    34   <h3>Etc</h3>

    35 

    36   <ul id="etc" class="clearfix">

    37     <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>

    38     <li id="insert"><a href="#insert">Insert new elements</a></li>

    39     <li id="append"><a href='#append'>Append new elements</a></li>

    40     <li id="shuffle"><a href='#shuffle'>Shuffle</a></li>

    41   </ul>

    42 

    43 </section> <!-- #options -->

    44 

    45 

    46 <div id="container" class="clickable clearfix">

    47   {% for elem_number in site.best_of_order %}

    48     {% assign element = site.elements[elem_number] %}

    49     {% include element-partial.html %}

    50   {% endfor %}

    51 </div>

    52 

    53 

    54 <script src="../{{ site.jquery_js }}"></script>

    55 <script src="../{{ site.isotope_js }}"></script>

    56 <script src="../js/fake-element.js"></script>

    57 <script>

    58   $.Isotope.prototype._positionAbs = function( x, y ) {

    59     return { right: x, top: y };

    60   };

    61 

    62   $(function(){

    63     

    64     var $container = $('#container');

    65 

    66     {% include random-sizes.js %}

    67 

    68     $container.isotope({

    69       itemSelector : '.element',

    70       transformsEnabled: false,

    71       masonry : {

    72         columnWidth : 120

    73       },

    74       masonryHorizontal : {

    75         rowHeight: 120

    76       },

    77       cellsByRow : {

    78         columnWidth : 240,

    79         rowHeight : 240

    80       },

    81       cellsByColumn : {

    82         columnWidth : 240,

    83         rowHeight : 240

    84       },

    85       getSortData : {

    86         symbol : function( $elem ) {

    87           return $elem.attr('data-symbol');

    88         },

    89         category : function( $elem ) {

    90           return $elem.attr('data-category');

    91         },

    92         number : function( $elem ) {

    93           return parseInt( $elem.find('.number').text(), 10 );

    94         },

    95         weight : function( $elem ) {

    96           return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );

    97         },

    98         name : function ( $elem ) {

    99           return $elem.find('.name').text();

   100         }

   101       }

   102     });

   103     

   104     var $optionSets = $('#options .option-set'),

   105         $optionLinks = $optionSets.find('a');

   106 

   107     $optionLinks.click(function(){

   108       var $this = $(this);

   109       // don't proceed if already selected

   110       if ( $this.hasClass('selected') ) {

   111         return false;

   112       }

   113       var $optionSet = $this.parents('.option-set');

   114       $optionSet.find('.selected').removeClass('selected');

   115       $this.addClass('selected');

   116 

   117       // make option object dynamically, i.e. { filter: '.my-filter-class' }

   118       var options = {},

   119           key = $optionSet.attr('data-option-key'),

   120           value = $this.attr('data-option-value');

   121       // parse 'false' as false boolean

   122       value = value === 'false' ? false : value;

   123       options[ key ] = value;

   124 

   125       if ( key === 'layoutMode' && changeLayoutMode ) {

   126         // changes in layout modes need extra logic

   127         changeLayoutMode( $this, options )

   128       } else {

   129         // otherwise, apply new options

   130         $container.isotope( options );

   131       }

   132 

   133       return false;

   134     });

   135 

   136     {% include layout-change.js %}

   137     

   138     {% include change-sizes.js %}

   139 

   140     {% include add-buttons.js %}

   141 

   142     var $sortBy = $('#sort-by');

   143     $('#shuffle a').click(function(){

   144       $container.isotope('shuffle');

   145       $sortBy.find('.selected').removeClass('selected');

   146       $sortBy.find('[data-option-value="random"]').addClass('selected');

   147       return false;

   148     });

   149 

   150   });

   151 </script>