Fedeweb » Javascript

jQuery Plugin Responsive Slideshow – Camera

fedeweb — Wed, 28 Mar 2012 07:50:46 +0000

Camera è un plugin jQuery ideato per realizzare uno slideshow responsive.

Questo slideshow è fra i più completi e originali che sono stati segnalati in questo blog, e caratteristica oggi molto importante, è responsive.

Infatti Camera mette a disposizione numerosi parametri per personalizzarlo, tra cui più di 20 effetti di transizione tra cui scegliere.

Potrai creare slide non solo di foto, ma di qualsiasi elemento HTML come testi o video e potrai navigare tra i vari elementi sfruttando i bullet o le frecce, rendendolo quindi altamente usabile.

Se hai un sito sviluppato in WordPress, ti consiglio di scaricare il plugin per integrarlo al meglio.

Al momento Camera ha problemi di compatibilità con Internet Explorer 7 e 8

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

jQuery Plugin Effetto Hover Sulle Immagini – Adipoli

fedeweb — Mon, 19 Mar 2012 08:51:15 +0000

Adipoli è un plugin jQuery che ti permetterà di ottenere degli effetti di hover sulle immagini molto originali.

Con Adipoli potrai ottenere più di 20 diversi effetti di hover, che puoi vedere all’opera nella demo.

Integrarlo nel tuo sito sarà in gioco da ragazzi: ti basterà richiamare gli script necessari e applicare gli effetti alle alle immagini che desideri. Ti invito comunque a leggere la documentazione.

Ho testato il plugin personalmente su Internet Explorer 7 e 8 e quasi tutti gli effetti funzionano egregiamente, quindi puoi utilizzarlo tranquillamente senza problemi di compatibilità.

Una nuova tecnica per regalare una User Experience piacevole per l’utente finale

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

jQuery Plugin – Page Scroller

fedeweb — Wed, 15 Feb 2012 08:49:58 +0000

Page Scroller è il miglior plugin jQuery per realizzare una navigazione verticale animata, facile da utilizzare e con diverse personalizzazioni disponibili.

Perchè il migliore?

Vediamo perchè questo plugin è il migliore per realizzare una navigazione verticale animata nel sito.

Facilità di utilizzo.

Ti basterà definire le varie sezioni:

Contenuto sezione

, che dovranno poi essere inglobate in un div main.

A quel punto, dopo aver richiamato gli script necessari, dovrai applicare page scroller al div main.

$(document).ready(function(){ $('#main').pageScroller(); });

Ti invito comunque a leggere la documentazione completa.

Personalizzazione.

Il plugin permette diverse personalizzazioni:

inserimento di un box di navigazione posizionabile a sinistra o a destra del contenuto
barra di navigazione sempre visibile,
inserimento di freccie di navigazione.

Inoltre viene sempre evidenziata nel menu la sezione in cui ci si trova.

Il plugin è in fase beta, infatti è supportato da Internet Explorer 9 in poi, mentre gli altri browser non ci sono problemi di funzionalità.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

jQuery Plugin – Slideshow Full Screen di Immagini

fedeweb — Mon, 16 Jan 2012 07:57:04 +0000

Oggi vediamo a mio avviso il miglior plugin jquery per realizzare uno slideshow full screen da utilizzare come sfondo nel sito.

Si tratta di Vegas, realizzato da Jay Salvat, che ti permetterà di realizzare in pochi passi uno slideshow di impatto e con caratteristiche che altri slider non hanno.

Come puoi vedere dalla demo, le immagini si adattano perfettamente alla finestra del browser e potrai impostare facilmente un pattern, che verrà messo sopra l’immagine.

Per utilizzarlo al meglio, ti invito a leggere la documentazione, dalla quale potrai notare che basteranno pochissimi passi per utilizzare il plugin. Per qualsiasi problema non esitare a scrivermi nei commenti

In passato, sempre in questo blog, è stato proposto un tutorial jquery su come realizzare uno slideshow di immagini come sfondo del sito.

Tutorial Jquery – Slideshow Di Foto Come Sfondo Del Sito

Inoltre ti segnalo un articolo dedicato alla User Experience, dove si parla proprio dell’uso delle immagini e dei video come sfondo nei siti web.

User Experience: Immagini (Video) ed Emozioni

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

jQuery Plugin Scrollorama – Effetti di Scrolling Originali

fedeweb — Mon, 09 Jan 2012 07:30:01 +0000

Scrollorama è un plugin jQuery che ti permetterà di realizzare delle animazioni durante lo scrolling del sito.

Effetti di parallasse, zoom, rotazioni, fade verranno applicati durante lo scrolling verticale del sito agli elementi che desideri.

Per ottenere questi effetti bastano pochi semplici passi, che ti invito ad analizzare nel sito ufficiale dove potrai scaricare l’esempio e accedere alla documentazione

