Sintesi-Design.it

jQuery Cycle2: slideshow e carousel

jQuery Cycle 2 è uno dei plugin più usati per realizzare slide show. È un plugin semplice da usare ma, al tempo stesso, è dotato di numerose opzioni con cui può essere personalizzato.

In questo tutorial troverete una serie di esempi per imparare a usare subito Cycle 2.

Inoltre, jQuery Cycle2 è compatibile con tutti i browser e supporta i dispositivi mobili. È rilasciato con doppia licenza MIT/GPL e perciò può essere liberamente utilizzato nei propri progetti.

Continua a leggere…

jQuery backstretch: applicare un’immagine allo sfondo della pagina

jQuery backstretch imposta un’immagine come sfondo del documento e la adatta alle dimensioni della finestra del browser.

jQuery backstretch può essere utilizzato anche per mostrare più immagini di sfondo come slideshow. 

Continua a leggere…

jQuery prettyPhoto: alternativa a lightbox per immagini e altri contenuti

Prettyphoto è un plugin di jQuery che consente di realizzare gallerie fotografiche in stile lightbox.

Oltre alle immagini supporta anche altri tipi di contenuti come video, filmati, documenti e contenuti in linea.

Attenzione: il plugin non funziona correttamente con jQuery 3.x

Continua a leggere…

La funzione $.noConflict()

Molte librerie javascript utilizzano il simbolo $ come nome di una funzione e, di conseguenza, se si utilizzano due librerie javascript, nello stesso documento (in questo articolo si utilizzano jQuery e mootools ), può capitare che si crei un conflitto tra le funzioni delle due librerie.

In questo tutorial viene mostrato come usare due delle più diffuse librerie javascript, jQuery e mootools, nello stesso documento.

Continua a leggere…

jQuery 1 o 2

Da Aprile 2013 jQuery è distribuito in due versioni:

  • la versione 2.x.x è dedicata ai browser moderni e conformi agli standard. Non supporta le versioni di Internet Explorer precedenti alla 9.
  • la versione 1.x.x garantisce il supporto per Internet Explorer 6, 7, 8. Questa versione continuerà ad essere sviluppata finché sarà necessario.

L’intenzione degli sviluppatori è di rimuovere dalla libreria tutte quelle funzionalità che servono a garantire la compatibilità con le vecchie versioni di Internet Explorer, diminuendo le dimensioni della libreria (al momento è stata ridotta del 10%) e rendendo più efficiente il codice.

Continua a leggere…

Effetto dissolvenza tra due immagini con CSS3 e jQuery

L’effetto dissolvenza tra due immagini può sottolineare un collegamento, il logo, una serie d’immagini di una galleria fotografica o un’altra area importante di una pagina web.

La dissolvenza si può realizzare con le proprietà css opacity e transition che però non sono supportate dai browser meno recenti. Per questi ultimi si può implementare una tecnica alternativa molto semplice basata su Modernizr e jQuery.

Continua a leggere…

Modernizr: verificare se il browser supporta una caratteristica css o html

Modernizr è una libreria javascript che verifica se il browser supporta una data caratteristica HTML5 o CSS3 e, in caso contrario, consente di prevedere un contenuto alternativo per i browser meno recenti.

Se non si vuole rinunciare alle novità di HTML5 o CSS3, ma si vuole garantire l’accessibilità del sito anche ai browser meno recenti Modernizr potrà essere molto utile.

Modernizr è rilasciata con licenza MIT e quindi è liberamente utilizzabile, senza limitazioni, in ogni progetto web.

Continua a leggere…

jQuery fitText: adattare il testo al dispositivo

jQuery fitText è un plugin che ridimensiona il testo a cui è applicato in base alla dimensioni della finestra in cui viene visualizzato.

Può essere usato nei layout fluidi o in quelli che si adattano alla risoluzione del monitor (tramite media queries) per ridimensionare il testo dell’intestazione.

Continua a leggere…

Image replacement

L’image replacement è una tecnica css che sostituisce il testo di un elemento html con un’immagine di sfondo.

Il suo scopo è di rendere il sito accessibile ai programmi screen reader e ai motori di ricerca, senza rinunciare al testo con effetti grafici che possono essere ottenuti solo con un’immagine.

In questo tutorial viene illustrata la tecnica nota con il nome Phark’s Accessible Image Replacement, che rimane ancora una delle tecniche più diffuse grazie alla sua semplicità e all’ampio supporto da parte dei browser.

Continua a leggere…