Capita di aver bisogno di mostrare in un sito web uno slideshow, una carrellata o una sequenza di immagini o fotografie, e i modi per fare questo sono sicuramente molti.
Esistono servizi online in cui basta caricare le foto e dopo averle caricate ci viene fornito il codice per incorporare un player con il nostro slideshow, magari pure arricchito di musica.
Però se vogliamo qualcosa di relativamente più semplice, che non comporti l’uso di servizi esterni o l’utilizzo di tecnologie video o Flash, ci sono dei javascript che fanno al caso nostro!

Cycle è un plugin per jQuery per creare slideshow e caroselli di immagini, animare sequenze di immagini, con diversi tipi di animazioni e transizioni; supporta la pausa on-hover del mouse, l’auto-stop, l’adattamento automatico delle immagini, …e tanto altro. Supporta – ma non richiede – i plugin Metadata e Easing.

Cycle Lite è una versione più leggera di Cycle.
Questa versione lite è ottimizzata nelle dimensioni dei file e supporta solamente la transizione in dissolvenza.
Supporta anche il pause-on-hover (e cioè arresta il ciclo nel momento in cui il mouse si sovrappone all’immagine), l’adattamento automatico, i callback prima/dopo, e reagisce al click del mouse.

Per funzionare, il plugin mette a disposizione un metodo chiamato “cycle” il quale è richiamato su un contenitore di elementi (le immagini, o gli elementi, che andremo a “ciclare”); ogni elemento figlio del contenitore diventa uno “slide”.

Ci sono diversi parametri facoltativi per personalizzare lo slideshow: il tempo tra le varie transizioni, la loro velocità, l’altezza del contenitore, ritardo addizionale per la prima transizione (anche negativo), ecc.ecc.

Ad esempio, per farlo creare uno slideshow nella configurazione base basta una riga:
$('#slideshow1').cycle()

(...continua a leggere il resto di Creare slideshow di foto in una pagina web)

Se volete mostrare una tipica foto “prima e dopo la cura” in una pagina web, ora c’è più di una opzione per farlo.
Prima d’ora l’unica possibilità, parlando di soluzioni pratiche e veloci da mettere in pratica, era pubblicare le due foto affiancate; ora c’è un plugin per jQuery che consente di sovrapporre le due foto e implementa un sistema per passare da una all’altra in maniera controllata.

Il plugin per jQuery Before/After inserisce infatti un cursore (slider) – totalmente manovrabile tramite il mouse – che scorre a destra e a sinistra, rivelando l’una o l’altra fotografia; inoltre è possibile inserire due pulsanti per visualizzare completamente una delle due immagini.

Il plugin pesa solamente 7 KB è può essere usato più di una volta sulla stessa pagina; se il navigatore non ha javascript attivato allora vedrà entrambe le fotografie. Per usarlo bisogna richiamare jQuery e jQuery UI, oltre al plugin:

(...continua a leggere il resto di Prima/Dopo la cura slider)

Nonostante altre soluzioni per usare qualsiasi font su una pagina web anche se questo non è installato nel sistema operativo dell’utente/navigatore, si stanno “pian piano” affermando delle soluzioni che possiamo trovare incorporate direttamente all’interno dei browser.

Il supporto per la regola @font-face permette di usare una particolare sintassi all’interno dello stile CSS di una pagina html, richiamando un file TTF (True Type font) opure OTF (Open Type Font) tramite una semplice riga di codice.
Il supporto per questa regola è disponibile però non in tutti i browser attualmente usati: Firefox 3.5, Safari 3.1 e Opera 10 (ed ovviamente le versioni successive) supportano la regola @font-face.

In Google Chrome il supporto della regola @font-face ci sarebbe, ma è stato disabilitato per questioni di sicurezza; sembra però che nelle versioni future il supporto alla regola verrà riattivato nella configurazione di default.

Per Microsoft Internet Explorer il discorso è – come sempre! – diverso: il supporto per la regola @font-face c’è addirittura dalla versione 4 di Explorer (!), ma il supporto per i font TTF e OTF è sostituito dal supporto per i font EOT (Embedded OpenType), che è un tipo di font studiato e sviluppato da Microsoft per l’uso sul web.

L’uso della regola @font-face, come detto, è molto semplice…

(...continua a leggere il resto di Come usare qualsiasi font su una pagina web anche se non è installato /3)

Dopo la marea di metodi per creare slide di immagini, ecco un altro plugin per jQuery che serve “solamente” per effettuare un cambio di immagini sfruttando alcuni effetti animati molto carini: ImageSwitch.

Con jQuery è facile creare effetti come la dissolvenza, muovere oggetti, ecc.
Sfortunatamente, quando si ha bisogno di creare un effetto per scambiare delle immagini diventa un po’ più complicato: non è impossibile, ma non è nemmeno semplice, semplicemente richiede più codice da scrivere.

Il punto di forza di questo plugin è fornire un metodo facile e veloce per creare questi effetti quando se ne ha bisogno.
Il plugin supporta vari effetti come la dissolvenza, il “volo”, il “flip”, lo scroll, … sia in entrata che in uscita.
Inoltre è ben commentato, il che rende ancora più facile il suo uso.

(...continua a leggere il resto di “Scambiatore” di immagini)

Captify è un plugin per jQuery molto semplice, che consente un facile inserimento di didascalie alle immagini. Le didascalie possono essere fisse e sempre attive, oppure impostate per apparire/sparire in dissolvenza al passaggio del mouse. Inoltre i sottotitoli possono anche comparire dall’alto o dal basso.

