modifica in script jquary portfolio con filtraggio cliccando su immagini

[asevenx]

Salve, ho scaricato questo script dal sito html.it. Dall'anteprima si vede che cliccando sul menu in alto (l'elenco "filter") le immagini vengono filtrate e selezionate secondo le categorie. Io vorrei ottenere lo stesso effetto anche cliccando sulle immagini iniziali. Ovvero, la selezione iniziale non deve raccogliere tutte le immagini, ma solo alcune. Queste, cliccandoci sopra, portano ad altre immagini.

In poche parole vorrei un filtraggio a livelli, es:

immagini iniziali
IMG1 - IMG2 - IMG3
IMG4 - IMG5 - IMG6

immagini che appaiono dopo aver cliccato su IMG1
IMG7 - IMG8 - IMG9

immagini che appaiono dopo aver cliccato su IMG2
IMG10 - IMG11 - IMG12

e così via...
spero di aver reso l'idea, non so se si può fare, o se c'è uno script che permette questa cosa, qualcuno sa aiutarmi? grazie a tutti

 

[Longo8]

Ho fatto delle prove.
Allora sostituisci le due liste che hai con queste in demo.html:

<div id="container">
	<ul id="filter">
		<li><a href="#"><img src="http://forum.mrwebmaster.it/images/a-list-apart.png" alt="" height="115" width="200" /><br>CMS</a></li>
		<li><a href="#"><img src="http://forum.mrwebmaster.it/images/netflix.png" alt="" height="115" width="200" /><br>Design</a></li>
	</ul>

	<ul id="portfolio">
		<li class="cms"><a href="#"><img src="http://forum.mrwebmaster.it/images/a-list-apart.png" alt="" height="115" width="200" />A List Apart</a></li>
		<li class="cms"><a href="#"><img src="http://forum.mrwebmaster.it/images/apple.png" alt="" height="115" width="200" />Apple</a></li>
		<li class="cms"><a href="#"><img src="http://forum.mrwebmaster.it/images/cnn.png" alt="" height="115" width="200" />CNN</a></li>
		<li class="design"><a href="#"><img src="http://forum.mrwebmaster.it/images/digg.png" alt="" height="115" width="200" />Digg</a></li>
		<li class="design"><a href="#"><img src="http://forum.mrwebmaster.it/images/espn.png" alt="" height="115" width="200" />ESPN</a></li>
		<li class="design"><a href="#"><img src="http://forum.mrwebmaster.it/images/facebook.png" alt="" height="115" width="200" />Facebook</a></li>
	</ul>
</div>

E il codice jquery contenuto nel file framwork.js lo dovresti modificare in questo modo:

$(document).ready(function() {
	$('ul#portfolio').css('display','none');
	$('ul#filter a').click(function() {
		$('ul#filter').css('display','none');
		var filterVal = $(this).text().toLowerCase().replace(' ','-');
		$('ul#portfolio li').each(function() {
			if($(this).hasClass(filterVal)){
				$('ul#portfolio').css('display','block');
				$(this).css('display','block');
			}else{
				$(this).css('display','none');			
			}
		});
		return false;
	});
});

Fammi sapere..