[CSS/JS/XHTML] LightBox Blogger Problemi

l3n

[CSS/JS/XHTML] LightBox Blogger Problemi

Salve. Dopo una letta dei topics riguardo lightbox, ecc.. non ho trovato nula in merito a ciò che cerco pertanto apro questo topic.

Inizio così: Ho un'immagine auto-resized visualizzata con lightbox in FireFox. Stessa cosa con Chrome, e l'immagine è diversa. Ovviamente conosco le differenze cross-browser che intercorrono, però devo risolvere queste differenze, in quanto in FF ne viene affetta la qualità dell'immagine mentre nella seconda no (anche se in firefox il caricamento e i movimenti della pagina sono più veloci, mentre in chrome no, comunque una cosa per volta...).

Premettendo che per avere la lihgtbox in blogger, basta solo cliccare un pulsante in impostazioni, dato che l'immagine, una volta cliccato sulla thumbnail era in dimensioni originali, e quindi dovevi spostare sempre le scroll bar pezzo per pezzo (una tortura), ho modificato il codice o sovrapposto da qualche parte (e questo è un problema perchè non ricordo dove, poi posterò il codice intero così mi aiutate a capire), e ora quando clicco, l'immagine viene ridimensionata in automatico in base allo screen del browser quindi ora è perfetto, anche se vorrei aggiungere comunque un tasto "Full Size" (aiutatemi anche qui per favore). Solo che nel ridimensionare l'immagine, in Firefox l'immagine diventa sfocata mentre in chrome la scala perfettamente e niente viene sgranato, è perfetta. Ora, vorrei capire come risolvere questo inconveniente in FF, dato che viene talmente sgranata che non si posso leggere le parole e questo è un problema!
Ecco alcune immagini con:

FireFox

img191.imageshack.us/img191/2460/44813943.jpg

Chrome

img189.imageshack.us/img189/985/39597893.jpg

E' come se con chrome, se rallentassimo il tempo mentre fa il resize, l'immagine è sfocata come in ff, ma all'ultimo gli sgranamenti scompaiono e si vede bene, mentre in ff, stessa cosa, ma all'ultimo è come se rimane bloccata al 99% dell'operazione e rimane sfocata.

Provato in vari modi e dimensioni ed il risultato non cambia. Inoltre non penso sia direttamente collegato alla lightbox, ma proprio al metodo di visualizzazione delle immagini di firefox che differisce da chrome nelle immagini ridimensionate al di sotto della loro attuale risoluzione, dato che ho provato anche con immagini simili e senza lightbox, quindi ci vorrebbe un codice più preciso e specifico esclusivamente per firefox.

Inoltre altro problema occorso recentemente, questa volta penso legato alla lghtbox, compare in firefox nelle immagini mostrate in lightbox, un bordo rosso intorno alle immagini di quelle mostrate, ma a random, mentre in chrome no, che cos'è? Come le tolgo?
Ecco l'esempio:

FireFox

img822.imageshack.us/img822/2834/ff2dq.jpg

Chrome

img191.imageshack.us/img191/4262/ch2l.jpg

Help!

Questo è tutto il codice del blog compreso di widget:

pastebin.com/C4h57Yij

Quindi, le cose che vi chiedo di aiutarmi sono queste in ordine di importanza:

Risolvere il problema di sfocamento in Firefox delle immagini, dovute al resize automatico, mentre in chrome il tutto lavora perfettamente.
Bordo rosso in immagini a random solo su FF su chrome no mostrate in lightbox.
Come inserire un tasto "Full Size" vicino all'immagine ridimensionata visualizzata in lighttbox.
Aiutatemi a ricordare ed ad indicarmi, dove ho inserito e che codice ho inserito (guardando il codice del blog completo che ho postato sopra) per il resize automatico allo screen del browser quando clicco sulla lightbox di un'immagine.
Problema di lentezza nei movimenti e nei caricamenti della pagina con le immagini ridimensionate (avviene solo su chrome)! FIXATO

