Fw

Wordpress Creative Developer

Tutorial jQuery – Idea Originale Per un Portfolio

  • Tutorial Jquery
  • -

Appuntamento con i tutorial su jquery, dove si studiano tecniche per migliorare la user experience, cercando i metodi più efficaci e immediati per arrivare al contenuto desiderato.

Recentemente mi sono imbattuto nel sito di bluezoom dove ho visto una soluzione originale per il portfolio.

Tutorial jQuery Portfolio Originale

Infatti premendo sulle anteprime dei lavori si apre una finestra in stile lightbox con una gallery riguardante il lavoro aperto e una descrizione.

Vediamo quali tecniche si sono utilizzate per ottenere quanto descritto. Alla fine del tutorial puoi scaricare il sorgente che ho preparato per un esempio base da cui partire.

Passo 1. Scarica i sorgenti

Nel sito si sono combinati due script: nyromodal per le finestre stile lightbox e pikachoose per le sotto-gallery.

Passo 2. Prepariamo le gallery

Le varie gallery sono tutte impostate allo stesso modo e ognuna è salvata in una pagina separata. Le immagini vanno prima opportunamente scalate con Gimp.

Qui di seguito viene proposto la parte di codice più importante, per la realizzazione di una gallery.

Codice HTML (da mettere tra i tag body)


  

Titolo lavoro

Descrizione lavoro

Codice CSS

.foto-lavoro {float:left; margin:20px 0 0 20px;}
.description {float:left; margin-left: 10px; width:200px;}

Passo 3. Il porfolio

Ora bisogna creare la pagina del portfolio con le anteprime dei nostri lavori, che collegheremo alle singole pagine create precedentemente, tramite il plugin nyromodal.

Ecco il codice che si è utilizzato.

Codice HTML

Tra i tag head

	
	
	
	
	
	       

Tra i tag body (viene messo il codice per alcuni lavori, poi è sempre lo stesso)

  • Lavoro 1
  • Lavoro 2
  • Lavoro 3
  • Lavoro 4

Codice CSS

ul,li {margin:0; padding:0;}

img {border:none;}

#portfolio {margin-left:20px;}

#portfolio ul {list-style:none; margin:0;}
#portfolio ul li {float:left; width:160px; margin-right:20px;}

Come puoi vedere, bastano pochi semplici passi per ottenere un portfolio dal punto di vista grafico e dell’usabilità, di tutto rispetto.

E ora come promesso i sorgenti dove è stato creato un semplice esempio base da cui partire, per realizzare un portfolio simile a quello studiato nel tutorial.

Scarica il sorgente

Un consiglio: stuidati bene nyromodal e pikachoose che sono due ottimi plugin che meritano di essere approfonditi 😉

12 Commenti

  1. Ottimo tutorial Federico ed ottima anche accoppiata di plugin. Penso proprio di usarlo nel mio sito 😉

  2. Ciao Fede, ottima risorsa, avevo già visto questo sito e mi era piaciuto molto per la sua struttura, sto studiando molto bene jquery grazie ai tuoi tutorial, user experience is the best teacher!!! Grazie mille!

  3. Ottimo se applicherete questa risorsa nei vostri progetti segnalateli pure nei commenti 😉

  4. […] Login: si è scelto di utilizzare una finestra stile lightbox: nel caso di Mum Made è stato realizzato a manina, ma si esistono diversi plugin che consenstono di ottenere questo effetto, come nyromodal di cui se ne è parlato anche recentemente in un tutorial. […]

  5. Ottimo! attenzione però che il menu resta sopra la finestra. Togli la proprietà position: relative al menu e sei apposto!

  6. E lo so, ma quel css è compilato nel controllo Menu… prima o poi lo sostituisco con un menu css. Grazie!

  7. Ciao Fede, complimenti per tutti i tutorial e i suggerimenti che posti sul tuo blog. Sto integrando questa soluzione nel mio sito ma, come ho avuto modo di vedere anche sul link di GIUSEPPE M., la galleria fa le bizze con IE7. Praticamente la finestra del portfolio si apre in dimensioni più piccole rispetto all’immagine e i thumb che contiene.
    E’ un pò che smanetto ma non riesco a far aprire questa benedetta pagina nel modo corretto.
    C’è un modo per risolvere il bug? O chiedo agli utenti di buttare IE7 visto che sull’8 pare funzionare a dovere? (so che non si fa, perchè tutti dovrebbero avere l’opportunità di vedere i contenuti di un sito, però…)

    thanx

  8. ciao fede… questo tutorial mi piace molto… ci sto lavorando su per inserirlo in un mio progetto… però vorrei che la finesta che contiene le immagini della gallery fosse più grande… non riesco a capire dove mettere le mani per lavorare sui css… potresti darmi qualche aiuto???

  9. Credo di aver risolto!!!! grazie mille!!! mi piace molto il tuo blog!!!! soprattutto questa rubrica

  10. Ciao Fede,
    anche io ho lo stesso problema di Daniele su IE7, si può risolvere in qualche modo?
    Ho provato anche ad aggiornarlo alla versione più recente del plug-in ma nulla è cambiato..

    Ciao e grazie!

  11. Ciao Fede, io ho un problema con questo script… l’ho utilizzato per un progetto, ma mi rimane un quafratino nero quando cambiano le immagini… come posso risolvere???

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *