Zoom immagine

Buonasera a tutti voi,

stasera chiedo gentilmente la vostra collaborazione per riuscire a capire un codice html che permetterebbe lo zoom di una immagine X.

Premetto che vorrei ingrandire un'immagine al passaggio del mouse e che ho trovato quello che farebbe al mio caso; il codice si trova in questo link.

Come potete osservare (lanciando il link) la piccola immagine dei bicchieri, passandoci il mouse, viene ingrandita.

Facendo un copia/incolla del codice che viene segnalato per questa soluzione nel mio portale, non funziona assolutamente!

faccio una verifica anche qui:


purtroppo anche qui l'immagine dei bicchieri non viene zommata, il mouse cambia forma ma non succede niente mentre se apro il link del sito dove c'è il codice l'immagine fa esattamente l'effetto desiderato... eppure un copia/incolla non mi sembra così difficile!

Questo comunque il codice che viene proposto:

Codice:

<div align="center"> <img width="149" height="109" style="cursor: -moz-zoom-in;" src="http://public.blu.livefilestore.com/y1pk4geuMwTW8kVzqWNvJ0LhmsuFw8cQdfEwrD54brZLjzBKc_BePuoN1rJOgQicJVv-OT0iwiEEVUwfIFfs0UGfQ/bicchieri3.jpg" onmouseover="this.width=596;this.height=435;" onmouseout="this.width=149;this.height=109;" title="titolo" alt="testo alternativo" /></div>

Riuscite a spiegarmene il motivo?

Ringraziando per chi riuscirà a risolvermi questo dilemma, saluto.

n.b. = ho già sperimentato quanto proposto in questo tutorial ma non è la soluzione che cerco.

Perdonatemi l'ardire, ma siccome ho cinque post importanti da definire con questa metodologia (e quindi fermi)... gradirei una risposta prima che vi sia possibile.

Nella speranza di leggervi presto, vi ringrazio immensamente per quanto riuscirete a delucidarmi.

Saluti

Buonasera,

nelle ultime 72 ore è passato da qui @Teodor e @VIRTUALDEEJAY, ma nessuno che si sia "degnato" di dirmi qualcosa, neanche un "non so risponderti... mi dispiace!"

Ierisera vi ho accennato che ho cinque post abbastanza complessi in attesa di conferma per il discorso dello zomm immagine.
Adesso sono diventati sei!

A voi le vostre considerazioni, non aggiungo altro.

Grazie.

Ciao, scusa ma non ho capito come mai il tutorial che hai postato non ti va bene, l'effetto non è come il codice HTML?


Saluti
Insane

Buongiorno,

Insane ha scritto:non ho capito come mai il tutorial che hai postato non ti va bene, l'effetto non è come il codice HTML?

@Insane... io invece non ho capito, perchè non hai capito!
Se chiedo spiegazioni sul codice che ho messo vorrà dire che ho "bisogno" di quel codice e non di altre cose come quel tutorial.
Ti ho prerarato lo screen di cosa succede se metto quel codice del tutorial nel mio css:



La parte in alto sono delle immagini pure e semplici che sono presenti nel post senza l'aggiunta del codice del tutorial nel css; potete verificarlo direttamente in questo post.

Poi ho aggiunto il codice del tutorial e le immagini si sono "ristrette" (immagini in basso a sinistra)!
Passando sopra una di quelle potete vedere (in basso a destra) torna come l'originale.

@Insane se, secondo te, devo "adottare" il codice del tutorial con quale coraggio lo vado a mettere!!

Quindi, in ultima analisi, quello del tutorial per me non è indicato per lo scopo che mi sono prefisso e cioè, zommare un'immagine al passaggio del mouse ingrandendola come più mi aggrada o con il codice di quel sito o con altro codice che abbia le  stesse caratteristiche del sito segnalato.

Saluto con l'ultima domanda... perché in quel sito funziona e se copio il codice html nel mio portale non funziona?
Spero con questo di essere stato ulteriormente chiaro.

Avrei da scrivere altre mille cose... ma come al solito mi fermo qui con la mia massima delusione.

Saluti

saxismawe ha scritto:....nelle ultime 72 ore è passato da qui @Teodor e @VIRTUALDEEJAY, ma nessuno che si sia "degnato" di dirmi qualcosa, neanche un "non so risponderti... mi dispiace!".....A voi le vostre considerazioni, non aggiungo altro....

