Galleria immagini flash: Slide Gallery XML

- Letture: 16.119

Ecco una nuova galleria di immagini in flash implementata dal sottoscritto, l’ho chiamata Slide Gallery XML in quanto le immagini vengono visualizzate con un effetto lightbox in orizzontale come delle slide.

Slide Gallery XML: Galleria di immagini in slide

Le immagini vengono prelevate da un file esterno XML, e tramite uno scroll orizzontale è possibile scorrerre tra le varie immagini, cliccandoci sopra avremo la possibilità di visualizzare le immagini con un effetto lightbox

Andiamo a vedere insieme come configurare il file XML:

<xml>
<folder>
<image img='lost_01.jpg' w='314' h='400' link='images/lost_01.jpg' />
</folder>
</xml>

  • img: link relativo (julius.jpg) o assoluto (http://www.dominio.it/julius.jpg) dell’immagine
  • w: larghezza
  • h: altezza
  • link: link relativo (julius.jpg) o assoluto (http://www.dominio.it/julius.jpg) dell’immagine da aprire in Lightbox

In seguito verranno realizzate altre implementazioni aggiuntive.

Scarica il sorgente
Guarda il Tutorial

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

252 Commenti

  1. Brachetto

    Ciao Julius, ottima gallery!
    Volevo chiederti un aiuto…ho correttamento caricato la galleria in un sito flash ridimensionandola..solo che mentre la barra di scorrimento sono riuscito a ridurla, le foto scorrono lungo tutta la lunghezza dello stage e non solo nell’area dove teoricamente devono stare…help!

  2. @Brachetto: è una questione di gestire la maschera..

    entra nel progetto .fla è modifica le dimensioni della maschera per adattarla al tuo sito

  3. ciao Julius,vorrei caricare la gallery come swf esterno all’interno della pagina di un sito flash.Il sito è realizzato con actionscript 3.Ci potrebbero essere problemi di visualizzazione? e nel caso come potrei risolverli…sono abbastanza nuova in as3 e sto avendo delle difficoltà.
    grazie mille!

  4. Ciao Julius ho una domanda per questo tipo di galleria, in pratica vorrei sapere se era possibile eliminare l’effetto L.Box e quindi non far più diventare cliccabili le foto, praticamente rendere il tutto una semplice galleria a scorrimento…è possibile?

    Su quale parte del codice dovrei intervenire??

    Grazie in anticipo
    Luigi

  5. Julius scusami ho risolto non mi ero accorto che già avevi risposto al quesito in un post precedente.

    Grazie
    Luigi :D

  6. ciao, bella galelry, ma -accidenti- io se pubblico un filmato flash in versione superiore alla 6 non mi vanno i javascript nel getURL, onde per cui il lightbox me lo sogno. E sepubblico il filmato in versione 6 non riesco ad importarlo nel filmato principale. Idee????

  7. Hi .
    Thank You Very much Julius !
    I was so wanted like this xml gallery .. I Love this
    I’m in S.KOREA so far ~

    I need fix some source … because Need more very Quick move(with slide bar)images
    I Don’t know Your source very well … How Can I ….
    Help me Please ..
    which part of the code should I fix? which part of the code controll that ?

  8. Ciao Julius,
    innanzitutto complimenti per la galleria che è fantastica.
    Ho pero un problma. Carico il filmato slide_gallery_xml.swf, da un altro swf in questo modo

    gallery.onPress=function(){image_mcl.addListener(mclListener);image_mcl.loadClip(“slide_gallery_xml.swf”, image_mc);image_mc._x = -297;image_mc._y = 150;}

    Il problema che ho è che vedo solo la “scritta Slide Gallery” e Loading, ma la slide scorrevole non appare? Mi aiuteresti per favore? Sono alle prime armi…primissime direi. Grazie!

  9. ciao julius, sei un grande! io sono 1 principiante sto usando after effects da un paio di giorni e devo dire che nn mi riesce nulla è difficilissimo…..sono appassionato del settore editing nn è che potresti aiutarmi?

  10. semplicemente favolosa!
    spippolo con flash da solo un paio di mesi…mi diverto un sacco , non lo nego, mi si è aperto un mondo!
    ora sto finendo il mio sito, ho voglia di tornare a disegnare su carta, ed ero un pò arenato su una sezione in particolare.Poi ho visto la tua slide e son rimasto folgorato: grazie. Non solo per darmi modo di lavorare su dell’ottimo materiale, ma anche per l’apertura mentale e la disponibiltà che si respira tra le tue pagine.
    Se mai potrò….ti devo un favore.
    pus

  11. Ciao Giuliu e complimenti per il tutorial…era quello che mi serviva.
    Una domanda: se volessi una miniatura che scrolla e il lightbox big, come devo muovermi in xml?, sempre che sia possibile.
    Es: le mie miniature dentro la cartella “small” e le img grandi dentro la cartella “big”.

    grazie in anticipo

  12. @Nyoman: il lightbox viene lanciato richiamando la stessa imamgine

    Ovviemente per avere un’immagine big devi inserire un’altra variabile con la stessa logica dell’immagine che presente ora, da associare al file XML e da richiamare in AS

  13. Ciao Julis, ottimo blog, ottima slide gallery, che volevo adattare per la mia home page. Ho letto tutti gli interventi ma non sono sicuro dove intervenire. La mia necessità è ridimesionare il filmato e adattarlo al mio sito. Quali sono tutti i passaggi e dove devo intervenire? per adattarlo perfettamente. Vorrei fare un lavoro molto simile a questo di un ragazzo che tempo fa ti chiese delucidazioni. http://www.cultrera.com/fotografia.html

    Grazie tsante Julius; vai forte!

  14. Ciao, ottimo tutorial…
    solo che non riesco a visualizzare, quando apro con l’internet explorer la trasparenza dell’immagine che dovrebbe oscurare il fondo ; con mozilla funziona correttamente…: mi spiego meglio; clicco sull’immagine da selezionare e si apre correttamente al centro dello schermo; ma lo sfondo intorno in IE non si scurisce, resta tutto visibile. In mozilla questo non accade. qualche indicazione?
    posso postare il codice?

  15. Piccolo prolema.
    Ho linkato alle miniature alle corrispondenti foto più grandi.
    Molte hanno una dimensione di circa 1200×1800. QUando clicco su una miniatura si apre in lightbox la immagine grande, ma posso solo scendere per vedere l’immagine dalla metà alla base. Non vedo la parte seuperiore della immagine. e’ possibile ovviare a questo problema?
    Grazie

  16. Grande Galleria! Mi chiedevo se fosse possibile eliminare la barra e sostituire lo scroll col solo mouse.
    Grazie

  17. Ciao Julius,
    ho provato a modificare la tua galleria traformadola da 980×560 in un documento di 850×440 (ma non è esattamente la dimensione che ho bisogno per la galleria.
    Ti spiego…

    ho un file swf e ho bisogno, sul rollover di alcuni pulsanti di far caricare la galleria in un secondo livello…dato che dovrà cambiare ad ogni pulsante.

    Quindi io nel file 850×440, ho spostato e ridimesionato gli oggetti in modo che ci stiano in uno spazio di 448×375.

    Seguento le istruzioni che ho trovato ho spostato la barra di scorrimento e tramite codice ho ridotto il numero da 100 a 40 in modo che ci stia nel mio spazio.
    Ho ridotto anche la maschera all’interno della quale si vedranno le immagini.

    Non ho modificato nient’altro (a parte aver tolto il click sull’immagine).

    Sorgono 2 problemi:
    1-nella galleria non vedo le prime due immagini e nemmeno l’ultima.
    2-quando clicco in diversi punti sulla barra di scorrimento, (e non la sposto) si scombina tutto.

    Altra domanda: si può togliere la manina sulle immagini?io ho solo bisogno di visualizzare così come sono.

    Ti ringrazio e spero in una tua risposta al più presto!
    Ciao mitico!grazie mille

    Ps.se vuoi puoi vedere l’esempio: http://www.ronchigioielli.it/galleria

  18. @alethai: vedo cosa riesco a fare…purtroppo essendo sempre incasinato mi è difficile fare implementazioni aggiuntive in questo momento

    @Manuela: rimuovi la manina semplicemente eliminando la funzione getURL per quanto riguarda le dimensioni devi cambiare i parametri dello slide in proporzione della larghezza

  19. Ciao Julius, volevo dirti che nel link che ti ho messo devi andare sopra il logo bliss e si apre a destra la galleria!

    La funzione getURL da dove la rimuovo?nel codice?dove? premetto che di codice non ci capisco…

    quindi se la mia galleria deve stare in un riquadro di 448×375 devo mettere al posto di 990 che c’è adesso nel codice, 448?…io ho provato…ma non cambia nullla…
    è dovuto a questo che quando clicchi sulla barra di scorrimento senza trascinarla si sfasa tutto?

    GRAZIE…

  20. Ciao Julius, te lo hanno già chiesto, ma non ho trovato soluzione. C’è un modo per far scorrere le immagini automaticamente senza fermarsi mai?
    Grazie J

  21. ciao Julius, mi sai dare qualche indicazione in proposito a quello che ti ho scritto sopra?…please!!
    ti ringrazio!
    thanks

  22. Ciao Julius,
    ti ringrazio per la risposta!

    1-Ho rimosso il “geturl” nella riga da te indicata, ma la manina c’è lo stesso! come mai?

    2-Se la mia galleria deve stare in un riquadro di 448×375 devo mettere al posto di 990 che c’è adesso nel codice, 448?…io ho provato…ma non cambia nullla…
    è dovuto a questo che quando clicchi sulla barra di scorrimento senza trascinarla si sfasa tutto?

    3-Le prime immagini non le vedevo; ho risolto aggiungedo immagini vuote sia all’inizio che alla fine; ma il mio problema ora è quello del punto 2:

    CLICCANDO sulla barra di scorrimento delle immagini, appare invece della posizione giusta il bianco…come mai?

    ti rimetto l’url (avevi saltato forse un passaggio):
    http://www.ronchigioielli.it/galleria

    POI PASSA SOPRA AL MARCHIO BLISS e si aprirà sulla destra la galleria!

    Ti prego risolvimi questo problema che sto impazzendo!
    Ti ringrazio!

    Buona Domenica!

  23. ciao Julius! sono davvero contento di aver trovato questo blog e di poter usufruire dei tuoi lavori.. solo che sono davvero alle prime armi su flash e non so quasi niente sui codici di as..
    ho provato a modificare l’effetto di gallery, ma ho un problema: quando richiamo le immagini (diverse dalle tue) mi si posizionano tutte in modo errato.. distanziate tra loro in modo casuale.. come posso modificare il posizionalemnto delle immagini? dove devo cercare nel codice?
    t ringrazio anticipatamente julius! a presto!

  24. @Manuela: non vedo la gallery…non è presente..magar mandami una mail che risolviamo ;)

    @Andrea: ciao nel file XML esterno trovi i percordi da modificare per le tue immagini

  25. Ciao Julius, complimenti per la gallery.
    Sto provando ad usarla ma dovrei inserire 28 immagini, solo che nonostante la giusta impostazione del file xml la barra di scorrimento arriva in fondo quando sono alla 14° immagine. Devo aumentare il parametro 990 nel fotogramma 2? e cos’altro?
    Grazie per l’interessamento

  26. ciao julius! ho risolto facendo una cosa stupidamente semplice.. ho riletto i commenti precedenti!!! :D grazie per la pazienza che hai nel darci le tue perle di saggezza!^_^

  27. Risolto!!… trovati errori di sintassi nel file xml, grande julius gallery perfetta!!

  28. beppe ha scritto:

    Piccolo prolema.

    Ho linkato alle miniature alle corrispondenti foto più grandi.

    ciao beppe,
    potresti dirmi abbastanza dettagliatamente come hai fatto?
    julius, puoi aiutarmi? ho letto tutte le pagine dei commenti, ma non capisco cosa fare.

  29. Ciao Julius
    Complimenti ancora x la 2000esima volta! Sei un genioo!! Questa gallery è una boombaaa!!!

    Ma ho un problema che ho provato a risolvere leggendo i vecchi post ma niente!!!
    SONO DISPERATO!!!! Ovvero… non riesco a far caricare le immagini del file xml
    una volta che lo importo l’swf in un file contenitore.

    Ho provato con “_lockroot” ma niente, continua a non caricarmi il file xml.
    La cosa strana è che in locale funziona ma quando la importo
    mi da “Errore file di apertura “…/percorso”.xml”.

    – Nella _root principale ho il mio contenitore “cnt_gl”
    – in _root.bg.bt_1 è contenuto il bottone che richiama l’swf esterno
    – sul bottone ho inserito:

    on (release) {
    loadMovie(“prove/1/slide_gallery_xml.swf”, _root.cnt_gl);
    _root.cnt_gl._lockroot = true;
    play();
    }

    SBAGLIO qualche passaggio?? mi sono dimenticato di inserire qualcosa??
    TI PREGO aiutamiiiii!!!

    Ti ringrazio in anticipoo

  30. ps.
    ….Ho provato anche con “_level0” invece che con “_root” ma niente lo stesso!!!:(((((
    Ti prego aiutamiii!!!

    Aspetto tue notizie

    Ciao Ivan

  31. Ravenlord

    Vorrei sapere dov’è che si definisce il link al file “images.xml”. Se ho più di una slide_gallery, vorrei definirgli un xml per ognuna di esse.

    Grazie in anticipo

  32. Ciao Julius,
    la tua galleria é perfettamente quello che mi serviva per un mio progetto ma purtroppo… l’ effetto lightbox non mi sta funzionando! Sia localmente che sul server. Come mai?

    Quando la testo le foto non aprono niente. Ho anche provato a mettere su solo i tuoi file, ma nisba.
    Sto usando Safari 4 (beta) e Firefox 2.0.0.7 e stessa roba.

    Hai idea del perché?

    Grazie.
    Matteo

  33. ciao Julius,
    ho trovato questa gallery che mi piace moltissimo, complimenti davvero!
    non sono espertissima di flash, perciò faccio fatica a trovare soluzioni per i problemi che riscontro…
    volevo sapere se è possibile linkare le immagini della gallery ad un’altro swf.
    ovvero cliccando sulla foto vorrei che si collegasse ad un altro file flash che ho già preparato che contiene spiegazioni sulla foto e altro.
    si può fare? come?
    ti ringraziooo!!!
    e.

  34. Ciao Julius,
    complimenti per la gallery, veramente bella e funzionale.
    Ti scrivo in quanto, ho modificato dimensioni stage e file xml, solo che una volta pubblicata la pagina l’effetto lightbox non funziona. Ho controllato la il codice all’interno della pagina Html ed anche tutte i file js sono all’interno della cartella. Da cosa dipende??

    Grazie
    ciao.

  35. Giannetto

    Salve,

    ho scaricato questo ottimo movie, ma adesso ti faccio una domanda, come faccio a ridimensionare il movie es: 400 px in larghezza e 150 in altezza…
    non ci capisco niente.. eh eh

    Magari se hai tempo, rispondimi.

    Grazie.

  36. Ciao Julius,
    Bellissima gallery! Per caso c’è un parametro per gestire la dimensioni degli spazi fra un’immagine e l’altra?

  37. Già risolto!
    Si regola direttamente modificando la larghezza delle immagini nel file XML.

  38. Filippetto

    Ciao Julius, complimenti per il tuo sito e per la gallery.
    Io avrei un problema che di seguito ti riporto sperando che potrai eventualmente fornirmi la soluzione.
    PROBLEMA:
    tutta la gallery viene richiamata come swf esterno da un pulsante del sito all’interno di un mc contentore (istanziato come “contenitore”).
    Il problema è che appare la scritta “loading” ma dopo che scompare non carica nulla…
    Sarà dovuto ai percorsi?
    Ciao e grazie anticipatamente.

  39. ho inserito la gallery nel mio sito, tutta via si trova all’interno di un frame.
    quindi se clicco un’immagine per aprire la lightbox essa si apre all’interno del frame.

    come posso farla aprire a tutto schermo??

    e possibile?

    ho provato a cercare una soluzione in as o javascript ma nulla.

    grazie in anticipo

  40. Sbaglio o il preload è una finta?
    Nel senso che che non carica gli effettivi byte del filmato e delle immagini collegate… :-(
    C’è un modo per inserire un preload realmente funzionante?

Commenti