psomaiya17
New Member
Like this guy posted here , I have the same question but my code is to big and I don't know what is happening because this is not working ....Here's the source link jQuery isotope centeringI want to use isotype because of some features\[code\] #container {width: 100%;height: auto;margin-top: 90px;margin-bottom: 52px;position: relative;vertical-align: middle;z-index: 0; } .element {box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6); margin-top: 5px;margin-left: 5px;margin-bottom: 0px;margin-right: 0px;position: absolute;opacity: 1;visibility: visible;z-index: 1; }<script type="text/javascript">$.Isotope.prototype._getCenteredMasonryColumns = function() {this.width = this.element.width();var parentWidth = this.element.parent().width();var colW = this.options.masonry && this.options.masonry.columnWidth || //i.e. options.masonry && options.masonry.columnWidththis.$filteredAtoms.outerWidth(true) || // or use the size of the first itemparentWidth; // if there's no items, use size of containervar cols = Math.floor(parentWidth / colW);cols = Math.max(cols, 1);this.masonry.cols = cols; // i.e. this.masonry.cols = ....this.masonry.columnWidth = colW; // i.e. this.masonry.columnWidth = ...};$.Isotope.prototype._masonryReset = function() {this.masonry = {}; // layout-specific propsthis._getCenteredMasonryColumns(); // FIXME shouldn't have to call this againvar i = this.masonry.cols;this.masonry.colYs = []; while (i--) { this.masonry.colYs.push(0);}};$.Isotope.prototype._masonryResizeChanged = function() {var prevColCount = this.masonry.cols;this._getCenteredMasonryColumns(); // get updated colCountreturn (this.masonry.cols !== prevColCount);};$.Isotope.prototype._masonryGetContainerSize = function() {var unusedCols = 0,i = this.masonry.cols; while (--i) { // count unused columns if (this.masonry.colYs !== 0) { break; } unusedCols++;}return { height: Math.max.apply(Math, this.masonry.colYs), width: (this.masonry.cols - unusedCols) * this.masonry.columnWidth // fit container to columns that have been used;};};</script><script type="text/javascript"> var tz = jQuery.noConflict(); var resizeTimer = null;jQuery(window).bind('load resize', function() { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout("tz_init("+"350)", 100);});var $container = tz('#container');$container.imagesLoaded( function(){ $container.isotope({ itemSelector : '.element', layoutMode: 'masonry', getSortData: { name: function( $elem ) { var name = $elem.find('.name'), itemText = name.length ? name : $elem; return itemText.text(); }, date: function($elem){ var number = $elem.hasClass('element') ? $elem.find('.create').text() : $elem.attr('data-date'); return number; } } }); tz_init(350);}); jQuery(document).ready(function(){ jQuery.callFunction("tz_init(358)"); });function loadPortfolio(){ var $optionSets = tz('#options .option-set'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(event){ event.preventDefault(); var $this = tz(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('.option-set'); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); // make option object dynamically, i.e. { filter: '.my-filter-class' } var options = {}, key = $optionSet.attr('data-option-key'), value = http://stackoverflow.com/questions/13754020/$this.attr('data-option-value'); // parse 'false' as false boolean value = http://stackoverflow.com/questions/13754020/value ==='false' ? false : value; options[ key ] = value; if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) { // changes in layout modes need extra logic changeLayoutMode( $this, options ) } else { // otherwise, apply new options $container.isotope( options ); } return false; });}// isotopeinit();loadPortfolio(); jQuery('#container > div.element > div.TzInner > div.TzPortfolioMedia').hoverdir(); </script>\[/code\]