Lanciare prettyphoto da flash

Prettyphoto è uno dei plugin JQUERY nati dalle glorie del super noto lightBox che uso più volentieri quando ho la necessità di aprire finestre e visulizzarvi contenuti che vanno dalle immagini a codice html.

Dalla versione 2.5 sono disponibili delle API attraverso le quali, fra le altre cose, eseguire prettyphoto da flash.

Questa la documentazione


Ho appena sperimentato questa possibilità da un sito flash con uno slideshow che apre contenuti differenti, da immagini a video, e riporto qui la mia esperienza.




La scelta di prettyphoto è stata dettata dal fatto che lo usavo già, e che avevo l'esigenza di aprire contenuti non solo di immagini.

Ho controllato un pò in giro, e qualche altra possibilità da esplorare probabilmente c'era anche, una su tutte, a mio avviso, il nyroModal ( http://nyromodal.nyrodev.com/ ).

Secondo quanto riportato nella documentazione di prettyphoto, è possibile lanciare da flash o da qualunque altra fonte che non sia un tag < a >, quindi ad esempio da un evento o da una funzione specifica, il metodo open. I parametri accettati sono:


- Il nome del file

- il titolo

- la descrizione

Quindi, ricotruendo la sintassi del metodo tradizionale su di un tag < a >, praticamente passeremmo alla funzione open i parametri corrispondenti a:

- href

- attributo title del tqag a

- attributo alt del tag img


Dopo aver installato il plugin come si fa di solito ( vedi documnetazione ) sarà sufficiente, dal nostro bottone flash, eseguire la seguente azione:

my_btn.onRelease=function (){

getURL("javascript:$.prettyPhoto.open('"+this.zoom+"')");

}


dove this.zoom è il nome del file da aprire.

Sedcondo questa logica si potrà passare alla funzione open anche il parametro del titolo e della descrizione (opzionali)

E fin qui tutto ok, funziona, è anche facile, volendo si possono passare altri eventi, come quelli per cambiare immagine o per chiudere la finestra.

E se fosse solo per questo tipo di approccio non avrei neanche scritto il post a dire il vero! Basta leggere quanto riportato nel sito.

I problemi che ho incontrato sono stati quelli relativi alla implementazione di una gallery sempre da comando esterno (da flash).

Se dovessimo utilizzare il tag a, sarebbe sufficiente aggiungere l'attributo "rel" con l'identificatore "prettyphoto[nome gruppo]"

In flash, nelle API si da la possibilità di passare, invece che le 3 stringhe al metodo open:

- file

- titolo

- descrizione,

la bellezza di 3 array.


Banalizzando, in flash avremmo:

var arrayImgs:Array=new Array('pippo.jpg', 'pluto.jpg', 'paperino.jpg');
var arrayTitolo:Array=new Array('A', 'B', 'C');
var arrayDesc:Array=new Array('ciao', 'kkkk', '');

e al metodo open la passeremmo in questo modo:

getURL("javascript:$.prettyPhoto.open('"+arrayImgs+"','"+arrayTitolo+"','"+arrayDesc+"')");

bello no?

Sì, peccato che non funziona! :)

Secondo quanto ho potuto sperimentare "sul campo", ci sono due cose da sistemare:

1 - se clicchiamo sulla nostra miniatura per aprire la zoom ci troveremo questo alert: "Image cannot be loaded. Make sure the path is correct and image exist"

2 - Ok, ma io sto passando un array, chi gli dice al mio bel plugin quale foto aprire e quindi quali sono le immagini che si aprirebbero con i comandi next e back? Perchè il mio array verrà letto dall'indice zero ogni volta, la funzione open non mi risulta che accetti un id numerico per rimaneggiare gli array e ricomporre una lista con ordinamento dipendente dall'id della miniatura che ho cliccato!


SOLUZIONE AL PUNTO 1: PERCHE' NON MI TROVA LE IMMAGINI?

se usiamo il getURL per passare i dati al metodo open, in realtà non passeremo degli array di dati, bensì delle stringhe di dati (es. "i.jpg,2.jpg,3.jpg" etc....), chiaro che non trova + le immagini!

Come ho ovviato:

invece di chiamare da flash il metodo open, chiamo una funzione che sta nell'header della pagina html simile a questa:

function passMeFiles(a,b,c){


aa = a.split(",");
bb = b.split(",");
cc = c.split(",");

$.prettyPhoto.open(aa,bb,cc);

}

Così facendo trasformiamo le stringhe in array, e i dati arrivano correttamente.


SOLUZIONE AL PUNTO 2 : COME FACCIO AD APRIRE LA GALLERY PARTENDO DALLA IMMAGINE CHE HO CLICCATO?

- Ho creato una funzione in flash che riordina un array secondo un indice:

function reorderArray(newIndex:Number, ar:Array):Array{

var tmpar:Array=new Array()
tmpar=ar

var newAr:Array=new Array();

//creo un array a partire dall'indice

var dxAr:Array=new Array();
dxAr=tmpar.slice(newIndex, tmpar.length);

//creo un array da 0 all'indice

var sxAr:Array=new Array();
sxAr=tmpar.slice(0, newIndex);


//ricreo il nuovo array

newAr=dxAr.concat(sxAr);



return newAr;




}


- supponendo di avere i dati memorizzati in 3 array di nome:

immaginiPrettyPhoto
titlePrettyPhoto
descPrettyPhoto

il mio click sul bottone diventa:

myBtn.onRelease=function(){

var images:Array=reorderArray(this.idBtn,immaginiPrettyPhoto);

var titless:Array=reorderArray(this.idBtn,titlePrettyPhoto)

var descs:Array=reorderArray(this.idBtn,descPrettyPhoto)


getURL("javascript:passMeFiles('"+images+"','"+titless+"','"+descs+"')");

}



Questo è quanto, funziona, se ho tempo faccio anche uno zip di esempio!