1 ---

     2 title: Masonry corner stamp

     3 layout: default

     4 category: custom-layout-modes

     5 ---

     6 

     7 <style>

     8   .corner-stamp {

     9     width: 280px;

    10     height: 340px;

    11     padding: 10px;

    12     margin: 10px;

    13     float: right;

    14     background: red;

    15     color: white;

    16     -webkit-border-radius: 5px;

    17        -moz-border-radius: 5px;

    18             border-radius: 5px;

    19   }

    20 </style>

    21 

    22 <section id="copy">

    23   <p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> for corner stamp. An element can be "stamped" in the right top corner.</p>

    24   <p>Set <code>cornerStampSelector</code> within <code>masonry</code> options. <code>itemSelector</code> needs to be set as well.</p>

    25 

    26 {% highlight javascript %}

    27 

    28 $('#container').isotope({

    29   itemSelector: '.item',

    30   masonry: {

    31     columnWidth: 120,

    32     cornerStampSelector: '.corner-stamp'

    33   }

    34 });

    35 

    36 {% endhighlight %}

    37 

    38 </section>

    39 

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

    41 

    42   {% include filter-buttons.html %}

    43 

    44   {% include sort-buttons.html %}

    45 

    46   <h3>Etc</h3>

    47 

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

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

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

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

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

    53   </ul>

    54 

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

    56 

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

    58 

    59   <div class="corner-stamp">corner stamp here.</div>

    60   

    61   {% for elem_number in site.best_of_order %}

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

    63     {% include element-partial.html %}

    64   {% endfor %}

    65 </div> <!-- #container -->

    66 

    67 

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

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

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

    71 <script>

    72 

    73   $.Isotope.prototype._masonryResizeChanged = function() {

    74     return true;

    75   };

    76 

    77   $.Isotope.prototype._masonryReset = function() {

    78     // layout-specific props

    79     this.masonry = {};

    80     this._getSegments();

    81     var i = this.masonry.cols;

    82     this.masonry.colYs = [];

    83     while (i--) {

    84       this.masonry.colYs.push( 0 );

    85     }

    86   

    87     if ( this.options.masonry.cornerStampSelector ) {

    88       var $cornerStamp = this.element.find( this.options.masonry.cornerStampSelector ),

    89           stampWidth = $cornerStamp.outerWidth(true) - ( this.element.width() % this.masonry.columnWidth ),

    90           cornerCols = Math.ceil( stampWidth / this.masonry.columnWidth ),

    91           cornerStampHeight = $cornerStamp.outerHeight(true);

    92       for ( i = Math.max( this.masonry.cols - cornerCols, cornerCols ); i < this.masonry.cols; i++ ) {

    93         this.masonry.colYs[i] = cornerStampHeight;

    94       }

    95     }

    96   };

    97 

    98 

    99   $(function(){

   100     

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

   102     

   103     {% include random-sizes.js %}

   104     

   105     $container.isotope({

   106       itemSelector : '.element',

   107       masonry : {

   108         columnWidth : 120,

   109         cornerStampSelector: '.corner-stamp'

   110       },

   111       getSortData : {

   112         symbol : function( $elem ) {

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

   114         },

   115         category : function( $elem ) {

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

   117         },

   118         number : function( $elem ) {

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

   120         },

   121         weight : function( $elem ) {

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

   123         },

   124         name : function ( $elem ) {

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

   126         }

   127       }

   128     });

   129       

   130     {% include option-set-buttons.js %}

   131 

   132     {% include add-buttons.js %}

   133 

   134     {% include change-sizes.js %}

   135 

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

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

   138       $container.isotope('shuffle');

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

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

   141       return false;

   142     });

   143     

   144   });

   145 </script>