Appena rilasciata ecco l’ennesima libreria Unobtrusive Javascript per gallerie di immagini e non solo. Lightview, nella release 2.0.0_rc1, aggiunge anch’essa le funzioni per “aprire” delle Window con contenuti che vanno oltre la semplice immagine: filmati Flash, QuickTime, Form e IFRAME! Rispetto alla precedente versione (la 1.1.0 – che gestisce solo immagini), quindi, questa release candidate si arricchisce delle funzionalità presenti anche in altre librerie. Gli strumenti richiesti da Lighview per funzionare sono gli arcinoti Prototype 1.6.0.2 e Scriptaculous 1.8.1. Gliattributi usati per gestire la libreria sono class e rel.
Un’aspetto interessante di questa libreria è l’estrema cura della grafica con cui si presenta.
Voto: 9 – Home page di Lightview
Continua...
Qualcuno potrebbe dire - e non a torto – basta! Di librerie Javascript (Unobtrusive – non intrusive, o parzialmente) per gestire immagini e gallerie ce ne sono davvero tante. Comunque sia ecco la lista, con pregi e difetti, delle migliori che ho provato.
SLIMBOX 1.41
Estremamente minimale, 7K (alla versione 1.41), richiede mootools per funzionare. Come indicato sulla Home page è un vero e proprio clone grafico di Lightbox, che vedremo più sotto. Sinceramente, a parte l’estrema compattezza della libreria, non possiede caratteristiche peculiari. Sullo stesso sito, comunque, è possibile trovare anche uno script per generare riflessioni runtime… al limite può essere utile questo 
Voto: –6 – Home Page Slimbox, Home Page Reflection.js for MooTools
LIGHTBOX2
Una delle più note e semplici. Gestisce in questa release sono immagini (quindi non funziona con QuickTime, Flash o altro). Per il suo funzionamento richiede Prototype e Scriptaculous. Usa l’attributo rel per identificare i link delle immagini da processare:
1
| <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1 </a> |
Come le altre librerie che vedremo, supporta la modalità slideshow, inserendo tra parentesi quadre un qualsiasi identificativo in una serie di link/image:
1
2
3
| <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1 </a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2 </a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3 </a> |
Voto: 6 – Home Page Lightbox2
LIGHTWINDOW 2.0
Anche questa è abbastanza diffusa! Dopo tutto come capire qual’è la più usata? . Comunque sia è estremamente completa e versatile. Sul sito campeggia la richiesta di donazioni per l’acquisto di un Mac… un tantino invasiva e pressante… Comunque sia, come la precedente, per il suo funzionamento, richiede la presenza di Prototype e Scriptaculous. A differenza della precedente, tuttavia, questa permette di visualizzare moltisiimi tipi di file: dalle immagini, filmati QuickTime, filmati Flash, pagine HTML esterne e PDF. Di contro, utilizza vari attributi, alcuni facoltativi (author,caption e title) altri obbligatori (class e params -per impostare il comportamento della libreria). Ad esempio, per visualizzare una gallery o slideshow usa l’attributo rel:
1
2
3
| <a href="gallery/0-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1 </a>
<a href="gallery/1-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown">image #2 </a>
<a href="gallery/2-sushi.jpg" class="lightwindow" rel="[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3 </a> |
Voto: 8 – Home Page LightWindow 2.0
SHADOWBOX 1.0B
Nonostante sia alla versione 1.0 beta, questa è forse la libreria più completa, sia dal punto di vista funzionale sia per le librerie supportate. Per il suo funzionamento, infatti, è possibile scegliere tra una serie di framework, grazie a dei file “adapter” appositamente realizzati e fornite dall’autore:
L’effetto visivo (configurabile tramite skin/css), poi, a differenza delle altre, è sicuramente più accattivante. Gli attributi usati sono solo il rel dove, al sue interno, trovano spazio tutti gli altri parametri di configurazione. Ad esempio, per realizzare una gallery, basta usare:
1
2
| <a href="beach.jpg" rel="shadowbox[Vacation]">The Beach </a>
<a href="pier.jpg" rel="shadowbox[Vacation]">The Pier </a> |
Se si desidera impostare qualche opzioni (vedi sito per la lista completa) basta usare la seguente sintassi:
1
| <a href="myimage.jpg" rel="shadowbox;options={overlayOpacity: 0.5, resize: false}">My Image </a> |
Su Internet se ne possono trovare anche altre, come ad esempio Highslide JS. Anzi, se volete segnalarmi qualche altra libreria… Comunque sia, personalmente, preferisco Shadowbox per semplicità, scalabilità e cross-framework.
Voto: 9 – Home Page Shadowbox 1.0B
Continua...
EditArea è un modo diverso di utilizzare le funzioni di editing online permesse dall’HTML. Questa tecnica, utilizzata il più delle volte per creare Editor WYSIWYG, viene sfruttata in questo caso per fornire un vero e proprio editor di codice.
Un normale campo TextArea viene trasformato in un vero e proprio editor con la possibilità di formattare il testo, cercare e sostituire parole e ottenere una colorazione del codice in tempo reale. Tra le sue caratteristiche notiamo:
- Integrazione semplicissima tramite un solo script Javascript e una sola chiamata ad una funzione di patch.
- Supporto della tabulazione
- Cerca e sostituisci con regexp
- Supporto della colorazione del codice per: PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, Pascal, Basic, Brainf*ck
- Auto-indentazione delle nuove linee
- Numerazione linee di codice
- Supporto multilingua: Croato, Danese, Inglese, Francese, Tedesco, Italiano, Giapponese, Polacco, potoghese)
- Supporto per gzip
- Multiple istanze
- Fullscreen
- Ridimensionamento della finestra in tempo reale
- Possibilità di estendere le caratteristiche tramite plugin
- Save e Load callback
- Lavora con prototype e mootools
Un esempio di come usarlo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| editAreaLoader.init({
id: "exemple_3" // id of the textarea to transform
,start_highlight: true
,font_size: "8"
,font_family: "verdana, monospace"
,allow_resize: "y"
,allow_toggle: false
,language: "fr"
,syntax: "css"
,toolbar: "new_document, save, load, |, charmap, |, search, go_to_line, |, undo, redo, |, select_font, |, change_smooth_selection, highlight, reset_highlight, |, help"
,load_callback: "my_load"
,save_callback: "my_save"
,plugins: "charmap"
,charmap_default: "arrows"
}); |
Continua...
Snap Shots, nato come script Javascript Unobtrusive, diventa ora un Plugin per i browser Microsoft Internet Explorer (6 e 7), FireFox (1.5 – 2.0.0) e Safari (2.0.1 o superiori). Sono stato contento di averlo installato su questo Blog e ora che è diventato un Plugin è giunto il momento di toglierlo, così da rendere meno pesante il caricamento delle pagine. Da oggi, quindi, elimino Snap Shots da Undolog.com, se desiderate continuare ad avere questa features installate la versione Plugin più leggera e veloce.
Dalla barra di Explorer è possibile impostare una serie di opzioni che rendono questa versione di Snap Shots estremamente più maneggievole rispetto a quella Javascript. È possibile impostare la modalità di visualizzazione degli Snap, con icona o meno, la lingua e il tema grafico.
È interessante notare l’evoluzione di questo questo tipo di “software”, di come un Widget nato come script Javascript sia evoluto ad “estensione”. Il vantaggio di averlo come script Javascript, tuttavia, era quello di fornire la funzione di Snap a prescindere dall’installazione del Plugin sul browser. Chiunque avrebbe usufruito dello Snap Shots dei link. Quello che veniva richiesto, in modo trasparente (Unobtrusive), era solo l’attivazione di Javascript nel browser. La versione Plugin si lega invece al browser e non ha più nulla a che fare con il sito Web. Il vantaggio è nelle prestazioni della funzione di snapshot e uno script in meno nel nostro sito Web. In questo modo è l’utente a scegliere se usufruire dello snapshot e non più il sito Web (anche se nelle ultime release lo stesso SnapShots aveva messo a disposizione un pannello di opzioni per attivare o disattivare lo snapshot).
Continua...
L’autore di questa libreria Unobtrusive è lo stesso di Reflex (Reflex 1.1: aggiungere effetto di riflessione alle immagini). Questa volta propone un simpatico effetto di “arricciatura” (curl) sulle immagini fotocon varie opzioni tra cui l’animazione dell’arricciamento al passaggio del mouse sul bordo dell’immagine. La tecnica utilizzata è sempre quella delle CANVAS utilizzate in tutti gli script disponibili sul sito. Per scaricare il curl script clicca qui.
Continua...
Ne avevamo già parlato di questa libreria Javascript Unobtrusive realizzata dallo stesso autore di LightWindow 2.0. Viene ora rilasciata la versione 2.0, che fa sempre uso di scriptaculous.
Tra le novità più interessanti troviamo la possibilità di “innestare” gli Accordion uno dentro l’altro, sia in modlità orizzontale che in verticale.
Allontanandosi poi dall’originale funzionamento degli Accrodion classici è stata aggiunto il comportamento di apertura/chiusura. Sul sito è possibile scaricare lo script (indicato ancora con la dicitura 1.0!?) e accedere agli esempi di codice.
Continua...
Un’interessante e utile libreria Javascript basata sull’accoppiata Prototype e Scriptaculous che permette di aggiungere la funzione di DatePicker (componente presente in ActionScript/Flash) in normali INPUT TEXT HTML.
La sua caratteristica Unobtrusive (non intrusiva) lo rende uno strumento ideale per espandere le funzionalità di un sito già precostituito. Per attivare la funzione di DatePicker basta aggiungere la classe “date” nel nostro TAG INPUT. Nel codice Javascript è possibile impostare una serie di parametri tra cui il suporto per la lingua italiana.
Ecco una porzione di codice esemplificativa:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script type="text/javascript" src="/prototype.js"></script>
<script type="text/javascript" src="/scriptaculous.js"></script>
<script type="text/javascript" src="/datepicker.js"></script>
<style type="text/css">
@import("/css/datepicker.css");
</style>
<form>
<input type="text" id="date-from" name="date-from" />
</form>
<script type="text/javascript">
var dpck = new DatePicker({
relative : 'date-from',
language : 'en'
});
</script> |
Continua...
Nuova versione 1.1 della libreria Javascript Reflex con la quale è possibile aggiungere effetti di riflessione alle immagini. Il vantaggio di usare questa tecnica “non intrusiva” è la rapidità con cui è possibile aggiungere questi effetti senza dover spendere tempo nel realizzare effettivamente l’immagine di riflessione.
Questa versione è stata provata sui browser Mozilla Firefox 1.5+, Opera 9+, Safari e IE6. La minima dimensione supportata per un’immagine è 32×32. Una volta inclusa la libreiria:
Basta inserire class=”reflex” sulle immagini dove desideriamo applicare tale effetto. Sfruttando la proprietà dell’attributo class è possibile manipolare gli effetti di riflessione, il chè rende questa libreria davvero particolare. È possibile, infatti, distorcere anche l’immagine aggiungendo effetti 3D. Ad esempio ecco come aggiungere varie caratteristiche alla rilfessione:
1
| <img class="reflex idistance16 iborder2 iheight24" width="200" alt="" src="images/example.jpg"/> |
Per i dettagli vedi la documentazione sul sito ufficiale.
Sullo stesso sito è possibile scaricare numerosi altri effetti come Edge, Corner, Glossy e molti altri, tutti dedicati alle immagini.
Continua...
Finalmente un bello script in Javascript (scarica Accordion 1.0), semplice e leggero, che permette di aggiungere il componente Accordion usato in Flash e in mootools sfruttando la libreria scriptaculous. Effettivamente mancava questo oggetto, utile in tante occasioni. Questa versione è estremamente semplice e permette di creare Accordion sia orizzonali che verticali. Lo script è gratuito, tuttavia potete fare una piccola donazione all’autore per aiutarlo ad acquistare un bel MacPro
Per utilizzarlo basta inserire queste semplici righe di codice:
1
2
3
| <script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script> |
Il markup HTML è immediato:
1
2
3
4
5
6
7
8
9
10
11
| <h3 class="accordion_toggle">Title Bar </h3>
<div class="accordion_content">
...
</div>
...
...
...
<h3 class="accordion_toggle">Title Bar </h3>
<div class="accordion_content">
...
</div> |
Un’esempio pratico:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| // General Syntax
new accordion('container-selector', options);
// Horizontal example
var horizontalAccordion = new accordion('#top_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 525
},
direction : 'horizontal'
});
// Vertical Accordion
var verticalAccordion = new accordion('#bottom_container'); |
Continua...
Dopo aver sistemato la grafica di Undolog e aver apportato gli ultimi ritocchi ad alcuni titoli (vedi sidebar), mi sono divertito ad usare l’accoppiata Prototype.js e Scriptaculous, in modalità non intrusiva (Unobtrusive)! Ecco un video (ma lo potete provare di persona qui a destra ) con la simpatica funzione che ho aggiunto alla sidebar di Undolog, che oltre a renderla più gradevole spero la renda anche più funzionale!
Il codice che ho utilizzato è davvero semplice:
1
2
3
4
5
6
7
8
9
| Event.observe(window, 'load', function() {
$$('h2.dropdown').each( function(element) { element.style.cursor="pointer";
element.observe('click', function(event) {
if( this.next().style.display == "" ) new Effect.BlindUp(this.next(),{duration:.5});
else new Effect.BlindDown(this.next(),{duration:.3});
Event.stop(event);
}.bindAsEventListener(element))
})
}) |
Inoltre notate che la prima volta che viene caricata la Home Page di Undolog viene automaticamente chiuso il pannello delle Categorie – identificato dall’id tit_category:
1
| Event.observe(window, 'load', function() {new Effect.BlindUp($("tit_category").next(),{duration:.5}) } ) |
I titoli sulla sidebar sono definiti, quindi, in questo modo:
1
2
3
4
| <h2 id="tit_category" class="dropdown replacetitle" title="Categorie"><span>Categorie </span></h2>
<div>
<p>Contenuto da far sparire! </p>
</div> |
Tramite la classe dropdown vengono identificati i titoli H2 da rendere dinamici, grazie alla funzione doppio-dollaro ($$) di Prototype.js – di cui abbiamo già parlato…
Continua...
Ultimi Commenti
Giovambattista Fazioli: @Nik: Sono contento! In bocca al lupo dunque!!
Nik: Lunedì ho l’esame di informatica su java, grazie mi sei stato utilissimo, il libro che ho era poco chiaro...
Marco: Ti ringrazio moltissimo, mi hai illuminato
ho risolto impostando [cc_objc] //OptionViewController.m -...
Giovambattista Fazioli: @Marco: Ti consiglio un approccio credo più corretto. Se hai eseguito il subclass del tab...
luigi: molto chiaro e semplice devo ammettere che anche scrivendo da un pà difficilmente uso delegati creati da...