PDA

Visualizza versione completa : Modifica visualizzatore di immagini javascript e css



dRyW
06-09-12, 10: 18
Salve,

Sto tentando di modificare questo (http://dryw.altervista.org/ilcontadinobio/home.html)

come potrete vedere le immagini vengono visualizzate soltanto in meta dello spazio, questo perchè smanettando il codice css sono riustito a beccare il valore di larghezza (camera_fakeover -> whidt raddoppiato) che mi interessava.
Adesso sto cercando disperatamente un altro valore che mi faccia estendere la visualizzazione delle immagini a tutto lo spazio.
Sono incappato in camera_targhet ed ho scoperto che cambiando l'altezza questa cambia rispettivamete nelle immagini visualizzate quindi pensavo di essere a cavallo perchè modificando anche la larghezza del doppio avrei praticamente sincronizzato il tutto ma niente....

Non vorrei che sia qualcosa dipendente da javascript..

Spero mi possiate dare una mano...

Di seguito il codice css del menù


Only registered members can view code.


Grazie

Andy86
06-09-12, 14: 22
:bai

Purtroppo quando il codice non è ben commentato non resta altro da fare che andare per prove.
Però le devi fare tu, perché la parte che hai postato, da sola, ovviamente, non funziona.

Ti consiglio di provare tutti i valori height che vedi, c'è ne praticamente uno per ogni valore width che hai segnato, e magari prova ad aggiungerne uno qui:


Only registered members can view code.

Il nome sembra promettente. :ghgh
ps: comunque non riesco ad associare ciò che hai descritto a ciò che vedo nel link... :m:

Asterix
06-09-12, 14: 52
Io sono propenso ad una forzatura nello script che ad un lavoro di css

Ci puoi indicare da dove hai scaricato lo script per lo slide.

:thx

:bai

dRyW
06-09-12, 15: 11
Nel link dovresti vedere il layout di un menu dove si susseguono delle immagini con vari metodi di interpolazione, originariamente il menu era largo quanto le foto che vengono visualizzate.

Sono riuscito ad allargarlo del doppio (camera_fakeover -> width) e francamente pensavo che le immagini si sarebbero disposte automaticamente. Quando ciò ovviamente nn è successo sono andato a cercare il parametro che lo consentisse trovando camera_targhet il cui tag height risponde perfettamente alle mie aspettative e cioè modifica l'altezza fino a fare visualizzare l'immagine per intero uscendo completamente dai bordi ma a me non interessa dato che non è l'altezza che voglio modificare bensì la larghezza in modo da riempire lo spazio rimasto vuoto a cusa del raddoppio. Ma il corrispettivo parametro width di camera_targhet non funge forse perchè l'immagine viene già visualizzata per la sua interà larghezza quando invece questo non avviene per l'altezza.

C'è qualche parametro che blocca la larghezza relativa o non so l'adattamento dell'immagine alla larghezza del frame, facendo visualizzare l'immagine come se camera_fakeover -> width fosse ancora al 100%

Scaricato da qui (http://www.html.it/script/una-galleria-di-immagini-con-il-plugin-camera-slideshow/)

Asterix
06-09-12, 16: 07
Ci puoi riportare anche il codice della tua pagina html :thx

nell'esempio fornito con lo script vedo che agendo su questo css presente nel file html si agisce sulla dimensione


Only registered members can view PHP Code.

Vediamo il tuo html

:bai

dRyW
06-09-12, 18: 32
Si dimenticavo di aver fatto anche li delle modifiche:


Only registered members can view code.

Questo è uno screenshot

2182

Se non si fosse capito vorrei accostare questo menu al logo del sito (spazio vuoto a sinistra) il tutto intabellato in un migliaio di px.

Asterix
06-09-12, 19: 34
Mi posti l'intero html in questo modo vediamo tutto il codice.

:thx

:bai

dRyW
06-09-12, 20: 12
non credo ci sia altro codice utile nell'html ad ogni modo:

Only registered members can view code.

Asterix
06-09-12, 20: 53
Ciao

al codice che hai postato manca un div di chiusura prima del </td>


Only registered members can view PHP Code.

Io sistemerei anche il resto del codice, ad es. lo stile se usi i file anche i richiami all'interno dell'html andrebbero fuori ad es.

:bai

dRyW
07-09-12, 09: 54
Quali sarebbero i richiami all'interno dell'html? Attualmente mi sono limitato a soltanto a caricare il codice necessario al funzionamento dei menu.

Ad ogni modo controllando mi sembra che i div di chiusura prima del /td debbano essere 3 e non 4, ma questo non risolve il mio problema :triste

Asterix
07-09-12, 13: 32
Io con il codice fornito da te e lo script scaricato funziona a questo punto hai altri css tu.

Passa tutti i file della pagina in modo tale da vedere.

Questo è un css all'interno del file html che a mio avviso andrebbe fuori.


Only registered members can view PHP Code.

le chiusure div fatte sono per queste aperture


Only registered members can view PHP Code.

:bai

dRyW
07-09-12, 14: 30
Quando dici che ti funziona intendi che qualunque valore in % immetti in dimensionamento le immagini vengo sempre visualizzate per tutta la grandezza del menù?

Per i div avevi ragione..

Cosa dovrei fare per uscirlo fuori, io l'ho messo dentro poichè ho copiato tutto dalla pagina 'demo' contenuta insieme al resto dei componenti scaricati.

Asterix
07-09-12, 18: 04
questo è quanto vedo con ff, naturalmente il menù non è corretto in quanto mi manca un tuo css

http://images.collectiontricks.it/images/23910546979607344702.png

:bai

dRyW
07-09-12, 19: 35
Non ti preoccupare per l'altro menù..

Perfetto, finchè andiamo a modificare i parametri in fluid_continer il menu si comporta benissimo mantenedo tutte le sue funzioni invarite, ma hai provato a volerlo più stretto e lungo? Con fluid_continer's width non risolvi, come avrai già visto modificando il parametro il menu cambia sia in larghezza che in altezza.

Adesso a me serve in larghezza come avrai visto nello screenshot. Come ho già detto vorrei merrete il menu a sinistra a mo di banner e il logo a destra. Cosa ho fatto? Ho impostato fluid_continer's width al 40% perchè così facendo il menu assumeva l'altezza da me desiderata (dato che non è possibile impostarla non essendoci height in fluid_continer) quindi sono andato a ricercare l'altro parametro che potesse modificarlo veramente in larghezza e come ho detto è camera_fakeover's width che raddoppiato rende il tutto quasi perfetto se non fosse per questo assurdo problema che non riadatta le immagini lasciandole della dimensione iniziale (infatti sempre nello screenshot l'immagine che vedi non ha subito variazioni considerando nullo ogni attributo width da 100% in su).

Sto cercando di individuare l'istruzione tale per cui l'immagine non si ridimensiona, ma ci deve essere per forza! Mi sono accorto che l'immagine viene caricata e visualizzata al massimo della larghezza mentre l'altezza è relativa ai bordi e come dicevo può essere modificata da camera_targhet's height (sfasando e fuoriuscendo dai dordi). Adesso io sono abbastanza certo che l'attributo width in quest ultima sezione sia quello coretto cioè quello che regola la variazione in larghezza ma non funziona perchè ci sarà un istruzione che lo bypassa ed impone la visualizzazione dell' l'immagine adattata in larghezza e fissa al valore non superiore al width 100% in camera_fakeover o altri attributi di larghezza in altre sezioni. Il problema è che io ho già provato ad aumentarli tutti con la speranza di beccare quello giusto...

Non ci credo che non esiste l'istruzione per allargare quelle caspita di immagini..

Asterix
08-09-12, 08: 59
Ciao

allora lo script esegue una proporzione in base alla larghezza impostata, tu puoi agire su questa proporzione per fare cio' devi:

variare questa stringa nel file html in modo tale da cambiare lo script con cui lavori

da


Only registered members can view PHP Code.

a


Only registered members can view PHP Code.

poi vai nella cartella script e apri il file camera.js con notepad++ ad esempio

tra le prime righe trovi height : '50%' se lo metti a 25 ti si stringe in verticale

prova a giocare con quelle variabili.

:bai

dRyW
08-09-12, 13: 30
FUNZIONA!! :ehmm :glu

Avevo perso le speranze, il mio è un ringraziamento ai limiti della riconoscenza:sisi GRAZIE!!

Se posso ci sarebbero altri piccoli accorgimenti che vorrei chiedere tra cui il più urgente: hai per caso intravisto da dove cambiare queste anteprime?

2183

Dato che non cambiano con il caricamento dell'immagine..

Asterix
08-09-12, 13: 46
Prova a vedere se è questa istruzione a richiamarla


Only registered members can view HTML code.

data-thumb

:bai

dRyW
08-09-12, 14: 22
Ok risolto, non mi ero accorto ci fosse una cartella separata per le anteprime.

Che dire, sei stato di immenso aiuto..

Al prossimo intoppo :bai