jQuery Slider – Collection
Gli slider jQuery sono ottimi quando dobbiamo visualizzare contenuti web in modo accattivante. Di seguito una raccolta di tutorial, effetti e tecniche dei migliori script jQuery Slider.
In questo tutorial viene spiegato come creare una galleria di immagini in stile Polaroid. Avremo album che si espandono in set di anteprime a ventaglio che si apriranno al passaggio del mouse. L’immagine intera scivolerà dal basso verso l’alto quando una delle anteprime verrà cliccata. Nella visuale a immagine intera, l’utente potrà navigare tra le foto o semplicemente scegliere un’altra anteprima da visualizzare in primo piano. Per questa galleria, viene usato il plugin 2D Transform per implementare le animazioni.
Non serve che mi dilunghi sull’utilità di un menù ben realizzato e facilmente fruibile, quindi, vi rinvio direttamente al tutorial che segue, utile guida nella realizzazione di un menù a scorrimento facendo uso di JQuery.
Come creare una galleria di immagini in slideshow a tutto schermo come sfondo, utilizzando la libreria jQuery tramite Supersizied, l’applicazione JavaScript di Build Internet.
Il programma è sotto licenza GPL ed è scaricabile gratuitamente da internet, anche se gradita sarebbe una donazione.
L’applicazione permette diversi tipi di transizione tra le immagini e si ha la possibilità di scegliere i tempi per il cambiamento dell’immagine e della velocità della transizione.
Ultima delle funzionalità e novità dell’ultima versione è il supporto per Flickr.
Tutorial jQuery che vi mostrerà come creare un menù con immagini di sfondo a scorrimento. Si sa infatti che quando si progetta un sito web anche l’occhio vuole la sua parte e questa è sicuramente una soluzione da prendere in considerazione.
20 esempi di slideshows creativi e interessanti da cui prendere ispirazione.
Molto carino l’effetto di questo menu in jQuery, ottimo anche per risparmiare spazio, in quanto risulta in parte nascosto e semi-trasparente, apparendo solo tramite il passaggio del mouse.
Con questo tipo di menu, però, l’usabilità del sito viene meno.
Gli slider jQuery per creare gallerie fotografiche sono sempre più utilizzati.
Nel sito trovate una ventina d’esempi da scaricare e riutilizzare, ma se non bastasse, viene anche spiegato come sono stati realizzati, per poterli ricreare o personalizzare in base alle proprie esigenze.
Chop Slider è fornito con 152 effetti di transizione predefiniti e pronti subito all’uso. La Transitions library si compone di: 105 2D transitions (i più comuni, che lavorano perfettamente su tutti i ibrowser ad eccezione di IE), 37 3D transitions (in esclusiva per i browser più moderni. Attualmente lavorano bene solo su Chrome e Safari), 5 “no CSS” transitions (per i browser che non supportano CSS3 come IE9) e 5 “mobile” transitions (pensati per i broswer mobile).
Flux Slider, lavorando in coppia con il plugin jQuery Nivo Slider (composto solo da Javascript e CSS), produrrà delle transizioni di immagini senza dover ricorrere al classico timer Javascript. Questo è possibile dal momento che Flux Slider sfrutta le potenzialità e la semplicità maggiori delle animazioni CSS3. Flux Slider è compatibile con ogni tipo di browser che supporti le caratteristiche di transizione CSS3.
Vi sarà capitato spesso di chiedervi, dovendo inserire qualche prodotto sul vostro sito web, come poter fare per dare una bella visuale di questi prodotti. Lo script di questo tutorial vi aiuterà fornendo un utile modo di presentazione dei vostri prodotti. Tramite un click il prodotto selezionato verrà ingrandito e affiancato da una didascalia; cliccando su un altro prodotto il primo tornerà in secondo piano e l’altro verrà ingrandito e così via.
In questo tutorial apprenderete come creare uno slideshow a tutto schermo per una serie di foto di New York.
Con HTML5 implementerete poi una canzone per ricreare l’ambiente newyorkese.
Vi verranno forniti i codici HTML e i CSS e le librerie JavaScript.
Il tutorial che vi presentiamo oggi vi guiderà nella creazione di una galleria di immagini utilizzando Canvas e jQuery.
Per chi non lo sapesse Canvas e un nuovo elemento messo a disposizione da HTML5.
Uno sguardo al tutorial è fortemente consigliato anche se il risultato finale non interessa in quanto fa comunque uso di uno nuova funzionalità di HTML5 che può sempre tornare utile.
Il seguente tutorial è rivolto a chi cerca un metodo semplice ma efficace per imparare ad utilizzare il cosidetto “toggle effect”, ossia il classico effetto che espande le descrizioni delle voci dei menù tramite i tasti + e -
In questo tutorial viene spiegata la creazione di un metodo di navigazione unico, usando riquadri scorrevoli. L’idea è quella di far scivolare una casella con gli elementi del menù e allo stesso tempo far comparire una piccola immagine. Verrà inoltre incluso un sottomenù con ulteriori link ad altri elementi di navigazione. Questo riquadro scivolerà a destra o sinistra, secondo quale elemento del menù si troverà sotto il puntatore del mouse.
Questo tutorial tratterà della creazione di una geniale galleria con uno slider delle anteprime. L’idea è quella di avere un’area di anteprima espandibile che si apre quando viene scelto un particolare album. L’anteprima scivolerà verso la fine e tornerà alla prima immagine. L’utente potrà scorrere le anteprime usando i controlli dello slider. Quando una di queste verrà cliccata, si sposterà al centro e si aprirà l’immagine a dimensione intera. Navigare tra le foto le farà scivolare ai lati dello schermo, muovendo il contenitore di anteprime sottostante. Quando infine l’immagine verrà chiusa, essa sfumerà nuovamente nella sua anteprima.
Ecco un tutorial per un brillante slider di immagini. Useremo il principio di parallasse (fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione) per muovere diversi sfondi quando si scorre su una immagine così da creare una piacevole prospettiva. Questo darà una stupenda sensazione di profondità all’intero slider quando è in azione.
Tutorial per creare un menu orizzontale che al passaggio del mouse genera un effetto slide, facendo scendere una linguetta sul testo selezionato. Si parte con le istruzioni in pohotoshop per realizzare la parte grafica, per poi passare al codice jQuery per la realizzazione dell’animazione.
Più di 45 plugin jQuery per visualizzare le immagini sulle vostre pagine web; alcuni plugin riguardano la creazione di slider, lo svilippo di gallery, oppure per interagire in modo dinamico ed efficace anche sulle singole immagini
Questo tutorial ci aiuterà a produrre una galleria immagini con jQuery in cui l’anteprima è costituita da una minifoto. L’idea è di far comparire la minifoto nell’area di anteprima passando con il mouse sui punti dello slider. Quando si clicca su questi punti poi, l’immagine intera scorrerà dalla sinistra o dalla destra, a seconda della foto correntemente aperta.
Gli slider jQuery servono a esporre i vostri contenuti in una maniera accattivante. Avrete forse notato in molti siti che gli articoli in evidenza vengono mostrati usando effetti di slittamento ottenuti con gli jQuery sliders.
L’uso degli Sliders è infatti uno dei metodi piu’ comuni per mostrare contenuti in modo unico e piacevole. Inoltre è il modo piu’ efficiente di far vedere ai vostri lettori ciò che potete fare. Di seguito script, plugin e tutorial per creare slider.
Visualizzatore di notizie che permette di mostrare gli ultimi articoli pubblicati.
La differenza fra altri slider di news è la dimensione ridotta che lo rende molto compatto.
Lo slider scrolla in verticale, visualizzando sul lato destro le anteprime e lasciando sul lato sinistro la lista delle notizie.
Questo tutorial vi spiegherà come creare un template per la navigazione delle immagini del portfolio realizzato con jQuery.
L’idea di base è di raggruppare alcuni oggetti portfolio e di navigare attraverso questi in 2D (orizzontalmente o verticalmente).
Verranno forniti come di consueto il codice HTML, CSS e le librerie Javascript necessari a realizzare il template.
Tutorial, basato su tecnologia JQuery, che permette di far ruotare i vostri contenuti con o senza funzione auto play.
Uno slider semplice e ben fatto, per mostrare i vostri contenuti, dalle notizie ai post di un blog.
Le immagini contengono anche il titolo e il sotto-titolo, e le miniature in basso permetteranno una migliore navigazione.
Questo template mostrerà una discografia o alcuni album musicali con uno stile circolare che ruoterà l’album o la discografia quando si cliccherà su precedente o successivo.
Cliccando invece sull’album si apriranno i dettagli dell’album che comprenderanno un lettore musicale (jPlayer) e una playlist delle canzoni. Ci sarà anche una descrizione che potrà essere fatta scorrere.
Per creare il template avremo bisogno di jQuery Easign Plugin, jScrollPane, jQuery 2D Trasformation Plugin e jPlayer.
Minimit Gallery è un plugin estremamente personalizzabile che permetterà di gestire slide, gallerie, slideshow e tutto ciò che ha più step al suo interno.
La dinamica e l’ideazione dell’interfaccia sono interamente gestite dal plugin che si rivela adatto solo a programmatori esperti poiché necessita la codificazione di tutte le animazioni e dei CSS della galleria.
Prima di utilizzare il plugin accertatevi di controllare la compatibilità col browser.
Questo tutorial vi spiegherà come applicare una fisarmonica orizzontale al vostro sito web per creare una serie di slide.
Le slide saranno cliccabili sulla fisarmonica. Va ricordato che il plugin lavora correttamente su Internet Explorer 8 e 9.
Ancora una volta vi proponiamo un tutorial che vi mostrerà come utilizzare jQuery e CSS per creare un sito web completo per una “finta” applicazione mobile.
Molto interessante è il modo in cui viene proposto il tutorial che pone l’accento sull’importanza della veste grafica dei siti web.
Il tutorial proposto vi spiegherà come applicare la funzione Start/Stop al vostro slider: una delle più richieste.
Il tutorial non è per principianti ma rimane comunque un lavoro piuttosto semplice da svolgere.
Vi verranno forniti il Markup dell’HTML, il codice CSS e quello Javascript jQuery. Infine verrà posta attenzione sulla funzione Auto-play e vi verrà spiegato come aggiungere un ulteriore panel al vostro slide
In questa tutorial verrà spiegato l’utilizzo di un semplice plugin jQuery (provvisto di demo e download), ideato per realizzare la presentazione delle categorie del vostro sito attraverso immagini.
In questo modo potrete ottenere un magnifico menù di navigazione fruibile, che offre lo stesso effetto a scorrimento del sito della mac.
Volete rendere il vostro sito elegante inserendo un photoslide di tipo professionale? Grazie al seguente tutorial riuscirete a realizzare un accurato photoslide, completamente configurabile e personalizzabile. Potrete infatti deciderne la grandezza, l’ordine delle foto (che può avvenire per numero o tramite le thumbnails sotto lo slide), la velocità di animazione e l’intervallo tra le transizioni. Il codice per il loading è disponibile sia in html che in Xml.
Flexslider è un nuovo plugin per Jquery che genera una sidegallery da inserire nei vostri siti web. La forza di flexslider sta nel fatto che è semplice, permette di risparmiare codice ed è supportato praticamente da tutti i browser.
Di seguito è proposto un progetto open source realizzato con Jquery che permette di inserire in un sito web uno slideshow; lo stesso può contenere non solo delle semplici immagini ma anche dei video.
Quello che vi presento è un metodo davvero originale per inserire una fotogallery nel vostro sito. Il team di programmazione e design di WebDesignShock hanno usato PHP e Jquery per creare questo simpatico photo slider e il tutorial che segue (rivolto in particolare alla parte di programmazione) vi mostrerà come adattarlo alle vostre esigenze.
La fruibilità di un sito web è una componente importantissima dello sviluppo, molto spesso pagine troppo piene di contenuti rendono difficile la navigazione, ma questo tutorial vi propone una soluzione davvero elegante che, utilizzando JQuery e CSS3, vi mostrerà come implementare una sorta di widget a comparsa che potrete usare ad esempio per mettere a disposizione degli utenti i contenuti correlati alla pagina visualizzata.
Ancora una volta vogliamo proporvi un tutorial per JQuery che vi insegnerà a creare dei menù a scorrimento che reagiranno al passaggio del cursore con una semplice animazione ed un cambio di colore, che torneranno poi allo stato originale spostando nuovamente il mouse.
Questo tutorial guida l’utente nella realizzazione di un portfolio animato facendo uso di jQuery (mettendo anche a disposizione una collezione di oltre 30 template). Grazie a questa guida sarete infatti in grado di realizzare thumbnails animati i cui elementi reagiscono dinamicamente ai click dell’utente, ingrandendo l’immagine selezionata e mostrandone i dettagli.
Se vi piacciono i menù animati, che reagiscono dinamicamente al passaggio del cursore del mouse sugli elementi, allora questo tutorial fa sicuramente per voi. Utilizzando jQuery è infatti possibile realizzare dei menù il cui sfondo varia a seconda dell’elemento selezionato con un pregevole effetto di comparsa a scorrimento.
JQuery permette di creare moltissimi effetti particolari con le proprie foto: basta un po’ di dimestichezza per creare degli slideshow navigabili e molte altre particolarità, tra queste è molto interessante quella che permette la realizzazione di un “collage” in fotografia. Si tratta in parole semplici della possibilità di creare un set di foto navigabili liberamente con l’effetto collage applicato ad una foto in grande; una volta, infatti, cliccato sulla foto scelta questa apparirà nel box in grande ma le sue parti saranno le icone dove prima vi erano le altre foto; il plugin crea automaticamente questo effetto e nel giro di pochi secondi le icone andranno ad unirsi per formare l’immagine scelta al centro dello schermo. Un effetto davvero molto particolare ottenibile tra l’altro senza troppi sforzi data la semplicità del plugin.
Slides è un plugin di slideshow per jQuery assurdamente semplice, con caratteristiche come la ripetizione continua, l’auto-play, gli effetti di transizione in dissolvenza o scorrimento, la dissolvenza incrociata, il pre-caricamento delle immagini e l’impaginazione auto generata. Con Slides non vedrete mai diverse foto contemporaneamente, Slides, infatti, fa elegantemente scivolare una foto sull’altra.
Se vi è qualcosa che sembra non andare mai fuori moda, è un buon slideshow con jQuery. I siti a forte impatto visuale si basano sull’abilità nel mostrare immagini automaticamente. Che sia il sito di un fotografo professionista o di uno zoo, gli slideshow compaiono così frequentemente sulla rete semplicemente perchè sono efficaci. Nel tutorial di oggi viene spiegato come trasformare uno slideshow classico grazie all’uso di un diverso tipo di transizioni animate tra le immagini.
In questo approfondito tutorial sullo sviluppo web, imparerete a creare un widget slideshow fruibile e adatto ai canoni della rete, usando HTML, CSS e JavaScript (jQuery). Durante la procedura, vedrete realizzarsi il concetto di Progressive Enhancement.
Rallegrate le vostre gallerie con questo carousel infinito che usa un attraente effetto per far rientrare le immagini. Questo plugin non solo è facile da implementare, ma sfrutta un comodo metodo chiamato .fakeFloat(), che dispone gli elementi basandosi sulla loro posizione all’interno dell’oggetto jQuery stesso. Usando questo metodo, il semplice processo di array si occupa dell’effetto carousel.
Elegante, bello e funzionale modulo di inserimento dati a scorrimento che dà informazioni di validità all’utente dopo ogni step. Questo form fa risparmiare molto spazio ed è di facile accesso; funziona praticamente come uno slideshow, ma la differenza è che mostra i campi di un form da riempire invece di immagini.
In questo tutorial si andranno a creare diversi effetti visivi per un portfolio o un progetto simile usando jQuery. Si darà vita a un piccolo slider integrato con il fantastico plugin Cloud Zoom e l’elegante Fancybox. L’idea è quella di dare all’utente l’opzione di vedere attraverso lo zoom i dettagli di un portfolio quando il cursone vi passa sopra e di premettere una visualizzazione a pieno schermo, qualora vi si cliccasse.
Basato sul Framework jQuery e sul plugin Easing, il plugin per gallerie jSiderNews consente di mostrare immagini o diversi tipi di contenuti e supporta anche la navigazione all’elemento precedente e successivo.
Come sfruttare jQuery e CSS3, in concomitanza con il plugin di rotazione jQuery, per creare una bellissima galleria slideshow. Potrete usarla per ravvivare le vostre pagine web, il catalogo dei vostri prodotti e altri progetti con l’ausilio di un po’ di magia CSS3.
Creare uno slider di contenuti aggiungendo un hashtag per determinare la posizione della finestra
Hash Spider è un semplice e leggero plugin jQuery per creare uno slider di contenuti: è simile a molti altri plugin di questo tipo in circolazione, ma aggiunge un hashtag alla posizione della finestra (ex: www.sito.ext/slider.html#1), in modo da poter creare un collegamento a qualsiasi punto dello slider.
L’autore del post ci guida passo passo alla configurazione ed installazione di questo simpatico slider jQuery per creare una galleria di immagini che cambiano tra di loro con la possibilità di scegliere fre 3 effetti diversi
