Image Gallery

- Letture: 5.565

Ecco un’ottima galleria di immagini sviluppata orizzontalmente sfruttando la classe tween

Questa galleria dinamica in flash è molto semplice da usare, infatti per muoversi da una foto all’altra basterà cliccare su quella successiva e cosi via…

Image Gallery - lewi-p.co.uk

Analizziamo il file xml:

<xml>
<item path="images/newyork.jpg" abstract="This is image 1" />
<item path="images/bridge.jpg" abstract="This is image 2" />
<item path="images/vw.jpg" abstract="This is image 3" />
<item path="images/highway.jpg" abstract="This is image 4" />
</xml>

  • path: Percorso dell’immagine
  • abstract: Descrizione immagine

Questa galleria è molto semplice da utilizzare e facilmente personalizzabile infatti potremo configurare il design a nostro piacimento senza dare limiti alla nostra creatività.

Fonte [Lewis Peel]

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.

110 Commenti

  1. dannybai

    forse ci sono…adesso però mi da’ la scritta “scarica il flash player” e non mi visualizza la galleria. Ho messo il file swf nella root principale insieme al flashobject.is, (seguendo le tue istruzioni) mentre il file xlm insieme alle immagini nella cartella immagini. E’ corretta la procedura?
    Grazie julius!!

  2. la gallery funziona, ma sl se la visualizzo con explorer, su mozzila nn fà, e poi cm si fà ad aumentare la risoluzione delle foto nela galleria senza che escon o dal riquadro..?
    grazie

  3. Ciao Julius!
    ho scaricato il sorgente e ho un piccolo problema: se apro la finestra dell’swf a tutto schermo mi si visualizzano sulla destra 3 rettangoli che corrispondono alle prime 3 immagini della gallery…funzionano come da pulsanti perchè se clicco sopra di esse la gallery scorre…Vorrei eliminarle….come faccio?
    Inoltre: come faccio per posizionare le immagini più in alto nella finestra del browser?in modo che siano piu centrali…

    Grazie mille..

  4. @dannybai ovviamente il file JavaScript è esterno come ben descritto nell’articolo, devi solo poi richiamrlo in HTML

    @noir87 cosa vuol dire “su mozzila nn fà” ci possono essere mille sfaccettature in questa tua frase :)

    @elyy per il posizionamento devi cambiare le coordinate x y del clip in cui vengono caricate

  5. dannybai

    si grazie Julius avevo già risolto!! dovevo solo rinominare il file da htlm a php

  6. Ok, presumo che debba cambiare le coordinate qui:

    // Place Images
    imageHolder._y = (_root.movieH/2)-(imageHeight/2+imageHolder.imageBox0.textBox);
    var xPos:Number = 0, spacer:Number = 40;
    function placeImage() {
    mc = imageHolder.attachMovie(“imageBox”, “imageBox”+loaded, loaded, {_x:xPos, _y:0});
    mc.id = loaded;
    xPos += _root[“image”+loaded].w+spacer;
    _global.loaded++;
    //
    checkLoad();
    }

    Solo, mi puoi dire esattamente dove? (per me l’action script è arabo…scusami…)
    Vorrei che stessero posizionate circa a 100px dall’alto, in modo che anche con una risoluzione bassa l’immagine nn sbordi…

    Mentre per quelle 3 immagini che di vedono sulla destra mi sapete dire qualcosa?

  7. Per quei tre “rettangoli ” ho risolto…caricando on line nn si vedono più…

    Invece rimango in attesa per il posizionamento …

    Grazie mille

  8. Il clip fimato ImageHolder nn lo vedo…forse intendi ImageBox….solo che nella barra delle proprietà non mi compaiono le coordinate x e y da cambiare…:-(

  9. Ciao Julius,
    interessantissima questa galleria perchè oltre che bella è anche molto flessibile..
    Io però vorrei utilizzare le immagini come link a delle finestre in lightwindow soltanto che non essendoci dei veri e propri bottoni ed essendo i links dentro il file xml non so dove andare a mettere il richiamo al javascript della lightwindow… Mi puoi aiutare?
    Grazie e un saluto.

  10. Ciao Giulio, sto ricontrandod ei problemi con questa galleria. te li spiego: praticamente con firefox e safary nessun problema, il problema è (come sempre…)Internet explorer , che spesso fa storie a caricare l’xml, facendo praticamente rimanere l’swf con la scritta loading xml, ma senza mai caricare nulla…idee su cosa possa essere?

  11. Ciao Jiulius la gallery è molto bella ma ho un problema di visualizzazione con le alte risoluzioni.
    Se vai sul sito http://www.mixcomunicazione.it potrai vedere che su safari le immagini si vedono sul movie ma si duplicano anche in alto a destra. Come mai? Puoi aiutarmi?
    grazie

  12. Ciao julius sei un grande.
    Ho un problema non riesco ad aprire il file .fla della versione con il link alle foto.
    Sono un utente mac. uso flashmx
    ti prego aiutami
    Ciao a presto
    Antonio

  13. @elyy: livello Comps clip filmato imageHolder

    @happy: utilizza i richiami al file JS con la versione che trovi nel file .zip image_gallery_link

    @Marco: scrivi un link del progetto online che controllo

    @Roberto: ciao, in pratica quelle sono le immagini che vengono precaricate

    come vedi su livello Action fotogramma 3 linea 13

    mc = attachMovie("preloadImage", "preloadImage"+loaded, loaded, {_x:xPreload, _y:0});

    ti basta aumentare la variabile _y:0 in modo da farle caricare, ma fuori stage

    @Antonio: ciao la versione della gallery è da Flash 8 superiori…

  14. Ciao Julius scusa ma quando cerco di caricare la galleria dentro un mio progetto non si vizualizzano le foto… c’è un modo per non aver questi problemi con la _root??

  15. Francesco

    ciao Julius. sto provando ad inserire la gallery di questo post all’interno di un sito flash caricandola con loadMovie(”image_gallery”,”load_mc”);

    mi da un problema

    il mio filmato main ha un mc_principale che viene centrato con un Listener
    contenente il menu e gli altri elementi del sito

    premendo un bottone contenuto nel mc_principale richiama il loadmovie e carica la gallery che pero non viene visualizzata correttamente.

    il load movie funziona solo se lo inserisco nel fotogramma principale (senza listner)della scena e non in un mc_istanza.

    esiste una soluzione?
    complimenti per il blog

    Ho lo stesso problema segnalato da altri lettori????

  16. Francesco

    ciao Julius la gallery è molto bella solo che se metto lo sfondo bianco mi rimane una cornice nera intorno alle foto che io proprio non vorrei in più dato che lo sfondo dovrebbe essere bianco non riesco a cambiare il colore del testo sotto la foto…. un aiutino??? grazie sei un grande

  17. Francesco

    Ciao julius
    sto mpazzendo aspetto una tua risposta ciao…………grazie

  18. felixyorke

    Ciao julius,
    interessantissimo questo movie.
    ma se volessi inserire dei filmati al posto delle immagini?
    questi filmanti dovrebbero partire quando sono al centro dello stage.
    ho cambiato le immagini con i .swf nel file xml, ma questi filmati non partono…
    potresti darmi una mano?
    Grazie

  19. @felixyorke: e no purtroppo la galleria ora come ora supporta solo immagini…vedrò di fare un implemetazione appena possibile

    @Francesco: in pratica non riesci a caricare la galleria in un altro swf?

  20. ciao, bella galleria, ma e’ possibile inserire un bottone per spostarsi da un immagine all’altra senza per forza doverci cliccare?

    grazie.

  21. ciao, vorrei aggiungere un pulsante “stampa” in modo che al click si apra una popup che stampa l’immagine, ma non riesco a capire dove mettere lo script che serve. qualcuno ha un consiglio o delle dritte da darmi? :-)

  22. ciao Julius
    stavo cercando una galleria proprio come quella che hai messo a disposizione e ti ringrazio.
    e’ semplice e molto carina

    domanda… nel file xml, dopo abstract al posto di “this is image1” ho scritto alcune parole, ma mi tronca la frase apparentemente sui 40 caratteri.
    c’è modo di ampliare la lunghezza della frase?

    grazie mille

  23. Ciao Julius,

    ho già scritto qui sul tuo blog, ma colgo l’occasione per farti di nuovo i miei complimenti, assolutamente UTILISSIMO e tu bravissimo e paziente, GRAZIE!

    Veniamo al mio problema, ho un sito basato sul tuo tutorial “flash all resolution”, ora volevo sapere, come faccio a fare un loadmovie che carichi questa gallery come il “centro” si “flash all resolution”?

    Riesco a caricarla, ho provato anche a cambiare un pò di as, ma ho molti problemi, in pratica vorrei che la gallery, “fluttui” in mezzo, una volta richiamata, proprio come fa il mc_centro del tuo tutorial.

    Puoi darmi una mano?

    In attesa di risposta ti ringrazio e ti auguro una buona giornata. ;-)

  24. Ciao Julius, provo a riscriverti… (Bella la videointervista… eh… lavorare su due monitor è uno spasso vero???)

    Volevo dirti che non riesco a venire a capo del problema che ti ho esposto qui sopra,
    niente da fare, la gallery non rimane centrata in “FLASH ALL RESOLUTION” oppure rimane cetrata solo sull asse verticale
    e non su quello orizzontale, le sto provando tutte, potresti darmi delle dritte? Te ne sarei grato.

    Buon pomeriggio, ;-)

  25. Rieccomi di nuovo,
    provo a farti un riassunto delle operazioni che ho fatto:

    Ho provato ad inserire i fotogrammi e i clip all’ interno di “centro”, ma ho fallito.
    Ho provato a creare un movieclip vuoto in “centro” che richiamasse image_gallery, ma ho fallito.
    Ho provato a richiamare sia dallo stage principale che da “centro” ma ho fallito.
    Ho provato a ridimensionare lo stage di image_gallery, ma niente da fare.

    L’unico risultato ottenuto finora è quello di avere la gallery che rimane centrata con tween come “centro” ma solamente sull’ asse verticale, mentre non vuole saperne di rimanere centrata su quello orizzontale.

    Suggerimenti?

  26. la risposta la trovi qui

    Scrivete sempre sugli articoli relativi al problema e non disperdete le vostre richieste.

    La risposta di aiuto potrebbe disperdersi e non rimanere nell’articolo inerente al problema.

  27. Rieccomi, ciao Julius!!!

    Volevo dirti che io riscontro qualche problema con la gallery image_gallery_link!

    La barretta nera che viene fuori con su le info, in questa gallery non c’è, ma la sto sistemando,
    l’ altro problema è che il link si apre solamente cliccando sull’ infobox che viene fuori, credo che invece le tue intenzioni erano quelle di fare diventare un pulsante link tutta l’immagine… sai dirmi qualcosa a proposito, magari è solo un mio problema di visualizzazione.

    Fammi sapere!!! ;-)

  28. Ho trovato il codice che richiama il link dal textBox.button_link:


    textBox.button_link.onRelease = function() {
    getURL(_root["image"+id].link_url,"_blank");
    };

    Ma in effetti, poi, più sotto non ci sono altri riferimenti al collegamento link dell’immagine!

    Come si può fare?

  29. Ciao Julius,

    ti scrivo di nuovo per aggiornarti sulle mie disavventure…
    ora ho un ulteriore problema… la gallery con i link… non mi mostra più di 8 foto!

    Come mai?

  30. Heilà…
    forse ho scoperto il problema, ma non trovo soluzione!!!

    Allora, siccome necessito di più gallery nel mio sito web, ho creato altre gallery che richiamassero un .xml diverso,
    perciò ho modificato all’ interno della gallery il richiamo all’ xml.

    ESEMPIO:

    xmlData = new XML();
    xmlData.ignoreWhite = true;
    xmlData.onLoad = loadXML;
    xmlFile = "images3.xml";
    xmlData.load(xmlFile);

  31. ciao felixyorke, ho la tua stessa esigenza di caricare degli swf al posto delle immagini in questa gallery, sei riuscito ad ottenere qualcosa?Hai già provato inserendo negli swf esterni da caricare l’actionscript con il percorso “_root” corretto per farlo caricare nel mc “imageHolder” presente nel filmato finale della galleria?potrebbe essere la strada giusta?chiedo anche a te Julius, per il resto i file swf esterni dovrebbero essere visti come delle immagini e quindi dovrebbero essere caricate dinamicamente alla stessa maniera delle .jpg … mi sto sbagliando? …grazie ad entrambi.@felixyorke

  32. ciao di nuovo Julius.
    Sono un neofita e ce l’ho fatta ad inserire la galleria nel mio piccolo sito web.
    Volevo sapere cosa modificare per creare piu gallerie.
    Ho la necessità di caricare n pagine, ognuna con la sua galleria di immagini.
    Perdonami per il linguaggio proprio professionale, ma non ho idea di cosa devo andare a modificare.

    Grazie mille

    d.

  33. @Luca Ciao l’autore di questa gallery non ha inserito la possibilità di inserire swf ma solo file di estensione jpg

    @David Crea diverse gallerie swf per ogni pagina, chiamale in modo diverso in cartelle separate.

  34. @Julius Grazie Julius, ho risolto utilizzando e riadattando la “dynamic_gallery_autore”, lo dico anche a titolo informativo nel caso qualcuno abbia le stesse esigenze!;)

  35. Hei Julius,
    per quel problema poi dei link?
    Cioè che bisogna cliccare per forza la scritta sotto… c’è poi stato rimedio?
    Vorrei rendere cliccabile anche l’immagine, ho smanettato un bel pò modificando l’area “premuto” ma senza risultati soddisfacenti.

  36. Julius ha scritto:

    @David Crea diverse gallerie swf per ogni pagina, chiamale in modo diverso in cartelle separate.

    ciao julius e grazie per la celere risposta.
    come ti scrivevo sono abbastanza novizio della cosa e lo faccio amatorialmente come avrai visto.
    posso chiederti gentilmente di essere piu specifico?
    Quello che ho provato a fare io è creare n file “image_gallery.swf” chiamati per esempio image_gallery1.swf, image_gallery2.swf ecc ecc, aggiornare il file xml con il percorso e il nome corretto delle immagini, e nella riga dello script che fa riferimento al file swf, mettere quello opportuno.

    è questo il modo corretto?
    perchè non sono riuscito a farlo funzionare :-)
    scusami ancora e grazie mille

  37. ciao ancora julius

    ho continuato a fare un pò di prove.
    ho lasciato inalterato il nome dil file .htm.
    ho copiato il file swf, l’xml e anche il mctween all’interno della cartella della singola galleria.
    ho modificato il percorso dello script in modo che andasse a puntare al nuovo percorso, ma non carica niente.
    ho lasciato inalterata la riga:
    param name=”movie” value=”/gallery/allenatore/image_gallery.swf”
    e ho copiato il file xml con un solo percorso immagine modificato con il nuovo path, e il file .swf nella root.
    la galleria parte ma carica, ovviamente, solo la prima foto.
    se mi sono spiegato male, ti prego guarda questo percorso

    http://www.boxeroburscandicci.it/gallery-allenatore.htm

    grazie per l’aiuto

  38. Caro julius, complimenti per il tuo controllo veramente bello, ti volevo chiedre come si fa a impostare com eimmagine iniziale non la prima ma la seconda o la terza?

    grazie

  39. Ciao Julius,
    Grazie e complimenti per questa ottima gallery.
    Vorrei chiederti una cosa, è possibile aumentare il numero dei caratteri disponibili per la descrizione dell’immagine?

  40. Francesco

    Ciao, ma se io volessi caricare dei moviClip con loadMovieNum come potrei fare?

  41. Ciao Julius,
    ho inserito la tua gallery in un sito fatto in percentuale,
    le immagini che richiamo sono JPG di buona qualità.
    Le foto si sgranano un po’ ridimensionando il browser, c’è un modo per evitare questo problema?

    grazie
    tea ;)

  42. Ciao a tutti, il problema della smussatura/qualità immagini in percentuale si risolve con “allow smoothing”, dalla libreria basta selezionare l’opzione sulle immagini importate, ma in questo caso che le immagini vengono richiamate dal file xml come si fa? grazie a chiunque possa aiutarmi!

    tea

  43. Ciao a tutti, cercando un po’ nella rete forse ho trovato una strada: aggiungere un parametro nel codice del FLA, il problema è che non capisco dove metterlo?

    Qualcuno può aiutarmi?

    Grazie!
    tea

  44. @Giuseppe
    “Ciao a tutti … ma come si cambiano i colori dei box?”

    Nella libreria trovi un clipMovie “borderMC” dove modifichi il colore del box. Per il testo c’è “textBox”.

    Per il problema delle immagini sgranate con il sito in percentuale (vd. post precendenti) qualcuno ha una soluzione?

    grazie!
    tea

  45. Ciao Julius! sono completamente bloccato su un punto.
    Ho un menu’ “Accordion Style” con tre link che ho sbloccato con il Root per andare alla timeline, questi sono:

    1) Siti
    2)Foto
    3)Grafica

    Ho utilizzato questa “gallery” per ogniuna delle 3 voci, e quindi ho creato 9 fotogrammi, dove nel secondo di ogniuno ho dato il path per l’XML corrispondente, solo che al click ad esempio di “FOTO” mi riapre ancora le immagini collegate a “siti” e idem “grafica” mi apre ancora le foto di “Siti”…
    Ho cambiato il nome alle etichette, pensando fosse principalmente quello il problema, visto che l’Output mi diceva ATTENZIONE, SCENDA DUPLICATA, invece niente…anche rinominando le etichette mi apre sempre l’XML si SITI….cosa devo fare?? help me please!
    Andrea ’86

Commenti