E questo è tutto, lo so che sono tante cose, vedete quelle dove potete aiutarmi, e grazie in anticipo. Ah, dato che è un anno e passa, non vi preoccupate di dare risposta troppo distanti da questo messaggio. Dato che è una cosa a lungo termine. Comunque ovviamente prima sistemo prima risolvo! Grazie ancora, ciao.

Ah, e se avete bisogno di altre info per aiutarmi, ecc.. chiedete e ve le fornirò!

Ok. Sembra che sia riuscito da solo a risolvere il problema della lentezza nei caricamenti su chrome. Erano i thumbnails, ne ho messi direttamente delle dimensioni piccole, senza aspettare il ridimensionamento automatico del browser in base ai valori forzati html di width e height, e sembra funzionare.

Il problema dei bordi rossi che compaiono a random su alcune immagini aperte in lightbox su firefox, se devo essere sincero, non ne ho proprio la più pallida idea di cosa sia dovuto, l'unica cosa che penso è che bisogni specificare in modo più preciso nel codice questa sottigliezza, dato che in chrome non compare, sarà sicuramente dovuto ad una sintassi che necessita un po' più di pignoleria, ma comunque non riesco ad individuare il codice in questione.

Il problema dello sfocamento delle immagini in FF (Punto che mi preme più di tutti), è troppo difficile e non ci riesco proprio.

Il codice di autoresize, non lo trovo neanche.

L'unica cosa che adesso, invece, sto cercando di fare, e che sembra l'unica fattibile nelle mie capacità, è quella dell'inserimento di un tasto full size per l'immagine in lightbox, ma non è per niente semplice come al solito, dato che su blogger, non ho i 3 soliti files di lightbox di .css .js ecc.., quindi mi risulta alquanto difficile il tutto anche se trovassi la soluzione...

Come sempre aspetto il vostro valido aiuto, voi che siete più esperti di me!

EDIT: Quando metto la spunta in "Impostazioni" su Blogger per attivare la lightbox, credo che comunque ci siano i tre files .css e .js ecc.. di una lightbox predefinita per tutti gli utilizzatori di blogspot che la attivano, sapete i links di questi, così da poter leggere il codice ed andarlo a sovrascriverlo (sia css che js) con il comando "!important" nel codice personale del mio blog? Perchè sembra che abbia trovato il modo per aggiungere il tasto full size, ma, dato che devo modificare delle righe di js e di css, il css posso sovrascriverlo con "!important", ma per il js non so come fare per sovrascriverlo e non so se "!important" funziona con il js, penso di no, oppure basta che lo scrivo nel mio codice del blog e si sovrascrive automaticamente?? Non penso, però... Help...

RE-EDIT: Ok, ho trovato i files da dove attinge per la lightbox blogger

rilwis.googlecode.com/svn/trunk/blogger/lightbox.js

rilwis.googlecode.com/svn/trunk/blogger/lightbox.css

Li ho scritti per chi interessassero, comunque a me interessano solo questi due, adesso dato che so come sovrascrivere il css, mi rimane da scoprire come sovrascrivere un determinato pezzo di codice del file .js e poi dovrei riuscire ad inserire il tasto full size.

EDIT3: Niente, il codice in js è troppo diverso, per il codice che volevo inserire, anche se trovassi un modo per sovrascriverlo, non saprei dove inserirlo... Devo cambiare strategia.. Sempre in attesa di aiuti.

EDIT4: Ecco il codice per il tasto full-size.

pastebin.com/xZgX5UNW

Il problema è che il codice del file lightbox.js a cui devo sostituire è diverso dal lightbox.js di blogger, quindi non so come (?) implementarlo e dove (?). Il css so come (comando "!important") implementarlo e dove (basta che lo inserisco nell'head nello spazio per i css nel "modifica html" del blog, quello dove c'è la sorgente di tutto per capirci), invece. Il problema è questo javascript, aiuto ragazzi!

