portfoliofilter instellen

[rphl33]

Ik heb een portfolio met daarin de mogelijkheid om op categorie te selecteren.
Eén van de categoriën is "ALL", die dus.. alle categoriën in één keer laat zien zodra de pagina wordt geopened. Dat is precies wat ik niet wil.
Wat ik wil is dat er direct een 'subcategorie' geopend wordt zodra de pagina wordt geopend.
Mijn kennis van javascript is nihil dus ik zal zoveel mogelijk informatie geven.
Voor als onderstaande code niet duidelijk genoeg is heb ik hier het bestand staan: http://speedy.sh/wgFv6/portfoliofilter.rar

<script type="text/javascript">
	$(function () {
		var filterList = {
			init: function () {
				// MixItUp plugin
				// http://mixitup.io
				$('#portfoliolist').mixitup({
					targetSelector: '.portfolio',
					filterSelector: '.filter',
					
					effects: ['fade'],
					easing: 'snap',
					// call the hover effect
					onMixEnd: filterList.hoverEffect()
				});				
			},
			hoverEffect: function () {
			// Simple parallax effect
				$('#portfoliolist .portfolio').hover(
					function () {
						$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
						$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
					},
					function () {
						$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
						$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
					}		
				);	
			}
		};
		// Run the show!
		filterList.init();	
	});

De filterknoppen:

<ul id="filters" class="clearfix">
			<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
			<li><span class="filter" data-filter="app">App</span></li>
			<li><span class="filter" data-filter="card">Card</span></li>
			<li><span class="filter" data-filter="icon">Icon</span></li>
			<li><span class="filter" data-filter="logo">Logo</span></li>
			<li><span class="filter" data-filter="web">Web</span></li>
</ul>

Een afbeelding (in dit geval dus de "app" categorie")

<div id="portfoliolist">
            <div class="portfolio app" data-cat="logo">
             	<div class="portfolio-wrapper">		       
                     <a href="img/groot.jpg" title="Titel van project" data-gallery><img src="img/thumb.jpg" alt=""></a>
                 </div>
            </div>
</div>

 

[Tha Devil]

Van je filterknoppen dit maken lijkt mij voldoende:

<ul id="filters" class="clearfix">
            <li><span class="filter active" data-filter="app">App</span></li>
            <li><span class="filter" data-filter="card">Card</span></li>
            <li><span class="filter" data-filter="icon">Icon</span></li>
            <li><span class="filter" data-filter="logo">Logo</span></li>
            <li><span class="filter" data-filter="web">Web</span></li>
</ul>

 

[rphl33]

Dat was ook mijn eerste gedachte, maar dan is alleen de All knop weg.
De javascript daarentegen blijft wel gewoon alle categorieën in één keer oproepen zodra de pagina geladen wordt.
Ergens in de javascript moet dus worden aangegeven dat er maar één categorie wordt opgeroepen bij het laden van de pagina...

 

[Tha Devil]

Als ik de documentatie zo bekijken is er een load methode die bij het initialiseren te gebruiken is:

Define which target elements to show on load. All target elements are shown by default.

Consistent with the filter API method, and jQuery’s .filter() method, this property accepts a selector string or jQuery object.

The values ‘all’ and ‘none’ are also valid.

[js]init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',

effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
// Load one filter
load: {
filter: '.app'
}
});
},[/js]

Als dat niet werkt gebruik je vermoedelijk niet versie 2 van de plugin

 

[rphl33]

De verkeerde versie was dus het probleem.. Hij doet het nu!
Dankjewel!