Piccolo O.T. :
Mi degno di dirti: "non so risponderti... mi dispiace!"
(e non aggiungo altro).
Fine O.T.

Bye

Ciao, scusa per il ritardo prova così vai PDA-->Visualizzazione-->Colori-->CSS qui incolla il seguente codice:

Codice:

/*ZOOM*/
.zoom img {
      height: 300px;
      width: 300px;

      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
}

.zoom img:hover {
      width: 400px;
      height: 400px;
}

Ora quando dovrai postare un'immagine che vorrai dare l'effetto che si ingrandisce al passaggio del mouse dovrai mettere questo codice:

Codice:

<div class="zoom pic">
     <img src="link img" alt="titolo">
</div>

Ovviamente potrai modificare il codice CSS con le grandezze che meglio preferisci.

Eccoti esempio:
http://provesupporto.forumattivo.com/t3-prova-immagine

Saluti
Insane

L'effetto è sicuramente bello, il problema è che è da fare per ogni immagine.
Per me è poco sbrigativo ma degustibus....

Ringrazio infinitamente @Insane per i codici (che proverò appena possibile) e @VIRTUALDEEJAY per le sue osservazione.

Buona domenica a tutti!

p.s. = però non si sa come mai il codice di quel sito non funziona nella nostra piattaforma.

Buona domenica saxismawe! Ho provato a fare delle prove per vedere come mai il codice che avevi pubblicato inizialmente non funzionasse...

Esso funziona correttamente nelle pagine HTML dei forum. Ho notato anche io che nei topic (anche se l'HTML è attivo) non funziona, credo che sia poichè nel codice ci sono i tag "onmouseover" e "onmouseout", che di default del sistema (per ragioni di sicurezza) vengono bloccati. La stessa cosa succede se qualcuno prova ad inserire uno script in un messaggio (anche se l'HTML è attivo, si aziona una sorta di censura che impedisce allo script di essere eseguito)

Perciò l'unica soluzione è quella di cercare di ottenere lo stesso effetto, senza l'utilizzo di "onmouseover" e "onmouseout". Ho visto che Virtual ti ha già fornito una soluzione che potrebbe andare bene provala! Poi al massimo si possono apportare ulteriori modifiche.

Buona giornata

Oooohhhh finalmente una spiegazione logica al motivo del non funzionamento.

Concordo con il motivo che mi hai esposto @MattiaDes, mi dispiace ma capisco.

Vorrei correggerti però per una cosa, la soluzione sopra esposta mi è stata suggerita da @Insane.

@VIRTUALDEEJAY ha solo (e a mia veduta ha ragione) fatto presente che adoperando il CSS l'operazione andrebbe ripetuta per ogni immagine che desidero ingrandire.

Comunque appena possibile mi dedico a quanto riferitomi da @Insane, vediamo cosa riesco a tirar fuori.

Grazie MattiaDes.

Ottimo! Ops sì giusto, ho letto velocemente e ho confuso i nickname, grazie  

Ho provato anche io a realizzare un codice per poter fare ciò che vorresti ottenere (cercando di tenere il codice il più "pulito" possibile)

- Codice CSS:

Codice:

.img_hover {
    width: 150px;
}

.img_hover:hover {
    width: 500px;
    cursor: -moz-zoom-in;
}

- Codice da inserire nel messaggio (esempio):

Codice:

[center]<img src="https://i62.servimg.com/u/f62/19/80/41/50/bicchi10.jpg" class="img_hover"/>[/center]

- Anteprima:


Non ho messo l'effetto di ingrandimento rallentato, che però se vuoi si può aggiungere. In particolar modo il codice che ti ho fornito ha il seguente funzionamento:

