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
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.
53 Commenti
evvai Julius! un altra fantastica risorsa!
grazie!
Mitico Julius!!!
Sei un maestro!!!
Non finirò mai di ringraziarti…
grande :)
Maestro……..mi sapresti dire come modificare la dimensione dell’immagine esplosa :) grazie grazie grazie
@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
grazie Julius anche solo della risposta
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?
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…
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…
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…
Ma sai che non ricordo la tua mail riguardante una collaborazione?
Purtroppo ne ricevo tante e scusami se non ricordo…
Non ti preoccupare, è normale, te la rimando subito…
appena inviata alla tua casella di gmail
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
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!
ops… scusate x la 1° riga commentata… sorry!!! (era un momento di sfogo!)
auhauh bellissima la lascio per i posteri :) e bravo per condividere i tuoi esperimenti…
argh, no ‘tte prego!! :P :P :P
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…
Ziociro grazie per le info. Io però vorrei definire le dimensioni dell’immagine espansa dopo il clik sulla miniatura , e non al rollover.
grazie cmq
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!!
‘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!!!
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…
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
grazie Lucbord
dopo provo e ti faccio sapere
Mau75
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!
Nessuno è in grado di dirmi dove agire per modificare le dimensioni della thumb eplosa?
Grazie anticipatamente
Mau75
@michele penso sia un problema di percorsi leggi qui _lockroot: a cosa serve? Come funziona?
@Mau75 leggi sopra il commento di LUCBORD
Secondo voi è possibile ricreare quell’effetto di mouseover con un javascript?
si si potrebbe fare chissà se c’è qualcosa sul web…
a me assomiglia anche all’effetto Lightbox mm forse no… ^_^
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..
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.
Julius facendo come suggerisce Lucbord si ottengonon solo delle variazioni della posizione del thumb..non della dimensione dell’esploso..
Magnifica galleria, l’ho utilizzata sul mio sito… http://www.imaginepaolo.com
Grazie
Non riesco ad aprire il fla, potreste mandarmelo via email? Grazie infinite…
Ciao,dovrei fare 2 modifiche a questa galleria. La prima è tradurre la voce “return” in italiano,quando si preme su una thumb e si vuole ritornare all’inizio.
La seconda cosa che vorrei fare è inserire un link all’interno della descrizione,al momento il link lo posso mettere sull’immagine,io invece vorrei poter scrivere nella descrizione sito:www.google.it
Ciao
C’è nessuno che mi sa dire cosa devo fare per modificare seguendo le necessità scritte nel post precedente???
grazie
return mi pare che sia scritto da codice nel file progetto, altrimenti lo trovi nel file .as
per inserire un link sulle immagini ti basta inserire un nuovo parametro nel file XML ad esempio link_url
a questo punto da codice Actionscript richiami il nuovo parametro seguendo il codice che gia trovi per gli altri parametri
Dopo di chè puoi creare un pulsante trasparente che verrà utilizzato tramite funzione getURL al link dinamico prelevato dal file esterno XML
Ciao Julius,grazie per la risposta,
ho cercato nel file progetto,ma non riesco a trovarlo,per quanto riguarda i file .as di return ce ne sono una marea e non trovo quello che cerco.
Ho trovato una riga che potrebbe essere quella,ma nonostante abbia modificato retourn in ritorno non è cambiato niente. Ho modificato il file PixImages.as alla riga dove c’è scritto rtxt.text = “(ritorno)”;
Per quanto riguarda la possibilità di aggiungere un link…avrei bisogno di una spiegazione passo passo,perchè di AS ne sò veramente ma veramente poco.
Mi puoi dire in che file devo fare le modifiche e come???
Grazie
per cambiare return file PixImages.as linea 51
rtxt.text = "(ritorno)";ricordati di salvare il file as e prova il progetto
per l’inserimento della descrizione appena ho tempo ti faccio un esempio
Grazie Julius, allora aspetto un tuo esempio…
Ciao ciao
Ciao Julius,
volevo sapere se era possibile assgnare a questa galleria due diverse foto.
Una al thumbnail, e l’altra all’esploso.
Grazie
probabile si dovrebbe cambiare un po il codice ma penso di si…
magari poi ci do uno sguardo
Hello Julius!
My name is Felipe and I speak of Brazil.
I am with problems for configure the size of the thumb extended, where I have the button come back.
Verify the pot’ s here, and not with himself leave the image of the such one 339×500. Hour is the Over and Out that do not work and I still did not I obtain to leave of the size that desire.
I stayed grateful itself will be able to help myself!
I hug.
chi mi sa dire come spostare la posizione delle thumb???
GRAZIE MILLE
Vengono spostate da actionscript…
viene dato un numero di px di spazio tra loro e impostate le colonne…
cerca il nome istanza delle thumb nel codice vedrai i parametri associati al fine di poterle spostare come vuoi…
Grazie mille julius, comunque ci ero riuscito da solo,
ma giacche ci sono ti pongo un altro piccolo quesito
Una volta che si apre l’esplosa, e dopo il rollover, si potrebbe cliccarci sopra ed aprire in un altra finestra,
bene in quale parte di codice dovrei intervenire per eliminare questa funzione???
Non sono un esperto di web, ma grazie hai tuoi consigli e aiuti son riuscito a realizzare questa cosina…
http://www.proficlean.ch/temp/index.html
se ne hai voglia ma sopratutto tempo (Visto e cconsiderato tutto quello che fai) vai a dare un’occhiata!!!
Ciao e grazie!!!
Ciao! Ho letto che qualcuno aveva problemi nell’ingrandire l’immagine esplosa; io ho risolto così:
innanzitutto ho aumentato le dimensioni in pixel del documento .fla per far dì che possa contenere l’immagine esplosa; poi ho aperto il file PixImage.as che si trova nella cartella com/visualcondition e ho agito su questo codice settandolo come segue:
public function expand():Void {
_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*(950/100);
var bh:Number = mask._height*(900/100);
Ho cambiato le ultime due stringhe dando come larghezza 950 e come altezza 900, ma ognuno può assegnare le dimensioni che vuole!A me funziona!
Adesso ho solo il problema di riuscire a centrare l’immagine esplosa che mi si sposta a destra..se qualcuno può darmi una mano gliene sarei grata!
Silvia
Scusate se mi intrometto così….
qualcuno sa se esiste un modo per randomizzare le tumb??
cioè.. ogni volta che carica la pagina.. mi randomizza le posizioni…???
Ciao julius, non è che potresti dirmi dove modificare lo script per avere il link ad una pagina esterna direttamente nelle thumb seza ingrandirle? i miei tentativi per ora sono andati a vuoto…grazie grazie