JavaScript per Blog Zoom Immagini ~ Cerca Soluzione 3

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:

Ingrandimento immagine variabile girando la rotellina del mouse.
Ingrandimento immagine fissa con riquadro di dimensioni medie.
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:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/cercasoluzione3/pagina-di-caricamento-pro/ingrandimento-immagini_cs3.js' type='text/javascript'>

</script>

<script type='text/javascript'>

//<![CDATA[

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

 $('#image1').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [300,300],
  magnifierpos: 'right',
  cursorshade: true,
  largeimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkvcGmebKAzRtTRrGzMLGIjj7OPgSKQHHgKWZJI3Zh0GcJg7UxEgM8w0OQaSR-ff6lAwZGre0PkKZJ614eKdrx9YTfTzabqNo36AJcO5xNBMwiJC8uedXCwjb9wxt6jQJb8J3M3ikX_Y/s1600/Auto_Ferrari.jpg' //<-- No comma after last option!
 })

 $('#image2').addimagezoom({
  zoomrange: [5, 5],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadecolor: 'pink',
  cursorshadeopacity: 0.3,
  cursorshadeborder: '1px solid red',
  largeimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkvcGmebKAzRtTRrGzMLGIjj7OPgSKQHHgKWZJI3Zh0GcJg7UxEgM8w0OQaSR-ff6lAwZGre0PkKZJ614eKdrx9YTfTzabqNo36AJcO5xNBMwiJC8uedXCwjb9wxt6jQJb8J3M3ikX_Y/s1600/Auto_Ferrari.jpg' //<-- No comma after last option!
 })

 $('#image3').addimagezoom()

})
 
//]]>

</script>

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: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkvcGmebKAzRtTRrGzMLGIjj7OPgSKQHHgKWZJI3Zh0GcJg7UxEgM8w0OQaSR-ff6lAwZGre0PkKZJ614eKdrx9YTfTzabqNo36AJcO5xNBMwiJC8uedXCwjb9wxt6jQJb8J3M3ikX_Y/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: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkvcGmebKAzRtTRrGzMLGIjj7OPgSKQHHgKWZJI3Zh0GcJg7UxEgM8w0OQaSR-ff6lAwZGre0PkKZJ614eKdrx9YTfTzabqNo36AJcO5xNBMwiJC8uedXCwjb9wxt6jQJb8J3M3ikX_Y/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:

<p><img id="image1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkvcGmebKAzRtTRrGzMLGIjj7OPgSKQHHgKWZJI3Zh0GcJg7UxEgM8w0OQaSR-ff6lAwZGre0PkKZJ614eKdrx9YTfTzabqNo36AJcO5xNBMwiJC8uedXCwjb9wxt6jQJb8J3M3ikX_Y/s1600/Auto_Ferrari.jpg" style="width:250px;height:225px" /><p>
<p><img id="image2" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkvcGmebKAzRtTRrGzMLGIjj7OPgSKQHHgKWZJI3Zh0GcJg7UxEgM8w0OQaSR-ff6lAwZGre0PkKZJ614eKdrx9YTfTzabqNo36AJcO5xNBMwiJC8uedXCwjb9wxt6jQJb8J3M3ikX_Y/s1600/Auto_Ferrari.jpg" style="width:250px;height:225px" /><p>
<p><img id="image3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkvcGmebKAzRtTRrGzMLGIjj7OPgSKQHHgKWZJI3Zh0GcJg7UxEgM8w0OQaSR-ff6lAwZGre0PkKZJ614eKdrx9YTfTzabqNo36AJcO5xNBMwiJC8uedXCwjb9wxt6jQJb8J3M3ikX_Y/s1600/Auto_Ferrari.jpg" style="width:250px;height:225px" /><p></p></p></p></p></p></p>

Ovviamente il codice src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkvcGmebKAzRtTRrGzMLGIjj7OPgSKQHHgKWZJI3Zh0GcJg7UxEgM8w0OQaSR-ff6lAwZGre0PkKZJ614eKdrx9YTfTzabqNo36AJcO5xNBMwiJC8uedXCwjb9wxt6jQJb8J3M3ikX_Y/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.

Postato sotto: Blog,Informatica,JavaScript

JavaScript per Blog Zoom Immagini

0 commenti:

Posta un commento

Ultimi Post Pubblicati

Post più popolari

Lettori fissi

Giudica!!!

Categorie