- Dato il link di un'immagine, nel topic l'immagine viene mostrata larga 150px. Al passaggio del mouse la larghezza viene modificata a 500px (l'altezza invece viene regolata automaticamente). Ovviamente tutti i valori in px sono di prova e sono modificabili a proprio piacimento.

Buona serata!

Urca @MattiaDes!!

sta terminando alcune cosette per l'anniversario della morte del grande Augusto Daolio (Nomadi) che appunto è domani l'altro, appena ho finito vado immediatamente a mettere in pratica i tuoi codici

Grazie infinite



_________________
errata corrige.... mi sono accorto adesso che Daolio è morto il 7 ottobre no il 7 novembre... che sbadato!

Buongiorno,

@MattiaDes ho installoto il codice e fatto alcune prove.
Dicccccciamo che in linea di massima andrebbe molto bene, alle bruttissime se avessi necessità di misure diverse farò un img_hover2.

Però, c'è un però: queste che vedi qui sotto sono due immagini che vorrei ingrandire, prova a passare il mouse su quella di destra e guarda cosa succede!
Quella a sinistra va bene, appena ci vai con il mouse il mouse diventa + e si ingrandisce senza fare un pio.
Quella di destra sembra che cicli all'infinito, il mouse non diventa + e a volte ingrandisce a volte lampeggia senza ingrandire  


questo il codice adoperato:

Codice:

[center]<img src="https://i62.servimg.com/u/f62/15/07/42/16/n_113.jpg" class="img_hover"/  &nbsp;<img src="https://i62.servimg.com/u/f62/15/07/42/16/n_213.jpg" class="img_hover"/>[/center]

Nel CSS ho aumentato un pò le misure:

Codice:

.img_hover {
    width: 350px;
}

.img_hover:hover {
    width: 750px;
    cursor: -moz-zoom-in;
}

se puoi/vuoi dai un'occhiata ad un post che ho fatto per riuscire a farti capire quello che succede... passa il mouse sull'immagine a destra.... lentamente, altrimenti prendi il volo!

Grazie per quanto mi saprai dire.

Buona settimana

Ciao, ho fatto delle prove sia con chrome che con mozilla e non verifico il problema da te riportato, l'unico problema che riscontro è che chrome al passaggio del mouse l'immagine si ingrandisce ma non si vede il +, mentre con mozilla si vede il + e l'immagine si ingrandisce al passaggio del mouse.


Saluti
Insane

Grazie per la tua risposta @Insane gentilissimo.

A prescindere che io adopero Mozilla, provo a fare delle verifiche su chome, te (cortesemente) prova a dare un'occhiata al post che ho linkato e messo nel mio forum.

Grazie per tutto.

___________________________
Fatto prova su Chrome.
Richiamando il post del mio portale, l'immagine a destra produce lo stesso effetto ridontante.

Ciao,

neanche io non riscontro errori!  Ne qui, ne sul tuo portale 

Saluti! 

Ciao sax tra il primo e secondo codice...prima dello spazio manca la > di chiusura.Vedi se puo dipendere da quello

Amici, vi ringrazio infinitamente per le vostre risposte!

@Teodor, giuro che io vedo (nell'immagine di destra) uno sfarfallio "esagerato", te hai (l'immagine di destra) immobile quando ci passi con il mouse?

@jessy, nel mio post nel portale ho controllato... va tutto bene, è qui che involontariamento non ho messo la chiusura.

Quindi, il codice corretto è:

Codice:

[center]<img src="https://i62.servimg.com/u/f62/15/07/42/16/n_113.jpg" class="img_hover"/>   <img src="https://i62.servimg.com/u/f62/15/07/42/16/n_213.jpg" class="img_hover"/>[/center]

Grazie

n.b. tra le due immagini c'è 3 volte

Codice:

 

(spazio) non capisco perchè nell'anteprima me ne fa vedere solamente una mentre qui, quando scrivo, le fa vedere tutte e tre.

Per me un piccolo errore,sul codice c''è comunque posso sbagliare ancora sono inesperta .In piu sto prendendo in considerazione il fatto di licenziare il mio tutor e prenderne un'altro.hahahaha

Abbiamo postato allo stesso istante...ok

saxismawe ha scritto:Dicccccciamo che in linea di massima andrebbe molto bene, alle bruttissime se avessi necessità di misure diverse farò un img_hover2.

Altrimenti, se è la dimensione "rimpicciolita" che vuoi modificare per ogni immagine, ti basta specificarla nel seguente modo:

Codice:

[center]<img src="https://i62.servimg.com/u/f62/15/07/42/16/n_113.jpg" class="img_hover" style="width: 350px;"/>[/center]

Per modificare invece la dimensione massima (quella di quando si passa il mouse sopra all'immagine, è necessario modificare l'hover nel CSS)
---------------------------------
Per quanto riguarda il problema del glitch / lampeggiamento: provo a cercare di spiegarti da cosa dipenda, in modo che si possa trovare una soluzione per risolverlo. Io qui sul FDF non lo ho (nel messaggio da te pubblicato), mentre invece sul tuo forum sì.

Praticamente quando tu passi con il mouse sopra l'immagine questa si ingrandisce, giusto? Il problema è che sul tuo forum l'immagine ingrandita non riesce a stare su un'unica linea (perchè appunto si ingrandisce ed occupa più spazio). Per questo motivo essa va a capo (sotto all'altra immagine rimpicciolita). Solo che andando a capo essa non si trova più dove noi avevamo il mouse e per questo motivo si rimpicciolisce... rimpicciolendosi torna nella posizione in cui noi avevamo il mouse e si ringrandisce ecc... e va avanti così all'infinito creando un loop che genera quegli effetti di lampeggiamento.

