Zoom istantaneo nelle immagini

Printable View

03-07-2012, 11.57.52

Zoom istantaneo nelle immagini

Salve a tutti,
ho letto che ci sono stati degli interventi su come ingrandire le foto al passaggio del mouse; su come aprirle in modo diverso ecc; ma purtroppo non ho trovato ciò che cercavo: lo zoom istantaneo al passaggio del cursore! :crycry:

Non so se sono riuscita a spiegarmi, in pratica vorrei realizzare lo stesso effetto del seguente sito: http://francescasandri.altervista.or.../progetto.html

N.B.
non sono affatto pratica di creazioni siti e pagine web, perciò non rispondete con linguaggi tecnici e vi prego non date niente per scontato nei passaggi! :)

Anticipatamente GRAZIEEEEEEE!!
03-07-2012, 12.47.47
karl94

È stato impiegato un plugin JQuery, sul sito del plugin trovi tutto il necessario.
03-07-2012, 13.00.22

purtroppo non riesco a capire!
mi spiego meglio:
io ho una pagina qui su altervista, ho inserito una foto, voglio applicarvi questo tipo di zoom (che adesso ho capito si chiama zoomy), come devo fare?
c'è qualcuno che me lo sa spiegare passo passo senza sbalzarmi su altri siti e/o altre pagine?
il sito che mi ha consigliato il moderatore karl94 lo vedo potenzialmente buono, però come faccio a mettere il linguaggio html nella mia pagina che ho creato su altervista?
vi pregoooo HELP ME! :(
03-07-2012, 13.01.30
karl94

Con cosa stai creando il tuo sito? Puoi fornire un qualche indirizzo di esempio?
03-07-2012, 13.12.53

sto usando Alterpages
03-07-2012, 13.37.59
karl94

Ma perché non lo usi nella cartella principale? In questo modo il tuo sito non è accessibile: http://martaautuori.altervista.org/
Comunque la procedura è descritta sempre sul sito che ti ho indicato. Per inserire del codice HTML su AlterPages, devi usare l'apposito elemento HTML.
03-07-2012, 15.10.42

non ho capito
03-07-2012, 15.11.18

non so come inserirlo
03-07-2012, 15.27.38

come inserire le stringhe e dove inserirle!
26-07-2012, 11.45.20

Più facile a farsi che a dirsi:

1. Scaricati Zoomy da http://zoomy.me/download.php e spacchettalo (visto che è un file zip).
2. Carica sul tuo sito il file zoomy.css (dove? Possibilmente sulla directory dove tieni i css).
3. Carica sul tuo sito il file zoomy.js (dove? Se hai altri files javascript, caricalo nella stessa posizione)
4. Per ogni immagine che vuoi gestire con quell'effetto, creane una copia zoommata (meglio: parti da una risoluzione buona, tieni quella come copia zoommata e riducila per avere la tua immagine a dimensione standard che visualizzerai sul sito).
5. Per ogni immagine che vuoi gestire con quell'effetto, il codice, anziché il classico

<img src="URL_DELL_IMMAGINE_DIMENSIONE_STANDARD" alt="" />

sarà il seguente:

<a href="URL_DELL_IMMAGINE_ZOOMMATA" class="zoom">
<img src="URL_DELL_IMMAGINE_DIMENSIONE_STANDARD" alt="" />
</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="URL_DEL_FILE_zoomy.js"></script>
<script type="text/javascript">
$(function(){
$('.zoom').zoomy();
}(jQuery))
</script>

6. Scrivi il collegamento al foglio di stile che contiene la classe nuova, cioè, tra i tag <head> e </head>, scrivi

<link type="text/css" rel="stylesheet" href="URL_DEL_FILE_zoomy.css"/>

Fine.