Kuopassa.net

Lisää kirjoituksia netistä.

Etsi blogista

Jos harkitset liittymistä, käytä alennuskoodia 00033583 niin saat 25€ pois palvelumaksuista. Hyödynnä alekoodi heti, sillä en tiedä kuinka kauan tuo kampanja kestää, mutta se vaikuttaa olevan voimassa ainakin 23.11.

EasyZoom

Kirjoitettiin
Päivitettiin 14. heinäkuuta 2014 kello 11.25

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. Kuva on Kokonmäen päältä.
Porvoo heinäkuussa 2014 Kokonmäen päältä kuvattuna. Alkuperäinen kuva on 3872×2592 pikseliä, 1,88 megatavua.

Hiihtohissin kaapeleita Porvoossa.
Alkuperäinen kuva on 1200×803 pikseliä, 244 kilotavua.

Auringonnousu Porvoossa.
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.

Saatat olla kiinnostunut näistä:
Tietoa kirjoittajasta

"EasyZoom" on saanut pisteet 6 yhteensä 10 pisteestä. Julkaisu on pisteytetty 1 kerran. Tämä juttu mukaan laskettuna blogissa on julkaistu yhteensä 1213 kirjoitusta. Tämän sivun niin sanottu kestolinkki on tässä siltä varalta jos haluat linkittää siihen esimerkiksi blogista tai joltain foorumilta. Tagi tai tagit: .

Tsekkaa myös minkälaisia valokuvia teen: www.pjti.fi