Tällä sivulla testailen miten jQueryn avulla toteutettu erittäin kevyt (pakattuna neljä kilotavua) EasyZoom-lisäosa pelaa muutamien ottamieni kuvien yhteydessä. Sen avulla viemällä hiiren osoittimen kuvan päälle alkuperäinen kuva-alue peitetään zoomatulla kuvalla, jota voi sitten kursoria liikuttamalla katsella suurennettuna eri kohdista. Viemällä kursorin kuvan ulkopuolelle palautuu alkuperäinen näkymä.
EasyZoomin voi ladata GitHubista. Ladattavan paketin mukana tulee demo esimerkkikuvien kera. Mukana tulee myös tarvittava CSS-merkkaus. Sekin on varsinaisen plugarin lisäksi erittäin ytimekäs: puoli kilotavua pakkaamattomana.
Kytkin IisiZuumin Textpatterniin niin, että jQuery ladataan Googlen serveriltä ja zoomaustoiminto Kuopassa.netistä vain sellaisilla sivuilla, joissa on esillä zoomattavaa sisältöä. Loin tämän tallentamalla Textpatterniin avainkentän, jolle annoin nimeksi Sisaltaa zoomattavia kuvia (K). Jos kirjoitan tuohon avainkenttään jotain, kuten vaikka K-kirjaimen, sivulla tullaan lataamaan em. koodit.
Esimerkkejä
Porvoo heinäkuussa 2014 Kokonmäen päältä kuvattuna. Alkuperäinen kuva on 3872×2592 pikseliä, 1,88 megatavua.
Alkuperäinen kuva on 1200×803 pikseliä, 244 kilotavua.
Alkuperäinen kuva on 600×402 pikseliä, vain 34 kilotavua.
Yllä näkyvissä esimerkeissä kuvien "thumbnailit" ovat mitoiltaan 470×250 kuvapikseliä. Ylimmässä kuvassa hiiren liikuttaminen heilauttaa kuvaa huomattavasti mihin suuntaan tahansa. Keskimmäisessä kuvassa EasyZoom on mielestäni enimmin edukseen. Alimmassa kuvassa zoomausta ei paljon tapahdu, sillä suurempi kuva on vain 130 px leveämpi ja 152 korkeampi kuin thumbnailissa.
