Galleria immagini flash: Slide Gallery XML

- Letture: 16.082

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. AL posto dell’evento linghtbox scatenato dalla funzione getURL puoi cambiare il tutto è utilizzare un loadMovie

  2. Julius..non ci crederai ma non funziona!
    mi sono intestardita! io vorrei che al clic sul mio bottone “progetti” si aprisse la pagina costituita da uno sfondo 800×600 con i bottoni di navigazione e dentro ad esso senza bisogno di cliccare vedere apparire le foto dei progetti (ovvero la tua galleria).
    Invece accade questo:
    clicco su progetti
    si apre regolarmente la mia pagina
    si caricano i bottoni con le dovute dissolvenze…fin qui tutto ok…
    poi ….pum! la tua galleria appare in una pagina a perte come un pop up!
    perchè?? sono proprio imbranatella….

  3. Ciao Julius… da Giulio.
    la tua galleria è davvero interessante quindi pensavo di usarla per un mio sito.
    ho letto sopra, ma non ci capisco molto.
    io vorrei solo ridimensionare il file swf, ovvero, inserirlo in un iframe che di dimensione fa 760×457.
    se lo scalo da html viene un pastroccio… come fo?

    grazie

  4. Sai, mi piacerebbe moltissimo studiare come creare gallerie.. per questo motivo chiedo a Julius se gentilmente può indicarmi un buon libro, o tutorial o simile che aiuti a buttarsi nella realizzazione di gallerie in flash. In pratica qualcosa che spieghi nel dettaglio come realizzare un file sorgente. Sarebbe utilissimo!
    grazie infinite!
    bb

  5. Federico

    Ciao julius complimenti per la gallery,

    una domanda ma il numero di foto da inserire nel file xml è limitato ?
    ne ho messe 21 ma ne ne vede solo 18

  6. è illimitato controlla bene di aver scritto il file XML in modo corretto

    Se il problema persiste scrivimi il link al tuo progetto online che lo guardo

  7. Ciao Julius,
    ho già utilizzato e direi con ottimi risultati la dockgallery (solo che al cliente non andava bene, uff) ed ora devo utilizzare questa. Velocemente ti dico che ho circa 30 immagini da 50 KB l’una e sarebbe carino mentre si attende, avere un piccolo preload sotto ad ogni spazio immagine. E’ possibile farlo? E se si c’è una movieclip che contiene ogni singola immagine.
    Grazie anticipatamente
    Alessandro

  8. ciao Julius, al sito http://www.cultrera.com puoi vedere che ho utilizzato la gallery ottimizzata sulle mie esigenze e come tutto è andato alla grande. Vorrei solo risolvere una piccola cosa: le immagini non dovrebbero linkare a nulla, non dovrebbero essere attive e la freccetta dovrebbe rimanere freccetta (e non manina). Come faccio? Ho già capito cosa eliminare per evitare il link ma ma manina resta.

    Grazie.

  9. Ho scoperto il tuo blog e sono rimasto estasiato da tanta generosità.
    In un mondo in cui danno un prezzo a tutto, il tuo contributo non ha prezzo.

    Ti ringrazio dal profondo del cuore e mi dispiace di non poter fare di più per ricompensare il tuo lavoro.

    Anzi, un link te lo meriti ( è poco, ma apprezza il gesto ).

  10. sono sicuro che così funzioni, ma….. dove deve inserirlo? :-)

    ti ho linkato anch’io tra gli amici! te lo mariti.

    ciao

  11. Ciao,
    stiamo utilizzando la tua gallery, ti chiedo quanto sia difficile modificare lo scorrimento per far diventare la gallery sliding?
    Bellissimo blog

    Saluti
    Contedracma

  12. Ti faccio una cascata di complimenti: per la chiarezza del sito, per la sua utilità, per la bellezza leggendaria dei tutorial e per condividere il sorgente.
    Una delle cose migliori del web!

    Grazie

  13. @Fidelo ciao si ho visto!

    fotogramma 2 elimina la funazione onRelease che inizia da linea 65 fino alla chiusura della graffa

    _root.container_mc["th_"+nextImg].onRelease = function() {
    this.link = _root.images_xml.firstChild.firstChild.childNodes[this.i].attributes.link;
    //getURL(this.link,"_blank");
    getURL("javascript:flashLightbox('"+this.link+"');");
    // end else if
    };

    @Contedracma ciao grazie

    non è stata implementata una funzione di slideshow, vedo appena ho tempo di inserirla comunque dovresti intervenire sulla variabile di slide che ora è riferita al pulsante attivabile da mouse

    @Krest Grazie davvero!

  14. aldrin vacunawa

    Mga hayop kyo hindi ko kyo maintindihan. your good but I cnt understand your language. buts its ok I just want to say that your works are nice and perfect just contenue doing it.

  15. Ciao, ottimo lavoro, ma si può implementare uno scorrimento automatico delle immagini?
    Se si cosa andrebbe modificato, il file xml o il .fla.
    Grazie.

  16. ottima galleria davvero . io pero’ ho un problema, non riesco ad implementare l’effetto lightbox.ho letto i tuoi post e’ o capito che la riga da sostituire e la seguente:
    getURL(“javascript:flashLightbox(‘”+this.link+”‘);”);

    ma con che altra linea di codice la sostituisco?
    puoi farmi l’esmpio rivolta all’immagine 1 della carella images??

  17. Ciao, uso due dei tuoi tutorial combinati.
    Faccio caricare da “flash_all_resolution” la gallery “slide_gallery”.

    Utilizzo un movieclip (nome istanza “esterno”) dentro centro: loadMovie(“slide_gallery_xml.swf”,_root.centro.esterno);

    Il file della gallery viene caricato ma si ferma al 4° fotogramma non facendo caricare il resto del fimato, consigli?

    GRAZIE!

  18. Ciao Julius,
    ho notato che il problema inizia quando metto tutto il contenuto di “slide_gallery” in un movieclip.

    Mi sai dire il perchè? grazie

  19. ciao julius complimenti per i tuoi lavori e la tua generosità, io credo che questo tuo modo di fare sia il migliore per farsi conoscere nel web appena finirò il sito il primo link che inserirò sarà sicuramente il tuo visto che te lo meriti.
    Ti pongo un quesito: ho usato la tua galleri modificandola e adattandola al mio sito, l’ho ridotta quasi all’osso ho tolto anche il Lightbox, per quello che mi serviva ogni volta che si cliccava sopra doveva aprire la sez gallery e non l’anteprima della foto, il problema è che devo caricare la gallery nel sito tramite un iframe da html esterno con gallery attaccata sopra, perchè appena provo a inserire direttamente nella home page la gallery, (caricandola come oggetto flash) mi fa il preload e dopo non vedo lo scorrimento con la barra per avanzare. per questo ho dovuto disabilitare anche il target delle miniature per l’apertura della sez gallery, altrimenti come già sai mi si apriva la nuova pagina all’interno dell’iframe, sai come risolvere il problema? grazie anticipatamente.

    Ps sarebbe possibile avere i file della tua gallery smagriti di tutto quello che riguarda il lightbox cosi minimizzo il contenuto da inserire nella cartella root del mio sito, grazie ancora. ciao

  20. LoZioMao

    Ciao Julius, ottima slide gallery.
    Ti chiedo come posso risolvere questo problemino. Ho ridimensionato lo stage ma anche le misure delle immagini della slide cambiando e diminuendo i valori del file xml. Ora accade che il rollover this._alpha=90; impostato alla riga 67, causa un leggera apparizione dell’immagine a fianco, (10% di trasparenza appunto) sporcando di fatto il rollover dell’immagine selezionata. Come potrei risolvere? E’ possibile semplicemente usare un altro tipo di rollover che non sia l’effetto alpha?

    Grazie.
    LoZioMao

  21. @rino ciao

    vedendo la galleria mi sembra che le dimensioni siano forzate da HTML..

    Devi aprire la galleria dal file sorgente .FLA e ridimensionare il tutto

    La galleria esegue delle istruzioni dalla larghezza dello stage impostato a 900 circa…se forzi le dimensioni la galleria eseguirà le funzioni sempre su 900 e non la larghezza con cui l’hai forzata

    @LoZioMao in teoria l’alpha viene impostato sulle immagini, quindi se le hai ridimensionate non dovrebbe crearti quel problema…

    sei sicuro di non aver toccato altro?

  22. LoZioMao

    Ciao Jiulus,
    non ho ridimensionato di fatto le immagini, ma solo le loro misure nel file xml, in modo tale di avere una specie di miniature nella slide e l’immagine in dimensione originale nella lightbox (dopo il click).

  23. Ciao Julius,
    ho provato la tua Slide Gallery xml che è bellissima ma ho un piccolo problema che non riesco a risolvere.
    Ho ridotto il tutto alle dimensioni del documento a 650 x 400.
    Ho inserito le mie foto nella cartella images con dimensioni 650 x 300.
    Ho ridotto la “root.slider.line” sulla riga 60 da 100 a 65.
    Ora però non so come ridurre le dimensioni dell’istanza “ruler_mc” che mi esce dal quadro e oltretutto non vedo pienamente l’ultima foto.
    Ho letto di tutto sul tuo blog ma non riesco a sistemarlo.
    Inoltre per le mie esigenze lo dovrei vedere direttamente, e senza cliccare bottoni, in una pagina precisa di un’altro swf all’interno del quale ho fatto un box come tuo suggerimento.
    Ma non funziona.
    Mi potresti aiutare?
    Sono alle prime armi con flash e con nessuna conoscenza di ActionScript, ma molto accanito nella realizzazione di un sito.
    Spero di avere presto tue notizie.
    Ciao

  24. @miro

    hai creato il clip contenitore di nome istanza box?

    A questo punto andiamo a intercettare la pressione del mouse sulle immagini

    Dovresti trovare una funzione release o released

    li dovrai inserire un codice simile a

    loadMovie(image,_root.box);

  25. Ciao Julius,
    il contenitore istanziato box l’ho costruito ma come clip filmato, perciò dandogli l’istruzione che indichi tu mi da errore perchè è un’istruzione per pulsanti.

  26. Ciao Julius,
    sono stato un po’ affrettato nella prima risposta.
    Non avevo capito che dovevo sostituire il tuo riferimento “image” con il mio “Galleria.swf”. Ora l’ho fatto ma quando ci clicco sopra invece di partire il nuovo swf chiamato “Galleria” all’interno e nella pagina del mio swf primario, mi fa ripartire dall’inizio il mio swf primario.
    Cerco di spiegarti meglio con un esempio:
    Il box che richiama “Galleria.swf” è all’interno di “file1.swf” al frame “262”
    cliccandoci riparte “file1.swf” dal frame “1”.
    Spero di essermi spiegato.
    Grazie

  27. ciao, complimenti per la galleria!!

    sto cercando di attaccare alle foto una didascalia testuale presa dall’xml,
    ma non riesco a individuare il punto nell’actionscript dove inserirla.

    Ho visto che c’è un cliclo che crea il clip finale…
    E’ possibile attaccare lì un campo di testo dinamico?

    grazie!!

  28. Hello Julius,

    I have a Problem with the preloader of the gallery, when the images are loading the preloader is not showing, then while the image are loading we have a black screen until appears, you have an idea about. Thanks in advance.

  29. ciao julius ho una domanda da farti….
    Sono riuscito a ridimensionare la gallery in base allo stage e alle mie esigenze (760X180)
    Ma nn ho capito perke mi sgrana le foto.
    Le foto le ho impostate 314X180 e sono 10.
    Non ho capito cosa mi sfugge.
    Oltre a sgranarle non riesco a capire perche nn le riesco a vedere tutte MI DAI UN HELP!?
    ecco il link….

    http://www.ican-design.it/gallery/slide_gallery.htm

    Grazie in anticipo.

  30. si nota subito che la dimensione indicata nell’xml è diversa da quella nel fla…
    se le miniature sono più gtandi di 314×180 vengono ridimensionate e possono sgranare.
    se non appaiono tutte c’è un’errore nell’xml…

  31. @marcus:
    e come le stabilisco nel fla? cmq le dimensioni delle immagini coincidono cn quelle dell’ xml…

  32. Ciao, mi sono espresso male:
    Controlla, nel fla, la lunghezza TOTALE del clip.
    Deve essere la somma delle lunghezze singole: se è inferiore non ti visualizza tutte le immagini…
    Inoltre controlla la variabile “spacer”, che è lo spazio tra le varie immagini.

  33. in ogni caso, per farti aiutare, è meglio se metti da qualche parte fla e xml…. altrimenti andiamo a tentoni pure noi :D

  34. Ciao Julius..

    è possibile aggiungere una descrizione nella lightbox prelevandola dal file xml?

    Grazie mille!!!!!!

  35. alefuxia

    ciao Julius
    avrei bisogno di un tuo consiglio… ho una galleria img già realizzata che devo modificare per adattarla al lavoro che sto seguendo; avrei bisogno di sapere se c’è un modo per ridimenzionare il tutto velocemente,per farlo rientrare nello spazio che ho a disposizione. grazie

  36. MADenigma

    Ciao Julius, ottima sorgente, grazie per la tua generosità.

    Ho una piccola domanda da fare, posso aggiungere due frecce una a destra per fare lo scroll à destra e un’altra a sinistra per lo scroll a sinistra ?

    Se questo è possibile puoi aiutarmi mostrandomi come fare ?

    Grazie mille

  37. Ciao Julius,
    sei veramente forte. Ti volevo chiedere come si fa a spostare la barra in fondo per spostare le immagini. Io dato che ho delle immagini più piccole ho ridimensionato tutto però la barra per scorrerle mi rimane nella posizione iniziale.
    Cia grande

  38. Tutto ok ho trovato.

    Adesso però ho messo i file nel sito e facendo eseguire il tutto le immagini non vengono caricate. Non trova le immagini, eppure mi sembra di aver messo tutte le cose al loro posto

  39. ciao Julius,
    complimenti per la galleria, la sto implementando al mio sito…!
    sfortunatamente è sorto un problema che non riesco a risolvere (partiamo dal presupposto che sono alle prime armi in questo campo)…avrei la necessità di inserire 3 gallerie nella stessa pagina, ognuna con tipologie di immagini differenti; ho creato file xml e cartelle immagini per ogni tipologia, es. “esterni.xml” e cartella relativa “esterni” poi ho sostituito dallo script (nel fotogramma 2 e 3) tutte le parole “images” con “esterni”ma quando vado a pubblicare l’swf mi dice che c’è un errore di percorso..e le immagini non vengono caricate, come posso risolvere?!
    grazie

Commenti