RSS
 

Posts Tagged ‘javascript’

Guida all’uso di jQuery LightBox

02 Jan

Con jQuery è possibile realizzare di tutto. E se ne sono accorti anche quelli di LightBox. Quindi ho pensato di realizzare una piccola guida che vi spiega come si fa ad integrare jQuery LightBox al vostro sito web. Per chi non la conoscesse, jQuery LightBox è un plug-in per il noto framework. La versione “classica” di LightBox è decisamente meno versatile. La potenza di jQuery ci permette di integrarla in modo molto rapido.

Gli interventi da fare sono due e sono sul codice html e su quello javascript. Analizziamo prima il codice HTML, e …

definiamo il “contenitore”, ovvero un div, delle immagini ed assegnamo un id a questo elemento.
<div id=”la_galleria”></div>

Al suo interno, inseriremo le immagini.
<div id=”la_galleria”>

<img src=”[...]” /div>
<img src=”[...]” /div>
…
<img src=”[...]” /div>

</div>

Facciamo si che ogni immagine sia anche un collegamento nel modo seguente
<div id=”la_galleria”>

<a href=”…”><img src=”…” alt=”" /></a>
<a href=”…”><img src=”…” alt=”" /></a>
…
<a href=”…”><img src=”…” alt=”" /></a>

</div>

Ed ora la seconda parte: come intervenire nel codice javascript:

Cosa fare nel codice Javascript:
$(‘#la_galleria a’).ligntBox();

Ovviamente il selettore “#id_galleria a” sta ad indicare tutti i collegamenti che si trovano dento l’elemento con id=”la_galleria”.

Molto bene: il mio esempio era generico. Ora se volete potete scaricare il codice di esempio che potete trovare direttamente nella pagina del plugin. Qui di seguito, mi elenco anche qualche altro link interessante su altri articoli che riguardano jQuery LightBox. Non limitatevi a questo post, osservate anche come il resto della rete ha fatto uso di questo fantastico elemento di jQuery.

Pagina ufficiale di jQuery LighjtBox

Integrazione con drupal

I migliori scripts di LinghtBox, facebook ed altri esempi

Un sacco di esempi, nell’edizione di balupton.com

Download di GoogleCode

Una marea di cloni di LightBox

Condividi questo post sui tuoi social network preferiti:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • MySpace
  • Twitter
  • Wikio IT
  • Live
  • RSS
  • StumbleUpon
  • Technorati
 
View Comments

Posted in javascript

 

Javascript Camp – Il mio intervento sul Dom2 ed i Listener per eventi

28 Sep

Lo scorso Venerdì, 25 Ottobre 2009, ho partecipato al Javascript Camp. E’ stata la mia prima volta ad un Bar Camp e mi chiedo che diavolo ho fatto fino a questo momento. In un bar Camp, ci si ritrova a discutere insieme, ciascuno proponendo un proprio intervento. Si votano gli argomenti migliori, quindi ci si raccontano le proprie esperienze con piccoli talk che ho visto variare da pochi minuti a più di mezz’ora di “gioco”. Si perchè per “noi nerd” imparare e condividere è un gioco.

Per l’occasione ho preso uno di quei libretti che ogni tanto mi piace comprare e mi sono preparato un talk su un argomento specifico di javascript. Ho condiviso le slide e le potete consultare a questo link:
listener per eventi. Non era nulla di interessante o eccitante: i listener per eventi non sono altro che una delle cose che sia ie che ff implementano in modo diverso e che quindi, noi programmatori, siamo costretti a non poter sfruttare. La morale della favola, del mio talk, era che “wow che fico… non usatelo: jquery e co. fanno già tutto quello di cui abbiamo bisogno.”.

Ci siamo lasciati con l’idea di realizzare un HTML5 Camp/Day verso dicembre… e credo che alzerò il tiro e la qualità del mio intervento. Ci sono diverse API interessanti come la Geolocation (assolutamente piacevole da implementare ma tutt’altro che utile visto che da casa mia – Cesena – viene individuato un indirizzo che sta a Bologna). Tra le altre cose la Geolocation API, al momento in cui scrivo, è supportata solo da Firefox 3.5 che, a dirla tutta, sta deludendo tutti.

Condividi questo post sui tuoi social network preferiti:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • MySpace
  • Twitter
  • Wikio IT
  • Live
  • RSS
  • StumbleUpon
  • Technorati
 
View Comments

Posted in tutto

 

Che cosa è json? Un esempio …

17 Sep

Oggi è una giornata speciale perchè ieri questo blog ha avuto il suo record di visite giornaliere (per lo meno stando a google analytics). Siamo addirittura arrivati a 113. Un branco di pazzi =). Fatto sta che oggi sono qui per parlare di una cosetta nuova per me: json.

Read the rest of this entry »

Condividi questo post sui tuoi social network preferiti:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • MySpace
  • Twitter
  • Wikio IT
  • Live
  • RSS
  • StumbleUpon
  • Technorati
 
View Comments

Posted in tutto

 

effetty jquery

10 Sep

