RSS Feed Seguiteci su Twitter! Seguiteci su Facebook!
NEWS: Questo Blog e' rimasto inattivo per più di 18 mesi , quindi possono esserci link non funzionanti o altre problematiche dovute alla mancata manutenzione. Cosa vi piace o non in questo BLOG?, scrivete tutte le vostre recensioni in questa area commenti, provvederemo immediatamente a cancellare il Blog o migliorarlo nelle sue aspettative. Grazie.

JavaScript per Blog Zoom Immagini

Vediamo come inserire un bellissimo JavaScript sul nostro sito web, stiamo parlando di uno Zoom di ingrandimento delle immagine, per vedere di cosa stiamo parlando vedi qui (passa col mouse sull'immagine Ferrari gialla).


Abbiamo 3 tipi di Ingrandimento immagini:
  1. Ingrandimento immagine variabile girando la rotellina del mouse.
  2. Ingrandimento immagine fissa con riquadro di dimensioni medie.
  3. Ingrandimento immagine fissa con riquadro piccolo con Zoom più ingrandito.
Adesso vediamo come inserire questo Script all'interno del nostro sito.
Come sempre andiamo sul foglio HTML, cerchiamo la stringa </head> e prima incolliamo il seguente codice:


Noterete che in una parte del codice ho inserito il seguente codice, in alcuni siti web lo richiede in altri no:

<script type='text/javascript'> //<![CDATA[ 

//]]>
</script>


Per sapere perchè vedi qui.

Prima di procedere spieghiamo, cosa dovremmo modificare in questo codice:

jQuery(document).ready(function($){

    $('#image1').addimagezoom({
        zoomrange: [3, 10],
        magnifiersize: [300,300],
        magnifierpos: 'right',
        cursorshade: true,
        largeimage: 'http://3.bp.blogspot.com/-gWeE3piItlM/TjAcsnIwV2I/AAAAAAAAAVU/TD29PZe3bGQ/s1600/Auto_Ferrari.jpg'
    })

    $('#image2').addimagezoom({
        zoomrange: [5, 5],
        magnifiersize: [400,400],
        magnifierpos: 'right',
        cursorshade: true,
        cursorshadecolor: 'pink',
        cursorshadeopacity: 0.3,
        cursorshadeborder: '1px solid red',
        largeimage: 'http://3.bp.blogspot.com/-gWeE3piItlM/TjAcsnIwV2I/AAAAAAAAAVU/TD29PZe3bGQ/s1600/Auto_Ferrari.jpg
    })

    $('#image3').addimagezoom()

})


Le stringhe in rosso devono essere sostituiti con l'immagine caricate da voi a piacimento, le 2 immagini sono uguali.

Adesso proseguiamo con l'inserimento dell'altro codice, sempre sul foglio HTML cercate la stringa <body> e subito dopo inserite questo codice:


Ovviamente il codice src="http://3.bp.blogspot.com/-gWeE3piItlM/TjAcsnIwV2I/AAAAAAAAAVU/TD29PZe3bGQ/s1600/Auto_Ferrari.jpg" viene sostituito anch'esso con un'immagine caricata da voi.
Infine salvete il tutto, andate sul vostro sito e noterete il funzionamento dello script.

0 commenti:

Posta un commento

Proponi un'idea, segnalaci un problema.

Entra a far parte di CS3, pubblica i tuoi articoli.

Scrivi un commento!