Image Magnify - Zoom pe pozele din Blogger

La cererea Loredanei va prezint un script JavaScript care face poza sa se mareasca de 3 ori atunci cand cineva da clic pe ea.
Scriptul este unul foarte usor de instalat si este preluat de pe site-ul Dynamic Drive.

Din nou am sa va rog sa va hostati singuri scripturile pentru a nu risca sa ramaneti fara latime de banda si sa nu mai functioneze. Pentru a vedea cum sa va hostati singuri scripturile JavaScript cititi acest tutorial facut de mine.

Peteti vedea scriptul in actiune dand clic pe poza de mai jos.

Instalare script

Urmati calea Aspect --> Editati html si gasiti urmatorul cod (foloti Ctrl+F):

</head>

Dupa ce l-ati gasit chiar inainte de el copiati codul de mai jos:

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

<script type="text/javascript" src="http://sites.google.com/site/myfilesdan/jquery.magnifier.js">

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Apoi salvati sablonul.

Acum, pentru ca scriptul sa functioneze trebuie sa umblam la codul html al fiecarei poze pe care o punem in postarea noastra.
Atentie: Codul nu functioneaza la imaginile care au atribuit un link.

Codul unei imagini fara link asa cum ne trebuie noua arata cam asa:

<img src="http://i29.tinypic.com/2rdu2k7.jpg" style="width:200px; height:150px" />

Pentru ca imaginea sa se mareasca trebuie sa adaugam acest atribut Css  class="magnify" la codul imaginii.

Codul va arata asa:

<img src="http://i29.tinypic.com/2rdu2k7.jpg" class="magnify" style="width:200px; height:150px" />

Metoda de mai sus este pentru pozele care nu sunt adaugate prin metoda pusa la dispozitie de Blogger. Pentru ca scriptul sa functioneze si la pozele adaugate prin metoda Inserati imagine trebuie sa facem niste modificari si la acest cod.

Daca va uitati la codul unei imagini adaugate astfel el arata cam asa:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwCI046enrLvCOUXyVxTdXJ7jImeS5yzwL_P-m9iBpVOSN5knuaqkO_ujNFA6M4jSOPjts9tV8Dh0R7BBNzABKLDpMcJsLA7o_rtzGXGkCDZBsngZJDcS7KSAR0kkQdxhjQjZTn1oFCUoU/s1600-h/Blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwCI046enrLvCOUXyVxTdXJ7jImeS5yzwL_P-m9iBpVOSN5knuaqkO_ujNFA6M4jSOPjts9tV8Dh0R7BBNzABKLDpMcJsLA7o_rtzGXGkCDZBsngZJDcS7KSAR0kkQdxhjQjZTn1oFCUoU/s320/Blogger.png" /></a>

In prima faza trebuie sa scoatem link-ul imaginii. Faceti codul sa arate asa:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwCI046enrLvCOUXyVxTdXJ7jImeS5yzwL_P-m9iBpVOSN5knuaqkO_ujNFA6M4jSOPjts9tV8Dh0R7BBNzABKLDpMcJsLA7o_rtzGXGkCDZBsngZJDcS7KSAR0kkQdxhjQjZTn1oFCUoU/s320/Blogger.png" />

Acum adaugatii atributul Css  class="magnify":

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwCI046enrLvCOUXyVxTdXJ7jImeS5yzwL_P-m9iBpVOSN5knuaqkO_ujNFA6M4jSOPjts9tV8Dh0R7BBNzABKLDpMcJsLA7o_rtzGXGkCDZBsngZJDcS7KSAR0kkQdxhjQjZTn1oFCUoU/s320/Blogger.png" class="magnify" />

Acum cand reveniti in modul normal de editare a textului pozitionati imaginea in ce parte doriti.
Publicati postarea si vedeti daca scriptul functioneaza.