Questo plugin lo trovo particolarmente indicato per siti a una pagina con navigazione verticale animata, come puoi vedere in questi quattro esempi.

Smokey Bones

Anna Safroncik

Nike Better World

Shop Pub

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Galleria di Foto Piena Di Effetti – jQuery Plugin Smart Gallery

fedeweb — Thu, 01 Dec 2011 08:10:44 +0000

Smart Gallery è un plugin jQuery che permette di realizzare una galleria di immagini originale, in pochi passi.

Il punto di forza di questa gallery è il numero di effetti di transizione che puoi utilizzare tra una foto e l’altra, come puoi vedere dalla demo.

Inoltre si potrà navigare tra le foto tramite le miniature, rendendo quindi la galleria completa e funzionale.

Il funzionamento è davvero semplice e ti consiglio di leggere la pagina del plugin per capire come utilizzarla.

Altre gallery che potrebbero esserti utili:

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

jQuery Plugin FerroSlider – Slider di Contenuti Full Screen

fedeweb — Mon, 14 Nov 2011 08:00:18 +0000

FerroSlider è un plugin jQuery che ti pemetterà di realizzare una navigazione animata in orizzontale e in verticale, realizzato da Alessandro Ferrini.

Guardalo in azione nel sito di Francesco Mugnai.

Come puoi vedere questo plugin riesce a dare imprevedibilità al sito, potendo scegliere una classica navigazione tra le pagine orizzontale o verticale, oppure mettendole insieme in un “percorso” personalizzato.

Potrai navigare tra le diverse sezioni anche utilizzando la tastiera, e inoltre è supportato dai dispositivi mobili iOS e Android, potendo con una gesture passare da una pagina all’altra del sito.

L’utilizzo del plugin è davvero semplice, almeno per le funzionalità base, e trovi tutto spiegato nei dettagli nella pagina di documentazione.

Ti invito a scaricare e provare FerroSlider, una nuova tecnica, utile per distinguerti dalla massa e dare quel valore aggiunto al tuo sito

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Ordinare, Cercare, Filtrare Elementi in Una Lista HTML – List.js

fedeweb — Wed, 02 Nov 2011 08:38:17 +0000

List.js è una libreria javascript che ti permetterà di manipolare delle liste HTML.

Potra infatti ordinare le liste, fare una ricerca, filtrare gli elementi in base a un criterio, eliminarli, come puoi vedere in questo esempio.

La libreria è di facile utilizzo, grazie anche all’ampia documentazione che ti spiegherà come usare list.js al meglio.

La ritengo una risorsa estremamente utile, per organizzare al meglio i contenuti e dare la possibilità all’utente di trovare più facilmente quello che gli serve.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

FlexSlider – Slider Reattivo in jQuery

fedeweb — Tue, 25 Oct 2011 07:33:26 +0000

FlexSlider è un plugin jQuery che ti permetterà di realizzare uno slider di immagini reattivo al ridimensionamento della finestra del browser.

Con la diffusione sempre più consistente degli smartphone e quindi della navigazione web su mobile, è importante realizzare dei siti web responsive, che si adattino alle diverse risoluzioni.

E uno degli elementi che dovrà adattarsi è proprio lo slider e quindi ecco che ci viene incontro flexslider, plugin facilissimo da integrare nel tuo sito.

Come spiegato nella documentazione, potrai personalizzare lo slideshow come preferisci, agendo su diversi parametri.

Inoltre FlexSlider è supportato da tutti i browser e potrai inserire non solo immagini ma qualsiasi contenuto html.

Ti consiglio di scaricarlo e provarlo: è importante iniziare a sperimentare e provare a creare layout responsive e questo plugin potrebbe essere un inizio per scoprire questo nuovo modo di realizzare siti.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Skitter – Slideshow jQuery con 30 Diverse Animazioni (Anche Per WordPress)

fedeweb — Wed, 12 Oct 2011 07:00:26 +0000

In questo blog si è parlato spesso di slideshow jQuery, proponendo diversi tutorial e soluzioni per questo elemento sempre più presente nei siti. Proprio perchè è sempre più diffuso, bisogna sapersi distinguere e trovare sempre qualcosa di nuovo.

E quindi oggi voglio condividere con te Skitter un plugin jQuery che ti permetterà di realizzare slideshow con 30 animazioni diverse.

Questo plugin ha diverse possibilità di personalizzazione, come il tipo di animazione tra un’immagine e l’altra, la navigazione tra le diverse foto se renderla numerica, oppure avere le miniature o ancora i pallini.

E’ stata creata anche la versione per WordPress, dove potrai integrare lo slideshow, presentando delle foto presenti nella libreria Media, oppure i post.

Skitter è compatibile con tutti i browser, quindi potrai utilizzarlo senza problemi per i tuoi progetti.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!