Shadowbox assetURL: impostare il percorso delle immagini

Sabato 12 Aprile, 2008

Quando Shadowbox apre la sua finestra per mostrare un contenuto (immagine, iframe, Movie, ecc...), visualizza, nell'attesa, un gif animato che viene fornito nel pacchetto. Se la pagina che sta utilizzando Shadowbox si trova allo stesso livello della cartella images, tutto funziona bene. Per default, infatti, Shadowbox cerca la gif animata sotto images/loading.gif - o images/loading-light.gif se avete scelto gli stili light (shadowbox-light.css). Altrimenti, e spesso c'è il rischio anche di non accorgesene, se ci troviamo in una diversa alberatura, viene generato un bel codice 404 - di pagina non travata; nel nostro caso di file non trovato!

Per risolvere il problema basta inizializzare Shadowbox con un parametro opportuno che indica proprio il percorso assoluto della cartella images: su undolog.com, ad esempio, ho posizionato la gif animata del loading direttamente nella cartella images presente in root (come circa un miliardo di altri siti :). Per rendere accessibile questa cartella a Shadowbox, a prescindere dal percorso, ho inserito semplicemenete:

JavaScript:
  1. // init shadowbox with assetURL parameter
  2. Shadowbox.init( {assetURL: 'http://www.undolog.com/' } );

Post correlati

Tutti i cloni di Lightbox in una matrice dinamica

Venerdì 11 Aprile, 2008

Planetozh ha realizzato uno splendito strumento dinamico in grado di elencare tutte le librerie Javascript simili a Lightbox.

image

image Tramite un pannello (vedi  immagine qui a sinistra) con una serie di "spunte" (checkbox), che indicano le varie caratteristiche delle librerie, è possibile eseguire un filtro ottenendo così la lista di una o più librerie che fanno al caso nostro. Speriamo che l'autore mantenga aggiornata questa fantastica pagina, utilissima nel districarsi tra le numerose e sempre più potenti librerie di questo tipo.

Post correlati

Scriptaculous Effect.Tween: come funziona

Giovedì 20 Marzo, 2008

Fra tutte le librerie "web 2.0" disponibili, scriptaculous è sicuramente quella più mal documentata! Sul sito ufficiale, spesso lento, la documentazione è parziale, mal fatta e di difficile consultazione. Con gli ultimi rilasci, poi, alcune nuove funzionalità sono completamente mancanti, proprio come il nuovo core effect Tween (Effect.Tween). Quest'ultimo, in modo simile al Tween di Flash, permette di manipolare transizioni personalizzate. La sua SYNOPSIS base è la seguente: Continua a leggere... »

Post correlati

Light gallery: Lightview 2.0.0_rc1

Martedì 19 Febbraio, 2008

Lightview 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

Post correlati

Light Library: da Slimbox a Shadowbox, gallerie in Javascript

Mercoledì 13 Febbraio, 2008

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

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:

HTML:
  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:

HTML:
  1. <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
  2. <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
  3. <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Voto: 6 - Home Page Lightbox2

LIGHTWINDOW 2.0

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 (classparams - per impostare il comportamento della libreria). Ad esempio, per visualizzare una gallery o slideshow usa l'attributo rel:

HTML:
  1. <a href="gallery/0-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a>
  2. <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>
  3. <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

Shadowbox 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:

HTML:
  1. <a href="beach.jpg" rel="shadowbox[Vacation]">The Beach</a>
  2. <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:

HTML:
  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

Post correlati

Tunneling e proxy server per Ajax e non solo

Lunedì 10 Dicembre, 2007

A causa della sua capacità di comunicare con il server, l'oggetto XmlHttpRequest (XHR), usato nella tecnologia Ajax (acronimo di Asynchronous JavaScript and XML, la cui pronuncia dovrebbe essere "egiacs" anche se noi italiani preferiamo "aiacs"), ha un blocco di protezione che gli impedisce di eseguire richieste esterne al dominio in cui opera. Questa protezione è necessaria per impedire Injection Javascript (tecniche di "iniezione" di codice estremamente pericoloso con lo scopo di violare il sistema) di svariato tipo, con l'obiettivo ultimo di "irrompere" nel sistema.
Questo limite è oggi tenuto in seria considerazione e si sta pensando, in qualche modo, di risolverlo - direttamente nell'oggetto XmlHttpRequest - senza pregiudicare la sicurezza (vedi anche: Third proposal for cross-site extensions to XMLHttpRequest ).

Comunque sia la situazione oggi è la seguente:

XHR

Continua a leggere... »

Post correlati

script.aculo.us 1.8 preview

Lunedì 15 Ottobre, 2007

Anteprima della libreria di effetti Scriptaculous, la 1.8 in attesa della 2.0:

  • Prototype 1.6 (lastest trunk version)
  • Complete rewrite of Ajax.InPlaceEditor and Ajax.InPlaceCollectionEditor
  • Full CSS inheritance in Effect.Morph
  • New core effect: Effect.Tween
  • Sound: play mp3 files for sound effects; uses native playback on IE and available plugins whereever possible
  • Performance improvements
  • Tons of bugfixes

