Pixgal XML Image Gallery

Ho scoperto recentemente il blog di un Flash Designer di nome Andrew Fitzgerald e vi voglio segnalare un suo progetto in fase beta.

Si tratta di una gallleria di immagini opensource basata su Action Script 2 utilizzando Flash8 + XML

pixgal_xml_image_gallery.jpg

La galleria viene strutturata su righe e colonne, una volta selezionata la thumbnail con il relativo nome (l’anteprima dell’immagine), viene “esplosa” visualizzando una descrizione maggiore, sopra le altre che scompariranno in dissolvenza.

E’ stata implementata la possibilità di avere un filtro tra categorie, infatti tramite i pulsanti in alto potremo decidere di visualizzare solo quelli di una specifica categoria.

Analizziamo il file XML:

Configurazione:

<configuration imgbackcolor="0x55a0ff" preloadercolor="0xFCFAF5" rows="3" cols="4" thumbw="160" thumbh="75" border="1" padding="15" oversize="10" expandpos="200" />

  • imgbackcolor: Colore bordo anteprima
  • preloadercolor: Colore preloader
  • rows: Numero di righe
  • cols: Numero di colonne
  • thumbw: Larghezza anteprima
  • thumbh: Altezza anteprima
  • border: Spessore cornice
  • padding: Spazio tra le anteprime
  • oversize: Spessore bordo
  • expandpos: Posizione anteprima esplosa

Inserimento immagne

<image title="Titolo di prova" link="http://" thumb="images/image1.jpg" description="Questa è una descrizione di prova" tags="web" />

  • image title: Titolo immagine
  • link: Percorso di un link esempio htpp://miosito.it
  • thumb: Anteprima immagine
  • description: Descrizione
  • tags: Tag associata all’immagine

In seguito farò qualche implementazione, fino ad allora divertitevi a personalizzare questa fantastica galleria di immagini opensource.

Scarica il sorgente
Guarda il Tutorial

Annunci

