modifica in script jquary portfolio con filtraggio cliccando su immagini

asevenx

Utente Attivo
7 Nov 2009
312
0
16
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

Utente Attivo
28 Mar 2011
1.694
0
36
Ho fatto delle prove.
Allora sostituisci le due liste che hai con queste in demo.html:
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:
Codice:
$(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..
 
Discussioni simili
Autore Titolo Forum Risposte Data
Cosina Modifica script textarea jQuery 0
T [PHP] piccola modifica a script (non mio...) PHP 8
P Help! modifica script Javascript 11
A script modifica PHP 1
L Modifica di uno script in php PHP 1
F [Offro collaborazione][Gratuito] Modifica script PHP,jQuery,GD Library Offerte e Richieste di Lavoro e/o Collaborazione 0
C modifica script Regioni - Provincie - Comuni su Mr Webmaster jQuery 1
P Modifica totale dello script upload immagini PHP 1
Monital script per modifica css con tabella colori html PHP 6
asevenx script ultima modifica PHP 5
A Script che restituisce il file con data di modifica più recente di una directory PHP 15
D script per modifica di una tabella mysql PHP 3
L piccola modifica a script conto alla rovescia ... e fattibile? PHP 4
M Consiglio modifica script gallery Javascript 3
C Aiuto su modifica script Javascript 22
J Modifica script PHP 3
SolidSnake4 modifica script Javascript 0
U Modifica a script preconfezionato! PHP 10
S Modifica script [era: Vi Prego Aiutat....] Javascript 9
A Controllo browser e modifica script Javascript 2
L Modifica file upload in ASP Classic ASP 2
P modifica colore A Hover link website . WordPress 2
P Modifica con PHP di un node in una sitemap xml PHP 0
C Software modifica sitoweb in tempo reale WordPress 12
G Modifica immagine di sfondo attraverso un bottone PHP 18
L modifica dati. PHP 1
G modifica corretta funzione da eregi() a preg_match() PHP 3
R Modifica codice per l'upload di più file PHP 0
G Modifica testo Photoshop 3
felino Excel: popolare una cella con la data di modifica della riga a cui appartiene Windows e Software 3
felino [Wordpress] Modifica main color del template WordPress 8
M [PHP] Modifica account PHP 3
S [OFFRO] Creazione di programmi per la modifica automatizzata di testi Offerte e Richieste di Lavoro e/o Collaborazione 0
S [OFFRO] Rimozione o aggiunta di Password ai file PDF e opzionalmente loro modifica Offerte e Richieste di Lavoro e/o Collaborazione 2
F [PHP] modifica del body email con checked PHP 8
G Modifica da sito statico HTML a dinamico in Wordpress SEO e Posizionamento 1
M [PHP] Calcolare costi su modifica orari PHP 4
A [PHP] Modifica caratteri di una query Oracle SQL PHP 0
F modifica recensione google Discussioni Varie 2
C Photoshop CS 6 salvare una modifica Photoshop 0
L [PHP] Modifica in tabella ultimo id PHP 5
C Pagina fb notifica modifica post Social Media Marketing 1
Q Notice: Undefined index: codice in C:\xampp\htdocs\STAGE\calendario\modifica.php on line 10 PHP 8
C [Joomla] [HTML] Modifica codice per adattamento app Joomla 18
Daniele_Carrara [Javascript] Modifica input date Javascript 5
J modifica spooler di stampa per stampare in ordine di nome i files pdf Windows e Software 2
Emix [PHP] Ricerca e modifica su due tabelle PHP 26
M [PHP] Tabella datagrid con icona di modifica che cambia in base a parametro PHP 0
Andrea1981 [WordPress] [HTML] Help modifica credits nel footer.Tema Customizr. WordPress 5
K [Visual Basic] Stampa e modifica record non funziona più Visual Basic 0

Discussioni simili