Captify è stato ispirato da ImageCaptions, un altro plugin per jQuery per mostrare didascalie; Captify è però più semplice, facile, leggero e completo da usare; è testato per Firefox, Chrome, Safari, e Internet Explorer.

(...continua a leggere il resto di Come mettere le didascalie nelle immagini)

Dopo aver visto come disegnare grafici usando la struttura offerta da Google Charts oppure usando librerie in javascript da implementare nelle nostre pagine web, facciamo amicizia con un nuovo framework.

JS Charts è un generatore di grafici gratuito basato su javascript che richiede pochissima programmazione per essere usato. Basta preparare i dati in array javascript o in un file XML ed inserire lo script in una pagina html per vedere un grafico, senza bisogno di plugin particolari.

I grafici che si possono disegnare sono grafici a torta, grafici a barre e diagrammi a linee.
Il sito da cui è disponibile JS Charts mette a disposizione anche un’interfaccia per l’inserimento dei dati e l’esportazione dello script personalizzato pronto all’uso.

Le caratteristiche sono…

1. non bisogna scrivere codice
2. è facile da usare
3. personalizzabile
4. puoi farti i grafici online
5. supporta i 3 tipi di grafici più comuni
6. puoi salvare i tuoi grafici sul tuo account
7. puoi pubblicare codice “hostato” sul sito di jscharts
8. compatibile coi comuni browser
9. non servono moduli server-side
10. 100% javascript
11. gratuito e senza watermark

È compatibile con i più diffusi browser: Firefox 1.5+, Internet Explorer 6+, Safari 3.1+, Opera 9+ su Windows; Firefox 1.5+,, Safari 2+ su Mac, e iPhone 1+.

Come si usa JS Charts?

(...continua a leggere il resto di Disegnare grafici dinamici tramite javascript /2)

Il primo mostra semplicemente l’attributo TITLE del link come un “normale” tooltip:

<a class="tooltip" title="TOOLTIP" href="http://...">LINK</a>

Un altra possibilità è usarlo come preview di immagini, con o senza didascalie (sempre tramite l’uso del TITLE):

<a class="preview" title="DIDASCALIA" href="image.jpg">LINK</a>

Una terza bella possibilità e di associare ad un link testuale una immagine di anteprima, con didascalia (in questo caso il file di anteprima è richiamato tramite l’attributo REL):

<a class="screenshot" title="DIDASCALIA" rel="ANTEPRIMA.JPG" href="http://www....">LINK</a>

Come si può vedere, tra le tre versioni cambia la CLASSE: tooltip, preview e screenshot.
Il tutto va ovviamente poi “condito” con qualche righettina di codice CSS.

fonte: CSS globe

Articoli simili

1. CoolTipCha!
2. Immagini con didascalie in pagine HTML
3. ProtoTip: tooltip pronti all’uso
4. Come creare aree con tooltip su un’immagine
5. “Nessuna Sidebar definita” come attivare gli widget
6. Font & fonts: gratis, gratuiti e free
7. Screenshot su Mac: fotografare lo schermo
8. Creare slide di immagini
9. Editor di immagini nel menù contestuale di Windows
10. Strano comportamento di K2 dopo aggiornamento a WP 2.7.1

Come LightBox e ShadowBox (e molti altri…) anche FancyZoom è uno script, solo che questo non si basa su nessun framework esterno.
FancyZoom, come dice il nome, ha di bello l’essere molto elaborato e particolare: salta subito all’occhio l’effetto ZOOM in dissolvenza che si ha nel passaggio dall’icona all’immagine ingrandita.

Per il resto le caratteristiche complete sono…

• dissolvenza in entrata ed in uscita
• allineamento automatico al centro della pagina
• adatta l’ingrandimento alla dimensione del browser
• pre-caricamento delle immagini n background
• 2 script JS  ed 1 cartella in tutto (61 kb)
• aggiunge l’ombra agli ingrandimenti (in Safari 3 usa la caratteristica nativa)
• si inserisce nelle pagine con 2 righe di codice
• testato su Safari, Firefox, IE7, e IE6

Le due righe di codice per implementarlo sono per la solita inclusione tra i tag HEAD:

<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>

L’unica pecca che gli ho trovato, a parte mostrare solo immagini, e che al ridimensionare la finestra del browser oppure allo scorrere la pagina, l’immagine resta fissa dovè.

(...continua a leggere il resto di Un altro script per gallerie Ajax: Fancy Zoom)

Dopo i 10 migliori hack da usare con i CSS, ecco altri 15 trucchi da usare con i CSS…

1.

Nascondi il testo con la rientranza del margine:
text-indent:-9999px;/*Hide Text, keep for SEO*/

2.

Cross browser min height:
#container { min-height:500px; } * html #container { height:500px; }
…oppure…
#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}

3.

Evidenzia i target:_blank links:
a[target="_blank"]:before,
a[target="new"]:before {
background:#ff9;
}

(...continua a leggere il resto di 15 trucchetti con i CSS)

Primo passo: includere tra i tag HEAD il fle CSS e i 2 JS, uno per jQuery ed uno per Pop!…

<link href="/pop/stylesheets/pop.css" media="all" rel="stylesheet" type="text/css"/><script language="javascript" src="/pop/javascripts/jquery.js" type="text/javascript"></script>
<script language="javascript" src="/pop/javascripts/jquery.pop.js" type="text/javascript"></script>

Poi inizializzare Pop! con la solita sintassi che si usa in jQuery…

(...continua a leggere il resto di Come creare un dropdown menu)