35 thoughts on “Pixgal XML Image Gallery

  1. @TUTTI grazie mille 🙂

    @Paolo Ciao non ho avuto tempo ancora di vedere il codice bene, ma penso sia una cosa da impostare da file XML…oppure dai file .as

    appena ho tempo ci darò un occhiata

    ciao

  2. Ciao Julius, l’ennesimo complimento intanto…
    Poi volevo chiederti una cosa, la galleria mi piace molto, ma vorrei adattarla. Praticamente vorrei aggiungere un elenco di clienti e fare in modo che cliccando su ogni cliente si attivi la serie di thumb relativa (per capirci il “risultato” che c’è ora nel tutorial). A grandi linee, come potrei strutturare tutto l’ambaradan?

  3. Di nuovo qua… sei diventato un punto di riferimento! (anche se non mi hai più risposto in merito alla collaborazione di cui t ho accennato x mail! 😥 ma sei incasinato e me l’hai detto!) La gallery al 90% l’ho formattata come desideravo, mi resta solo una cosa. Per caricare dal thumb l’immagine completa nell’swf anzichè nel browser posso procedere “normalmente”, cioè come caricherei da xml? Oppure (idea 2) come gestire le dimensioni del thumb? (x caricare casomai direttamente TUTTO il jpg che mi serve)… intanto grazie…

  4. Ciao si tanto per cambiare sono incasinato…eheh

    Comque penso potresti sia inserire le thumb da file XML che cercare di effettuare un resize delle foto, se non ricordo male questa galleria carica le immagini però diciamo a coordinate (0.0) si dovrebbe vedere se è possibile ridimensionarle nel clip…

    Non ho ancora avuto tempo di analizzare la galleria a pieno…

  5. 1) thumb da xml: quindi “gestisco” quello che nell’xml è “link=”IMG-01.jpg” ” e lo carico in pixgal.fla?
    2) nel clip penso bisogni intervenire sui file .as, in uno dei pix*.as (forse piximage.as. Questa soluzione non mi dispiacerebbe, perchè penso con un po’ di lavoro si riesca a ottenere un simil-lightbox (il sito è tutto in flash). Ma come fare?
    ps: quindi collaboration niente? avremmo già un paio di cose da chiedere…

  6. Ciao Julius, piacerebbe anche a me poter personalizzare questa splendida galleria. In particolare settare
    – la maschera del thumbnail su particolari punti dell’immagine (per es: se l’immagine raffigura una persona nella sua interezza vorrei che nell’anteprima si vedesse solo la testa)
    – dimensioni del thumbnail esploso

    Grazie per la disponibilità
    a presto
    mau75

  7. in piximage.as in questa parte dello script:
    public function expand():Void { // espande il cazzo di thumb???
    _gallery._mode = "expanded";
    var pos:Array = [(_gallery._grid._width/2)-_thumbdim[0], (_gallery._grid._height/2)-_thumbdim[1]];
    var esay:String = 'easeOutQuint';
    var delay1:Number = 0;
    var times:Number = .7;
    var lk:String = this._link;
    var container:MovieClip = this.thumb_mc;
    var mask:MovieClip = this.mask_mc;
    var bw:Number = mask._width*2; //*1
    var bh:Number = mask._height*2;//*2

    *1 incrementa la _xscale con onrollover sul thumb una volta aperto
    *2 incrementa la _yscale con onrollover sul thumb una volta aperto

    …spero possa servire a qualcuno! Però ancora non riesco a rispostare il thumb verso il centro del _mc! Serve solo x l’apertura!

  8. sempre in piximage.as per gestire la x e la y delle thumb cliccandole la prima volta nella griglia:

    var pos:Array = [(_gallery._grid._width/XXXXXX)-_thumbdim[0], (_gallery._grid._height/XXXXXX)-_thumbdim[1]];

    praticamente sostituendo alle “XXXXX” il numero x cui dividere (bisogna provare 1 po’) si modifica la posizione relativa. Penso siano soluzioni un po’ “maccheroniche” (e sicuramente ce ne sono di più “flasher”!) ma x me hanno funzionato bene! E’ da risolvere solo il problema che ingrandito il “thumb” l’area sensibile col rollover resta quella di prima…
    spero sia tutto chiaro…

  9. lo so, così come dici era più “funzionale”, ma sono giorni che sto impazzendo dietro ai vari .as. Vedila così, in questo modo hai il preview + la didascalia e, se vuoi, ingrandisci la thumb al rollover… poi sicuramente si può fare meglio!!

  10. ‘orca l’oca… ho visto ora… non va… sigh e bi-sigh!! non va perchè la coordinata che acquisisce così non è assoluta ma relativa in base alla “row” del thumb, e quindi + in basso è il thumb che clicchi + in basso va… san julius aiutaci tu!!!

  11. Ciao Julius! Intanto ti “avviso” che ti vorrei citare nell’ “inspiration” del futuro sito, spero non ti crei problemi… poi però… non volevo disturbarti di nuovo, ma non so dove sbattere la testa! Ho risolto i problemi x centrare i jpg, riuscendo ad avere un thumb + grande. ora il problema è il preload, perchè caricando tramite getBytesTotal e getBytesLoaded ottengo solo un antiestetico 99% seguito dal mio swf… come ovviare? Ho notato che simulando il DL in locale lui carica già le thumb nel primo frame, nonostante non ci siano, quindi carica tutto già col preload, e non dopo come dovrebbe essere…

  12. Scusate a tutti, anche io sto usando la galleria, per posizionare la thumb ingrandita come volevo ho usato:
    public function expand():Void {
    _gallery._mode = "expanded";
    var pos:Array = [(0)+_thumbdim[0], (20)+_thumbdim[1]];

    e sembra funzionare , cioè dentro le parentesi gli do x e y assolute aggiungendo ovviamente la size della thumb.
    non so se vi sarà utile

    ciao a tutti

  13. Scusate…ma perchè se importo la galleria nel formato swf dentro ad un altro swf utilizzando un mc vuoto e il loadMovie, quando creo il file da flash funziona, ma quando poi lo richiamo in una pag html non si vede più nulla???

    Grasias!

  14. Ciau julius, forse mi sono spiegato male. Non intendo l’effetto zoom al momento del click sull’immagine, ma più semplicemente quell’inspessimento del border quando passo il mouse sopra la thumb.
    Ho cercato tutto ieri, ma non ho trovato nulla che potesse aiutarmi, mannaggia..

  15. Ma se al posto di ingrandire le foto volessi al click mandare a una pagina in blank?? chiedo aiuto perchè è 4 giorni che ci metto le mani sul codice ma non ho risolto molto.

Rispondi

Effettua il login con uno di questi metodi per inviare il tuo commento:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...