Hallo,
benutze ein Template und komme an einer Stelle nicht mehr weiter.
Das Template beinhaltet einen Filter welcher die nicht benötigten Elemente ausblendet. Einerseits eine super Sache und alles schaut auch gut aus, nur möchte ich wenn ich auf „All Projects“ klicke nicht wirklich alle Elemente zeigen sondern welche ausgeblendet lassen. Die sollen nur dann erscheinen wenn ich das dementsprechende Menü auswähle.
HTML:
- Work
- [B]All Projects[/B]
- 1
- 2
- 3
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 1">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg">
<span class="overlay-img"></span>
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 2">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Office" href="_include/img/work/full/image-02-full.jpg">
<span class="overlay-img"></span>
</div>
JS:
BRUSHED.filter = function (){
if($(‚#projects‘).length > 0){
var $container = $(‚#projects‘);
$container.imagesLoaded(function() {
$container.isotope({
// options
animationEngine: 'best-available',
itemSelector : '.item-thumbs',
layoutMode : 'fitRows'
});
});
// filter items when filter link is clicked
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(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 = $this.attr('data-option-value');
// parse 'false' as false boolean
value = 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;
});
}
}
Bin wie immer über jede Hilfe dankbar 