duminică, 13 septembrie 2009

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="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s1600-h/Blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s320/Blogger.png" /></a>


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

<img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/s320/Blogger.png" />

Acum adaugatii atributul Css  class="magnify":

<img border="0" src="http://2.bp.blogspot.com/_i6co2fwMbTo/Sqz1EqJlXHI/AAAAAAAAKI4/fuL9CLqGpg0/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.

8 comentarii:

  1. Poza nici gând să se mărească când o clicuiesc? Nici săgetuţa nu mi se schimbă ...în mânuţă... Ceva nu merge.

    RăspundețiȘtergere
  2. Site-ul unde e hostat scriptul e cazut.
    Am modificat link-ul si acum merge.
    Din cauza asta insist sa va hostati singuri scripturile. Ca sa nu depindem toti de un singur link.

    RăspundețiȘtergere
  3. ms frumos pt aceasta postare...am reusit sa fac si pe blog la mn sa se mareasca imag,dar cu link-ul tau nu am hostat caci nu am stiut de unde sa iau scriptul...insa merge :)ms inca o data.

    RăspundețiȘtergere
  4. Cum pot sa fac, ca atunci cand pun mouseul pe un link sa-mi apara poza din interiorul articolului(atunci cand articolul are poza).
    Multumesc!

    RăspundețiȘtergere
  5. am incercat prima data pe un blog test apoi am vrut sa pun script-ul si pe blogul emu dar nu imi merge, de ce? ~x(

    RăspundețiȘtergere
  6. Acest comentariu a fost eliminat de autor.

    RăspundețiȘtergere
  7. Salut ! Am incercat,merge perfect,si nu apare manuta ci o lupa .Singura problema ar fi ca daca vrem sa incarcam o poza prin metoda Blogger ,dupa modificare poza se aliniaza centru iar literele din articol incep de sub poza . In acest caz, daca mi se permite,,vin cu o rectificare. Deci,atunci cand se modifica acel cod se introduce si aceasta parte a codului initial : ( imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em" ) si abia apoi class="magnify" Multam frumos ! Sper sa nu gresesc!

    RăspundețiȘtergere