Con questo tutorial vorrei condividere insieme a voi una video gallery molto semplice ma allo stesso tempo di grande impatto sfruttando il motore di YouTube e il plugin FancyBox di jQuery.
Per realizzare la videogallery è sufficiente incorporare all’interno della nostra pagina.html la libreria jQuery, il plugin jQuery FancyBox con relativo foglio di stile .css + immagini ed il gioco è fatto.
Come da suggerimento di un nostro carissimo lettore andiamo a proporre questo accattivante tutorial scaricabile gratuitamente contenente un menu a comparsa in JavaScript simil Flash che sfrutta il FrameWork MooTools per arricchire con un effetto alternativo il vostro sito Web/Blog.
Navigando in rete alla ricerca di una libreria Javascript OpenSource per realizzare grafici e analisi mi sono imbattuto in questo straordinario Framework che voglio condividere insieme a voi in quanto lo considero uno strumento molto utile ma soprattutto ben fatto.
Si chiama HighCharts, ed è una straordinaria libreria formata da tantissimi Grafici interattivi di ogni tipo, ben documentata, compatibile con tutti i browser (anche su dispositivi Mobile), scaricabile gratuitamente per uso personale e completamente personalizzabile per essere inserita all’interno del vostro sito Web/Blog o applicazione web.
I plugin jQuery, ormai arrivati ad un numero indefinito non finiscono mai di stupire in termini di versatilità e quantità in quanto l’utilizzo è davvero molto semplice anche per utenti meno esperti e la loro potenza sarà anche in grado, grazie anche all’imminente arrivo di HTML 5, di superare il grande colosso Adobe Flash che come sappiamo possiede il grosso limite dell’indicizzazione.
Oggi in particolare voglio presentare questo bellissimo tutorial scaricabile gratuitamente, jQuery Desaturate, che sfrutta le librerie jQuery e Pixastic, permettendo così di creare un effetto di desaturazione allo stato di hover o viceversa sulle immagini grazie all’oggetto “Canvas”.
Le API JavaScript di YouTube permettono di realizzare un potente player completamente personalizzato secondo le nostre esigenze usando controlli Javascript e una versione Chromeless del FlashPlayer incorporato. Inoltre, se inserita la libreria jQuery, possiamo creare un player con tutte le caratteristiche e funzionalità di un normale flash player con il vantaggio che dietro tutto questo sta il motore di youTube molto potente che ci risparmia moltissime ottimizzazioni come ad esempio il buffering, ma garantisce anche un server sicuro e stabile.
Le API di YouTube permettono anche di caricare e riprodurre diversi video con la possibilità di migliorare ulterioremente il Player con l’aggiunta di Playlist trasformandolo in una vera e propria videogallery personalizzata al 100%.
Si spiegava giusto giusto qualche giorno fa in un mio precedente post di come realizzare dei design innovativi con immagini di grande impatto a tutto schermo grazie al plugin jQuery fullscreen che proietta un immagine di sfondo a schermo intero la quale si adatta al 100% alla finestra del browser e ridimensionabile a qualsiasi risoluzione.
Ho ritenuto opportuno a questo punto, ricercare e successivamente personalizzare a mio gusto una galleria di immagini jQuery a schermo intero che si adatta alla finestra del browser più miniature con relativo slide a comparsa che segue il movimento del mouse in modo da creare un bello, e allo stesso tempo fluido, effetto simil Flash da condividere insieme a voi.
Grandi immagini di sfondo ad alto impatto emozionale sono un’ottima strategia alla quale ogni Web Designer non riuscirebbe a resistere, infatti, la scelta di un’immagine di forte impatto riesce a trasformare completamente l’aspetto di una pagina anche se composta da semplici elementi in quanto riempie completamente lo schermo permettendoci di realizzare un design innovativo che non siamo abituati a vedere.
jQuery.popeye 2.0 è un innovativo plugin jQuery in stile CSS3 che permette di creare delle bellissime slideshow di immagini ad espansione, infatti, inizialmente le immagini compaiono come delle semplici fotografie inserite all’interno di una pagina web, ma basta spostare il cursore del mouse sopra di esse per vedere il plugin in azione con un attento e raffinato utilizzo delle tecniche CSS3 mostrando la relativa descrizione della singola immagine più eventuale link e la possibilità di scorrere le fotografie con relativa funzione Zoom che sborda dal normale contenitore dando un impatto grafico mai visto prima.