EDIT5: Sembra che per il tasto per il full screen non riesca a trovare nulla, nè a capirci. Help.
Adesso come adesso ho studiato il fatto dello sfocamento delle immagini in FF, e da quanto ho capito, dipende dall'algoritmo di image scaling utilizzato dal browser in sè, in questo caso mozilla, che è buono per le immagini upsized, ma non per le downsized, cioè quello che mi serve a me, perchè per le downsized il migliore è il bicubic, ma a quanto pare, anche nelle css di firefox per l'image-rendering, non è previsto tale attributo che permetta questo algoritmo, mentre in chrome per esempio si, come anche in ie. Insomma, è un bug di FF bello e buono, quindi... non so se avete vie alternative per aggirare ciò.

Per i bordi rossi in FF intorno alle immagini sempre alto mare.

Ah, un'altra cosa. Forse il codice che ho inserito per l'autoresize dell'immagine in base alla risoluzione dello screen del browser con cui viene aperta l'immagine in lightbox, è collegato con la risoluzione dello sfocamento dell'immagine, dato che forse utilizza uno specifico algoritmo per fare il downsize, forse posso sfruttare il medesimo nel migliorare i particolari e la sharpness. Quindi rinnovo la mia richiesta di aiuto di dove diavolo ho piazzato quel pezzo di codice che mi permette questo auto resize in lightbox delle immagini. Grazie ancora per l'attenzione. Saluti.

l3n

EDIT6: Sembra che i bordi rossi intorno le images, compaiono solo nella versione 13 di Firefox. Nella 14 e nella 15 no, quindi, non so se sia poi così rilevante la sua soluzione. Diciamo comunque che l'obiettivo primario è il rendere nitide le immagini downsized.

Adesso come adesso sto utilizzando vari servizi online come browserstack, browsershots, ecc.. per analizzare perfettamente le differenze tra i vari browser/os e determinarne i problemi e quindi fare le dovute correzioni per un perfetto cross-browsing del blog. Attendo come sempre aiuto dai specialisti.

l3n

Mi sembra di aver scoperto, se non ho sbagliato nulla, che l'autoresize delle immagini non è dato da qualche script che ho inserito io, ma è già di default nel lightbox di blogger. Credevo davvero di averlo fatto io, ma vabbè, quindi, adesso come adesso, però rimane il fatto che mi serve creare un pulsante/bottone nella lightbox a fianco all'immagine resized che se ci clicco, l'immagine viene zoomata alla sua reale dimensione, e che andando avanti si continui a visualizzare le immagini così in full size, finche non si ri-clicca sul pulsante per ritornare alla modalità resized. Qualcuno, in grado di aiutarmi con questa cosa? Grazie.

Quindi, riassumendo, adesso le cose che chiedo aiuto sono queste:

Risolvere il problema di sfocamento in Firefox delle immagini, dovute al resize automatico, mentre in chrome il tutto lavora perfettamente.
Come inserire un tasto "Full Size" vicino all'immagine ridimensionata visualizzata in lighttbox.

Aiutatemi con il tasto full size per ora, dato che per lo sfocamento la cosa è mooooolto complicata.

l3n

EDIT: A quanto pare, l'unico problema riguardo il downsizing dell'immagine, avviene solo sui firefox per OS Windows, i firefox per gli altri os non hanno di questo problema, quindi, ho deciso di eliminare anche questa richiesta, dato che come priorità, adesso come adesso, anche se la qualità del downsizing dell'immagine è perfetta, non c'è la certezza che si riesca a leggere le scritte delle immagini, perchè troppo piccole, rinnovo la mia richiesta di aiuto unicamente sull'inserimento del pulsante fullsize. Grazie ancora!

E chiedo gentilmente se qualche moderatore può unire i messaggi, altrimenti troppo caos! Grazie!

l3n

Rettifica dei links js e css della lightbox di blogger, quelli di prima erano sbagliati:

blogger.com/static/v1/jsbin/3375576448-lbx.js

blogger.com/static/v1/v-css/228702327-lightbox_bundle.css

Questi sono giusti!

Adesso come adesso, sarei in grado di aggiungere il tasto fullsize (solo css), ma se lo clicchi, non funziona perchè devo creare il javascript per la funzione, e non so come implementarlo in base al codice del file già esistente, lo sto studiando per capire come fare, se avete idee a chi è esperto in javascript... sono ben accette!