Fw

Wordpress Creative Developer

Anteprima delle immagini in un tooltip

  • Plugin jQuery
  • -

Tempo fa avevo scritto un articolo su come creare dei tooltip gradevoli, grazie a javascript.

Oggi vedremo come ottenere lo stesso effetto con le immagini, cioè al passaggio del mouse sulle miniature compariranno le anteprime, con la didascalia, il tutto sfruttando la libreria jquery.

Per capire meglio di cosa si tratta guardate l’esempio.

Prima di cominciare a seguire la spiegazione scaricate i file necessari.

Vediamo come ottenere questo effetto, qui di seguito:

1) tra i tag <head> e </head> inserite queste righe di codice

<script src=”jquery.js” type=”text/javascript”></script>
<script src=”main.js” type=”text/javascript”></script>

2) Per le miniature dovete scrivere questo codice; in questo primo esempio la didascalia non compare.

<a href=”1.jpg” class=”preview”><img src=”1s.jpg” alt=”gallery thumbnail” /></a>

Se invece volete aggiungere anche la didascalia dovete aggiungere il tag title:

<a href=”image.jpg” class=”preview” title=”Great looking landscape”>Roll over to preview</a>

Nella fonte da cui ho preso le informazioni sono presenti altri due esempi per sfruttare i tooltip in modi diversi da quelli proposti nell’articolo.

Scarica il sorgente

Guarda l’esempio

20 Commenti

  1. il link ai sorgenti mi da errore

  2. Grazie mille per la segnalazione!! ho sistemato

  3. Salve, dalle preview e’ proprio quello che mi serve ! pero’ tutti i link mi danno errore e non posso scaricare le sorgenti ? Dove posso trovarle gentilmente?

  4. Ciao, quando passi con il mouse sopra “Scarica il sorgente” ti compare una finestra con in mezzo scritto “Snap Click for .zip file”. Premi li e vedrai che funziona..ciao!!

  5. Ho provato ad adattarlo alle mie esigenze, ma con qualche problema:

    ho nella stessa pagina un menu testuale a cui ho associato a ogni voce la classe
    screenshot (es.: Voce del menu ).

    Nell’head ho inserito:

    Nel main-Testo.js ho variato la posizione
    xOffset = -30;
    yOffset = -100;

    Tutto va bene, la pagina è validata W3C e si vede benissimo su qualsiasi browser.
    ——————————————————————————————
    Nella stessa pagina, ho delle icone posizionate sulla destra a cui ho applicato la classe preview (es.: ).

    Nell’head ho inserito:

    Anche in altraCartella/menu/main-lato.js, ho variato la posizione così:
    xOffset = 100;
    yOffset = -550;
    ——————————————————————————————
    Risultato: le immagini del menu testuale (classe screenshot), prendono la stessa posizione delle immagini ingrandite della classe preview.

    Non sono un genio, questo è evidente, dunque non riesco a comprendere dov’è il problema visto che ho nominato in modo diverso i files .js e che sono posizionati in cartelle differenti.

    Approfitto per porre un altro quesito: per la classe preview è possibile che ogni immagine resti al centro dello schermo senza muoversi con lo spostarsi del mouse?

    Grazie.

  6. Nell’head (menu) ho inserito:

    Nell’head (icone) ho inserito:

  7. Scusa, ma non mi fa inserire gli script 🙁

    Riprovo eliminando le parentesi ad angolo e sostituendole con tre puntini:

    primo

    …script src=”Menu/jquery-Testo.js” type=”text/javascript”…/script… …script src=”Menu/main-Testo.js” type=”text/javascript”… …/script…

    secondo

    …script src=”altraCartella/menu/jquery-lato.js” type=”text/javascript”… …/script…
    …script src=”altraCartella/menu/main-lato.js” type=”text/javascript”… …/script>

  8. Ciao! mandami il codice per e mail che provo a dargli un’occhiata ok?

  9. Ciao, ho cambiato un pò il tuo codice per permettere l’onMouseOver la comparsa dell’anteprima ma al click farlo andare in un’altra pagina, nel particolare ho modificato main.js e ho messo al posto di “this.href” “this.id e poi nella pagina che richiama ho messo come contenuto dell’href la destinazione della pagina e come id il percorso dell’immagine… non so se sono stato chiaro e non so se sono stato utile ma almeno c’ho provato 🙂

  10. Ciao MisterB e benvenuto in questo blog. Prova a mettere in un commento il codice che hai modificato, così possiamo tutti capire meglio quello che hai provato a fare 😉

  11. Cerco di spiegarmi, in main.js alla riga 25 ho sostituito

    $(“body”).append(“”+ c +””);

    con

    $(“body”).append(“”+ c +””);

    e all’interno del file che richiama ho modificato lo standard

    <a href=”immagine_grande” rel=”nofollow”></a>

    con

    <a href=”destinazione” rel=”nofollow”></a>

    Il vantaggio è che ho sempre l’anteprima ma al click posso mandarlo dove voglio io, sfruttando la a.

    Spero sia più chiaro, funziona tutto correttamente come volevo

    Saluti

    Simone

  12. mmm scusate non mi fa scrivere il codice… cmq ho sostituito alla riga 25 di main.js href con la parola id e all’interno del file che richiama lo script il percorso dell’immagine grande l’ho scritto nell’id e non nell’href sempre cmq nel tag a

  13. Ottimo MisterB. Grazie per il tuo contributo 😉

  14. ciao Fedeweb, premetto che non sono molto esperto….ho provato ad utilizzare questa libreria ma ho qualche difficoltà. L’immagine me la carica ma non mi fa l’effetto tooltip. Ho caricato i due script js sotto e sembra che i percorsi siano corretti…ma non va!
    chiedo un aiutino!

  15. Ciao tsenglabs e benvenuto su Fedeweb 😉

    Cosa intendi quando dici che ti carica l’immagine ma non crea l’effetto tooltip?

    Hai provato a scaricare i sorgenti?

  16. Ciao Fedeweb, ho provato a riproporre questo esempio in un sito su cui sto lavorando, ma avrei un problemino:
    dovrei fare una photogallery con delle miniature 60x60px, che in hover mi fanno apparire una preview di 220x160px circa. Cliccando sulle miniature dovrebbero apparire gli ingrandimenti delle immagini (circa 800x600px).
    In questo modo devo lavorare con tre versioni della stessa immagine, ma con l’esempio da te proposto non riesco mai ad inserire quella della preview o l’ingrandimento finale…
    Come dovrei fare? hai qualche soluzione?

    Spero di essere stata chiara, anche perchè come avrai capito non sono molto esperta di javascript e altro.
    Aspetto una risposta! Grazie

  17. Ciao Sindell e benvenuta nel blog 😉

    Nel commento di MisterB, trovi la risposta 😉

  18. Grazie infinite per la tempestiva risposta!!!
    … chiedo scusa ma non mi ero accorta del post di MisterB 🙂

  19. Ciao, ottimo lavoro, avrei solo un chiarimento non ho capito bene i passaggi $(“body”).append(“”+ c +””);
    con
    $(“body”).append(“”+ c +””);
    di MisterB per linkare ad un’altra pagina, devo andare qui: href=\”” .$path_img . $row[‘nome’].”\”, ti sarei grato per qualsiasi aiuto riuscissi a darmi.

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *