Filter Menü

[SandraB]

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:

<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">Work</li>
<li><a href="#filter" data-option-value="*" class="selected">All Projects</a></li>
<li><a href="#filter" data-option-value=".1">1</a></li>
<li><a href="#filter" data-option-value=".2">2</a></li>
<li><a href="#filter" data-option-value=".3">3</a></li>
</ul>
</nav>
<!-- End Filter -->
</div>

<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">

<!-- 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>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->

<!-- 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>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-02.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->

</ul>
</section>

</div>
</div>
</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 :)

 

[Tronjer]

Du verwendest hier scheinbar ein Plugin. Wenn du etwas verändern willst, musst du es entweder innerhalb des Plugins tun oder darauf verzichten und eigenständiges Script schreiben.

 

[SandraB]

also dann bringt der js code nix? ok schade...das einzige Plugin welches in Betracht käme wäre jquery.isotope.js bringt es was dir den Code hier zu posten, oder ist das eher hoffnungslos?
Danke schonmal

 

[Tronjer]

Das Plugin zu posten bringt wenig. Wenn überhaupt, dann müsste man innerhalb der Doku nach Ansätzen suchen oder sich einen Workaround überlegen. Aber es ist illusorisch, das ohne Hintergrundwissen und nur mittels Forenbeiträgen lösen zu wollen.