Non so se mi sono spiegato bene, ma il problema principale è il fatto che l'immagine una volta ingrandita va a capo e non sta nella stesso punto su cui noi avevamo il puntatore.

Una soluzione può essere o quella di diminuire la grandezza massima o di rimpicciolire quella minima: in questo modo l'immagine non dovrebbe andare a capo. Ovviamente questo si verifica unicamente se metti più immagini una accanto all'altra.

Grande @MattiaDes, capito perfettamente e spiegazione più che logica!

Ora, visto che avrò molte immagini come queste dovute ai vari booklet contenuti nei vari cd, avevo trovato questo metodo (una immagine accanto all'altra disposte su più righe) per occupare meno spazio possibile nel post.

Adesso ti chiedo...... a prescindere zommare l'immagine passandoci con il mouse come mi hai indicato (ma lampeggia), se seguiamo la stessa linea di condotta  e, cliccando sull'immagine di sinistra oppure di destra la facciamo aprire al centro della finestra?
Otterremo lo stesso effetto "lampeggiamento"?

Vediamo se mi spiego meglio, tengo sempre le due immagini una accanto all'altra ma si zomma no al passaggio del mouse ma cliccandoci.

Per adesso sto gestendo la cosa con caratteristiche diverse, ovvero clicco sull'immagine e questa sia apre zommata (della grandezza che desidero) in un'altra pagina:


Però ho letto da qualche parte che non è buona norma far aprire le pagine in un'altra finestra, ecco il motivo di zommare le immagini nella stessa finestra!


metto qui il codice dell'apertura in altra finestra se a volte qualcuno ne avesse bisogno:

Codice:

img]http://dabuttonfactory.com/button.png?t=Click+sull%27immagine+per+ingrandirla&f=Calibri-Bold&ts=14&tc=fff&hp=10&vp=1&c=round&bgt=pyramid&bgc=93c47d&ebgc=f00&be=1&bs=1&bc=569&shs=1&shc=444&sho=s[/img]

<<a href="https://i62.servimg.com/u/f62/15/07/42/16/n_113.jpg" target=_blank><img border="1" src="https://i62.servimg.com/u/f62/15/07/42/16/n_113.jpg" width="350" height="175" style="border:double #003366; 1px;"></a>  &nbsp;<a href="https://i62.servimg.com/u/f62/15/07/42/16/n_213.jpg" target=_blank><img border="1" src="https://i62.servimg.com/u/f62/15/07/42/16/n_212.jpg" width="350" height="175" style="border:double #003366; 1px;"></a>

da notare un particolare interessante.... con questo sito si può fare dei bottoni veramente straordinari!

Grazie @MattiaDes

La tua soluzione non è male, anche se l'unica pecca è che l'immagine viene aperta in una nuova scheda

Riguardo alla tua proposta.. vorresti fare in modo che l'immagine invece che ingrandirsi al passagio del mouse, si ingradisse grazie ad un click, giusto? Potresti modificare il codice CSS così:

Codice:

.img_hover:active {
    width: 750px;
    cursor: -moz-zoom-in;
}

Unica pecca: bisogna tenere cliccata l'immagine....

Per il momento non mi vengono in mente altre soluzioni... si potrebbe creare un codice javascript che: una volta cliccata l'immagine, ad essa associ una classe CSS per ingrandire l'immagine, però come soluzione non mi piace più di tanto.

Altrimenti se vuoi fare qualcosa di un po' più professionale (ma da implementare è più difficile), esistono le lightbox. Se hai tempo prova a fare delle ricerche in rete, ne esistono di molti tipi. Ti lascio alcuni link da cui partire:
https://codepen.io/gschier/pen/HCoqh
http://lokeshdhakar.com/projects/lightbox2/

Buona giornata