jquery sa essere sbalorditivo anche senza l’utilizzo di plugin. Qualche post fa ho mostrato un plugin per ottenere l’effetto pulse. Un effetto simile si può ottenere anche solo con l’utilizzo di funzioni base come fadeTo ed un setTimeout, anzi … sfruttando gli effetti presenti in jquery (e senza l’uso di plugin) si possono fare tante cose davvero interessanti.

Vorrei davvero elencarli tutti, e mostrare un esempio davvero completo su questa parte del mio framework preferito (eheheh non ne ho ancora guardati altri).

Andiamo per cose più o meno necessarie:

  • modificare l’opacità di un elemento;
  • far sparire o scomparire un elemento;
  • animare un elemento;

Non è tutto quello che si può fare i con jquery effects ma è senz’altro molto. E’ ovvio che se vogliamo nascondere un elemento con jqery dobbiamo usare $(…).hide(); Eheheh più conosco la libreria più rimango sorpreso. $(…).show(); invece mostrerà l’elemento. C’è un effetto decisamente interessante: fade. Possiamo lanciare fadeIn per mostrare, fadeOut per nascondere … un elemento. Lo vedremo scomparire. Come al solito possiamo impostare l’attributo speed per indicare la velocità. fadeTo poi, è l’effetto che preferisco perchè ci permette di non mostrare o nascondere completamente un elemento, ma di impostare la sua opacità. $(…).fadeTo(“slow”,0.5);

Immaginate di avere una pagina piena di contenuto tanto da far perdere la testa a chi ci sta navigando. Possiamo opacizzare per qualche secondo l’intero sito, esclusa la parte che ci interessa.

Tra tutti gli effetti che jquery ci mette a disposizione, quello senz’altro più maestoso è .animate(). Infatti, se passiamo ad animate un array con gli stili che vogliamo modificare, e successicamente la durata dell’animazione, potremo ottenere degli effetti decisamente grafici e spettacolari.

Tanto per fare un esempio, immaginiamo di volere un effetto che sposta il menu dal top al bottom della nostra pagina web:

$(…).css({‘position’:'absolute’});
$(…).animate({‘width’:’90%’,'height’:’30px’,'bottom’:’0px’,'margin’:'auto’,'align’:'center’},2000);

Purtroppo, per ragioni che ignoro (forse un bug)animate non mi ha consentito di impostare position. Così ho dovuto farlo a mano. Bene, questo semplice esempio altro non fa che reimpostare alcune proprietà del css di un elemento. Per farlo impiega 2000 millisecondi. Modifica l’allineamento, cambia le dimensioni… Sono tute cose che avranno un movimento decisamente fluido. Se sommiamo questo al fatto che non ci sarà bisogno di plugin, e sopratutto non avremo bisogno di preoccuparci di quale browser avrà il nostro utente… beh… darei un altro 10+ a jquery =).

Condividi questo post sui tuoi social network preferiti:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • MySpace
  • Twitter
  • Wikio IT
  • Live
  • RSS
  • StumbleUpon
  • Technorati
 
View Comments

Posted in tutto

 

Slides di immagini con Groject.ImageSwitch.yui.js

09 Sep

Mi piacerebbe fare una presentazione completa del plugin Groject.ImageSwitch.yui.js, ma mi soffermerò ad un esempio un po’ “architettonico” che mi ha permesso di giocare un po’ con gli array di javascript. Nel codice che segue, definisco un array che è formato dai nomi delle immagini che si vogliono mostrare una dopo l’altra.

Per non utilizzare una variabile contatore, ho usato uno stratagemma particolare. In verità, credo si tratti di pessima programmazione, perchè rende il tutto meno leggibile. L’idea è quella di usare il primo elemento dell’array come contatore e ad ogni ciclo si carica l’immagine in posizione (imgs[0]++%(imgs.length-1))+1. Un codice di questo tipo è molto comodo in quanto l’aggiunta o l’eliminazione di un’immagine dall’array, comporta ZERO modifiche al resto del codice javascript. Non dipende da nulla se non dall’array di immagini. L’idea è quella di avere un contatore che venga incrementato ad ogni click. Allo stesso tempo, il valore di questo contatore in modulo a imgs.length-1 ci darà la posizione dell’indice. Il +1 finale ci serve perchè non dobbiamo avere imgs[0] come immagine perchè non lo è.

Altra piccola questione: l’immagine che deve essere caricata nel codice html, deve coincidere con l’ultima dell’array.

Esempio semplice

<html>
  <head>
    <title>Groject.ImageSwitch.yui.js Plugin</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="Groject.ImageSwitch.yui.js"></script>
    <script type="text/javascript">
            $(document).ready(function(){
		imgs = new Array (0,"17082009263.jpg","17082009258.jpg","19022009195.jpg");
		$("#Imgs").click(function(){
			$(this).ImageSwitch({
			  Type:"FadeIn",
			  NewImage:imgs[(imgs[0]++%(imgs.length-1))+1],
			  Speed:150});
		});
            });
    </script>
  </head>
  <body>
    <img src="19022009195.jpg" id="Imgs" width="300" />
  </body>
</html>
Condividi questo post sui tuoi social network preferiti:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • MySpace
  • Twitter
  • Wikio IT
  • Live
  • RSS
  • StumbleUpon
  • Technorati
 
View Comments

Posted in tutto

 
« Older Entries