|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
La Gallery è veramente molto versatile e, Guardando la DEMO, offre molte possibilità di personalizzazione:
(forse troppe per un INESPERTO come me)
Quindi ho proprio bisogno di una guida su "Dove mettere le mani" visto che il contenuto della cartella è molto articolato:
(c)jquery.fancybox-1.3.4
-ajax.txt
-index.html
-jquery-1.4.3.min.js
-style.css
(c)fancybox
-"vari pulsanti" .png+
-jquery.easing-1.3.pack.js
-jquery.fancybox-1.3.4.js
-jquery.fancybox-1.3.4.pack.js
-jquery.mousewheel-3.0.4.pack.js
-jquery.fancybox-1.3.4.css
+(c)artella example
con le immagini dimoostrative.
Poiché ho notato che anche nel primo file:(jquery.easing-1.3.pack.js)
c'è un pezzo di codice
e bisognerà inserire anche il Disclaimer degli autori, Suppongo..
Cosa si deve "copiare/incollare"?
e dove?
- - - - - -
Mi rendo conto che potreste anche "Quotarmi":
Uè Ciccio,se sei messo così Cercati qualcosa di più semplice !
Però, come recita il titolo del 3ad, questa
è un'ottima Gallery
perciò "La si vuole.."
Grazie in anticipo per l'assistenza.
Ciao
|
|
|
|
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Archimede, abbi pazienza... Bisogna che tu dica che cosa vuoi ottenere! Per esempio: 1) tra le animazioni che accompagnano l'apertura della finestra, vuoi l'effetto fade, elastic o nessuno? 2) la posizione del titolo dell'immagine vuoi che sia esterna, interna o sovrapposta? Comunque, per cominciare è buona norma leggere gli how-to --> http://fancybox.net/howtoarchimede70 ha scritto:Poiché ho notato che anche nel primo file:(jquery.easing-1.3.pack.js)
c'è un pezzo di codice
e bisognerà inserire anche il Disclaimer degli autori, Suppongo..  ??? ??? ??? ??? ???
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
wubullo ha scritto:archimede70 ha scritto:Poiché ho notato che anche nel primo file:(jquery.easing-1.3.pack.js)
c'è un pezzo di codice
e bisognerà inserire anche il Disclaimer degli autori, Suppongo.. ??? ??? ??? ??? ??? Volevo dire:In quel file,quasi in fondo,ci sono numerose righe di codice (che forse non c'entano niente con la gallery...) e poi c'è il testo sulla "paternità dello script...this script is Open-Source...bla bla....norme..bla bla etc." Anche quelle righe,come commenti,vanno copiate/incollate nel proprio listato, per dire: Questo script è stato scritto da....? Comunque,vado a leggere il Link "HOW TO" che hai postato. La domanda sulla visualizzazione: Animazione Foto- il 4 della lista Title position- il 3 della lista Mouse scroll- Si
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
 Scusate, dimenticavo una cosa: E se volessi anche ridisegnare i pulsanti? magari cambiandogli solo colore e (sopratutto) farli .jpg e non .png (che pesano di piu')?
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Poveri pulsanti, ma che t'hanno fatto?
Ciao.
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:Volevo dire:In quel file,quasi in fondo,ci sono numerose righe di codice (che forse non c'entano niente con la gallery...)
e poi c'è il testo sulla "paternità dello script...this script is Open-Source...bla bla....norme..bla bla etc."
Anche quelle righe,come commenti,vanno copiate/incollate nel proprio listato, per dire: Questo script è stato scritto da....?i Non hai bisogno di copiare nessuna parte dello script nel tuo listato: basta linkarlo nell'<head> perché funzioni! Ma di questo parleremo in seguito... archimede70 ha scritto:La domanda sulla visualizzazione:
Animazione Foto- il 4 della lista
Title position- il 3 della lista
Mouse scroll- Si Animazione Foto- il 4 della lista... Ma se sono tre? --> http://fancybox.net/Commenta:Different animations - 'fade', 'elastic' and 'none'
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto: Scusate, dimenticavo una cosa: E se volessi anche ridisegnare i pulsanti? Non facciamo confusione... Dei pulsanti parliamo, se hai ancora delle richieste, nel precedente topic --> Bottoni animati..Con i CSSarchimede70 ha scritto:magari cambiandogli solo colore e (sopratutto) farli .jpg e non .png (che pesano di piu')? Di norma sono i .jpg a pesare più dei .png...
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
wubullo ha scritto:Animazione Foto- il 4 della lista... Ma se sono tre? --> http://fancybox.net/[quote]Different animations - 'fade', 'elastic' and 'none' Nel pacchetto scaricato dal sito,alla voce:"Animation" ci sono 4 foto:: L'ultima a destra (quella con l'ombrello Blu) ...per GaBicce ! - - - - - - - -  Eco, In linea di principio sorrido al tuo commento, (sembra che io ce l'abbia coi pulsanti)Ma il mio sito è Blu e...(scusandomi con gli interisti) i pulsanti Neri ci stanno male. Volevo solo sostituire il colore col mio programma grafico. Ma se ho capito, lo script pesca la struttura dal percorso "madre" ed io,utente finale, devo solo cambiare il percorso delle immagini "pescandole" dalla mia cartella -images- Giusto?
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:Nel pacchetto scaricato dal sito,alla voce:"Animation" ci sono 4 foto::
L'ultima a destra (quella con l'ombrello Blu) ...per GaBicce ! Chiedo venia... Credevo ti riferissi alla pagina ufficiale di Fancybox...  Allora, il mio consiglio è - innanzitutto - di fare un po' di ordine. Io caricherei sul tuo sito una cartella nominata " fancybox" con due sottocartelle, " js" e " css". 1) Dentro alla cartella " js", incolla questi file (li trovi tutti nella cartella che hai scaricato dal sito: il primo nella directory principale, gli altri nella cartella "fancybox"): Commenta:[Contenuto della cartella (facciamo una simulazione) --> http://www.pausacaffepg.it/fancybox/js ] ● jquery-1.4.3.min.js ● jquery.fancybox-1.3.4.pack.js ● jquery.easing-1.3.pack.js ● jquery.mousewheel-3.0.4.pack.js 2) Dentro alla cartella " css", incolla tutte le immagini e il foglio di stile (li trovi tutti nella cartella che hai scaricato dal sito, nella sottocartella "fancybox"): Commenta:[Contenuto della cartella (facciamo una simulazione) --> http://www.pausacaffepg.it/fancybox/css ] ● blank.gif ● fancy_close.png ● fancy_loading.png ● fancy_nav_left.png ● fancy_nav_right.png ● fancy_shadow_e.png ● fancy_shadow_n.png ● fancy_shadow_ne.png ● fancy_shadow_nw.png ● fancy_shadow_s.png ● fancy_shadow_se.png ● fancy_shadow_sw.png ● fancy_shadow_w.png ● fancy_title_left.png ● fancy_title_main.png ● fancy_title_over.png ● fancy_title_right.png ● fancybox.png ● fancybox-x.png ● fancybox-y.png ● jquery.fancybox-1.3.4.css Importantissimo: il file jquery.fancybox-1.3.4.css deve stare obbligatoriamente nella stessa cartella delle immagini!!! Fatto questo, l'unica cosa che ti rimane da fare per ottenere la tua galleria è inserire questo codice prima della chiusura del tag </head>: Code:<script type="text/javascript" src="fancybox/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="fancybox/js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/js/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".gallery").fancybox({
'speedIn' : 500,
'speedOut' : 500,
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none',
'titlePosition' : 'inside',
'easingIn' : 'swing',
});
});
</script> Come vedi, bisogna che tutti gli elementi <a> abbiano come classe "gallery" per far funzionare Fancybox. Se poi vuoi creare delle gallerie separate, aggiungi un medesimo valore "rel" ai gruppi di <a> che vuoi riunire. Per esempio: <a class="gallery" rel="gruppo1" href="img_grande1.jpg" title="Galleria 1, immagine 1"><img src="img_piccola1.jpg" alt="Immagine 1" /></a> <a class="gallery" rel="gruppo1" href="img_grande2.jpg" title="Galleria 1, immagine 2"><img src="img_piccola2.jpg" alt="Immagine 2" /></a> <a class="gallery" rel="gruppo1" href="img_grande3.jpg" title="Galleria 1, immagine 3"><img src="img_piccola3.jpg" alt="Immagine 3" /></a> <a class="gallery" rel="gruppo2" href="img_grande4.jpg" title="Galleria 2, immagine 1"><img src="img_piccola4.jpg" alt="Immagine 4" /></a> <a class="gallery" rel="gruppo2" href="img_grande5.jpg" title="Galleria 2, immagine 2"><img src="img_piccola5.jpg" alt="Immagine 5" /></a> <a class="gallery" rel="gruppo2" href="img_grande6.jpg" title="Galleria 2, immagine 3"><img src="img_piccola6.jpg" alt="Immagine 6" /></a> Ti ricordo - ma questo lo saprai già - che è la stringa "title" ad essere usata da discalia per l'immagine. Alla prossima!
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:Il mio sito è Blu e...(scusandomi con gli interisti)
i pulsanti Neri ci stanno male. Volevo solo sostituire il colore col mio programma grafico. Personalizzare i pulsanti della galleria Fancybox è un po' rischioso... Comunque: 1) per prima cosa, le immagini devono rimanere dei .png (i pulsantini sono sovrapposti ad altri oggetti e hanno uno sfondo trasparente; .jpg non può gestire la trasparenza); 2) ricolorandoli, potresti non ottenere un effetto precisissimo. archimede70 ha scritto:Ma se ho capito, lo script pesca la struttura dal percorso "madre"
ed io,utente finale, devo solo cambiare il percorso delle immagini "pescandole" dalla mia cartella -images- Nel file jquery.fancybox-1.3.4.css è specificato il nome e il percorso delle immagini utilizzate da Fancybox; perché tutto funzioni, file .css e immagini devono trovarsi nella medesima cartella. Se vuoi fare un po' di esperiementi di modifica, io farei una copia (da incollare sempre nella stessa cartella) dei file ● fancy_close.png ● fancy_nav_left.png ● fancy_nav_right.png I file originali li chiami fancy_close-originale.png, fancy_nav_left-originale.png, fancy_nav_right-originale.png, mentre alle copie su cui andrai a lavorare dai il nome fancy_close.png, fancy_nav_left.png, fancy_nav_right.png. In questo modo, non devi modificare il file .css. Alla prossima!
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
Ciao, ho eseguito le tue istruzioni. Però c'è qualcosa che non va: sembra che io abbia inserito soltanto "wubullo" ha scritto:<a class="gallery" rel="gruppo1" href="img_grande1.jpg" title="Galleria 1, immagine 1"><img src="img_piccola1.jpg" alt="Immagine 1" /></a> <a class="gallery" rel="gruppo1" href="img_grande2.jpg" title="Galleria 1, immagine 2"><img src="img_piccola2.jpg" alt="Immagine 2" /></a> Modificando solo il percorso: <a class="gallery" href="fancybox/css/pr1.jpg" title="Prova immagine N.1"><img src="fancybox/css/Ppr1.jpg" alt="Anteprima 1" /></a> <a class="gallery" href="fancybox/css/pr2.jpg" title="Prova immagine N.2, con testo di prova per la lunghezza della didasc..."> <img src="fancybox/css/Ppr1.jpg" alt="Anteprima 2" /></a> perché non c'è alcuna animazione nè i pulsanti della gallery. Quando clicco sui link mi apre l'immagine in un'altra finestra con la lentina d'ingrandimento (un clic=zoom in/un clic=zoom out) Unica cosa che ho personalizzato: Ho messo tutto il codice nel file galleria.htm (non in index.html) e ho messo le mie 2 immagini di prova nella cartella "css"   Ti avevo postato tutto il listato della pagina e....ricontrollando il mio post nell'anteprima mi sono accorto che non avevo chiuso i Tags dei link ai files .js  Tutto bene ora! GRAZIE. Ora devo solo impaginare bene le anteprime (e,quando il fotografo mi porta le foto,rimpiazzare i files) Ciao, a presto.
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Bene così! Se hai qualche altro problema, sai dove trovarmi.
Un consiglio (puramente organizzativo): non mettere le foto da far apparire nella galleria nella cartella di sistema "css", ma crea una cartella apposita. Così eviti di mischiare i file che fanno funzionare la galleria con le immagini da visualizzare al suo interno.
A presto!
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
wubullo ha scritto:Un consiglio (puramente organizzativo): non mettere le foto da far apparire nella galleria nella cartella di sistema "css", ma crea una cartella apposita. Così eviti di mischiare i file che fanno funzionare la galleria con le immagini da visualizzare al suo interno.
A presto! E' un importante ragguaglio, Sospettavo di averti preso troppo in parola quando hai detto di mettere le immagini nella stessa cartella del CSS.... (riguardava solo i .png della Fbox) ......Approfitto dell'ultima cosetta: Volevo ingrandire un po' i caratteri delle didascalìe (ho trafficato un po' sul CSS ma non son riuscito) Come faccio?
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:Sospettavo di averti preso troppo in parola quando hai detto di mettere le immagini nella stessa cartella del CSS.... (riguardava solo i .png della Fbox) Esatto! In realtà non è che non si possa fare... Te lo segnalo solo perché secondo me ti può essere più comodo separare il "contenitore" dal "contenuto"!  archimede70 ha scritto:Volevo ingrandire un po' i caratteri delle didascalìe (ho trafficato un po' sul CSS ma non son riuscito)
Come faccio? Nel foglio di stile di Fancybox ( jquery.fancybox-1.3.4.css, che a questo punto dovrebbe essere nella cartella "fancybox/css"), alla riga 256 e seguenti trovi: Code:#fancybox-title {
font-family: Helvetica;
font-size: 12px;
z-index: 1102;
} aumenta il valore di font-size (non so: 14px o 16px e via discorrendo). Così facendo, ingrandirai il testo della didascalia. Ciao e a presto!
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
Grazie molte...........
Ci sarà uno spazio "RINGRAZIAMENTI" nel sito
e il primo link sarà degli "AIUTAMICI.COM" !
ciao WUBULLO.
|
|
|
Guest |