Per la lista completa dei miglioramenti vide il CHANGELOG

Post correlati

DatePicker con Prototype e Scriptaculous

Lunedì 3 Settembre, 2007

image 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:

HTML:
  1. <script type="text/javascript" src="/prototype.js"></script>
  2. <script type="text/javascript" src="/scriptaculous.js"></script>
  3. <script type="text/javascript" src="/datepicker.js"></script>
  4. <style type="text/css">
  5. @import("/css/datepicker.css");
  6. </style>
  7.   <input type="text" id="date-from" name="date-from" />
  8. </form>
  9. <script type="text/javascript">
  10.      var dpck   = new DatePicker({
  11.       relative  : 'date-from',
  12.       language  : 'en'
  13.       });
  14. </script>

Post correlati

Restyling: animazioni ed interattività

Mercoledì 25 Aprile, 2007

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!

Loading Flash Player...

Il codice che ho utilizzato è davvero semplice:

JavaScript:
  1. Event.observe(window, 'load', function() {
  2.   $$('h2.dropdown').each( function(element) { element.style.cursor="pointer";
  3.       element.observe('click', function(event) {
  4.       if( this.next().style.display == "" ) new Effect.BlindUp(this.next(),{duration:.5});
  5.       else new Effect.BlindDown(this.next(),{duration:.3});
  6.       Event.stop(event);
  7.     }.bindAsEventListener(element))
  8.   })
  9. })

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:

JavaScript:
  1. Event.observe(window, 'load', function() {new Effect.BlindUp($("tit_category").next(),{duration:.5}) } )

I titoli sulla sidebar sono definiti, quindi, in questo modo:

HTML:
  1. <h2 id="tit_category" class="dropdown replacetitle" title="Categorie"><span>Categorie</span></h2>
  2.     <p>Contenuto da far sparire!</p>
  3. </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...

Post correlati

Unobtrusive Flash Objects

Martedì 10 Aprile, 2007

L'inserimento di oggetti (in particolare Flash Objects) all'interno delle pagine Web è diventato ultimamente un'attività spesso stressante. In altri Post abbiamo già affrontato l'argomento di come rilevare Flash ed inserirlo nelle pagine in modo appropriato. Dato che abbiamo parlato di tecniche Unobtrusive, vi segnalo due noti script in grado di rilevare (ed eventualmente installare) ed inserire oggetti Flash in una pagina, in modo assai afficiente e poco intrusivo: SWFObject e UFO.
Entrambi gli script offrono in sostanza le stesse caratteristiche e un funzionamento identico. L'approccio è quello che sostituire tramite Javascript un determinato TAG con il contenuto Flash. Come sappiamo questo procedimento elimina il problema dell'attivazione dell'oggetto Flash imposto da Internet Explorer, tuttavia implica che Javascript sia attivato sul target-browser.
Entrambi gli script non fanno uso di librerie esterne, come Prototype.js ad esempio. La differenza più importante tra i due è che SWFObject va chiamato quando il TAG da sostituire è già stato caricato nella pagina, modalità non propriamente Unobtrusive. Ecco uno stralcio di codice che mostra la sequenza di chiamata:

HTML:
  1. <div id="flashcontent">
  2. <strong>You need to upgrade your Flash Player</strong>
  3. This is replaced by the Flash content.
  4. Place your alternate content here and users without the Flash plugin or with
  5. Javascript turned off will see this. Content here allows you to leave out <code>noscript</code>
  6. tags. Include a link to <a href="swfobject.html?detectflash=false">bypass the detection</a> if you wish.
  7. </div>
  8. <script type="text/javascript">
  9. // <![CDATA[
  10. var so = new SWFObject("so_tester.swf", "sotester", "300", "300", "9", "#FF6600");
  11. so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
  12. so.write("flashcontent");
  13. // ]]>
  14. </script>

UFO, invece, permette un'approccio decisamente più in linea con i classici script Unobtrusive. La sostituzione del TAG avviene in modalità trasparente, senza abbligare sequenze di caricamento, come mostrato nell'esempio qui sotto:

HTML:
  1. <title>Unobtrusive Flash Objects (UFO) | Sample page</title>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  3. <script type="text/javascript" src="ufo.js"></script>
  4. <script type="text/javascript">
  5. var FO = { movie:"test8.swf", width:"300", height:"120", majorversion:"12", build:"0", xi:"true" };
  6. UFO.create(FO, "ufoDemo");
  7. </script>
  8. </head>
  9. <div id="ufoDemo">
  10. <p>Replacement content</p>
  11. <p><a href="http://www.macromedia.com/go/getflashplayer"><img src="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" alt="Get macromedia Flash Player" style="border: none;" /></a></p>
  12. </div>
  13. </body>

Nel codice sorgente dello script di UFO, infatti, si nota immediatamente l'uso - più appropriato - di un evento che attente il caricamento completo della pagina prima di eseguire la sostituizione; approccio quindi estremamente più consono a script non intrusivi.

Post correlati