Breite / Dachrinnen ändern?
-
09-12-2019 - |
Frage
Ich versuche, eine Miniaturbildgalerie mit Zeilen mit 3 Elementen zu erstellen, und ich kann die Breite (192 Pixel) oder die Rinnen (10 Pixel) der Elemente nicht steuern.Hier ist mein Code
<script>
$(function(){
var $container = $('.isosort'),
filters = {};
$container.isotope({
layoutMode : 'fitRows',
animationEngine : 'best-available',
masonry: {
columnWidth: 192,
gutterWidth: 10
}
});
// filter buttons
$('#options li ul li a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// store filter value in object
// i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
});
</script>
Lösung
Mein Verständnis ist, dass Sie, um die Mauerwerksoptionen zu verwenden, wählen müssen "masonry
" als Ihr layoutMode
.
Andere Tipps
Ich habe gerade eine mögliche Lösung für dieses Problem hinzugefügt unter: https://stackoverflow.com/a/18199423/2676928
Es ist möglich, Teile von Isotope auszudehnen.Der Fitrows-Code ist vergleichsweise einfach und ich fügte ein paar Zeilen hinzu, die es dabei gemacht haben, Dachrinnen und Spaltenbreiteneinstellungen zu unterstützen.
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow