同位体コントロールを使用してカードを拡大し、コレクションを再レイアウトしています。また、各タイルが拡大されたときに異なるコンテンツを表示したいと思います-拡大された各タイルは異なるグラフィック/コンテンツを表示します。私が使用している現在の例では、クラス (大) をタイルに関連付けているだけですが、別のコンテンツも表示したいと考えています。どんな助けにも感謝します。ありがとう。
JSFiddle: http://jsfiddle.net/DsnNX/
$(function(){
var $container = $('#container'),
$items = $('.item');
$container.isotope({
itemSelector: '.item',
layoutMode : 'fitColumns',
resizesContainer : false,
getSortData : {
fitOrder : function( $item ) {
var order,
index = $item.index();
if ( $item.hasClass('large') && index % 2 ) {
order = index + 1.5;
} else {
order = index;
}
return order;
}
},
sortBy : 'fitOrder'
});
$items.click(function(){
var $this = $(this);
// nothing to change if this already has large class
if ( $this.hasClass('large') ) {
return;
}
var $previousLargeItem = $items.filter('.large');
$previousLargeItem.removeClass('large');
$this.addClass('large');
$container
// update sort data on changed items
.isotope('updateSortData', $this )
.isotope('updateSortData', $previousLargeItem )
// trigger layout and sort
.isotope();
});
});