Miten suurentaa kuvia kuten keskitasoa

Blogging-alustan Medium käyttää a mukautetun kuvan zoomaustehosteen niiden blogisivuilla. Aina kun käyttäjä napsauttaa kuvaa, se zoomaa automaattisesti suurempaan kokoon.

Se on suuri vaikutus ja varmasti ainutlaatuinen Mediumille, mutta se ei koskaan ollut helppo kopioida.

Nyt MediumLightbox skripti on helpompaa kuin koskaan. Tämä JS-skripti on kevyt ja helppo lisätä mihin tahansa verkkosivustoon tai blogiin.

Jos haluat nähdä, miten tämä toimii, voit vierailla osoitteessa live-esittelysivu isäntä Davide Calignano.

Hän vietti jonkin aikaa naarmuttamalla tarkan siirtymän ja mukautetun animaatiovaikutuksen luo keskikuvan zoomauksen peilikuva. Koko kirjasto on kirjoitettu puhtaassa JavaScriptissä, joten se ei luota mihinkään 3^rd puolue skriptejä, kuten jQuery.

Sinun täytyy tietää vähän JS: n asettamiseksi, mutta sinun ei tarvitse olla asiantuntija.

Jokainen kuva voi ottaa data- * attribuutit koko kokoisen korkeuden ja leveyden asettamiseksi vedetään dynaamisesti Lightbox-laajennuksesta. Asennuskoodi on hyvin yksinkertainen ja se voi kohdista kuvat itse, tai kontit kuten

elementti.

Tässä on yksi koodinpätkä, jotta saat laajennuksen käyttöön:

 MediumLightbox (figure.zoom-vaikutus "); 

Toiminnon sisällä läpäise valitsin kaikille elementeille (esim.

) kanssa .zoom-vaikutus luokka. Tämä luokka on määritelty MediumLightbox-tyylitaulukossa, joten on parasta käyttää sitä myös sivullasi.

Ja kun se on asetettu, olet kaikki asettunut!

Sivun sisältöalueella voit kääriä kaikki kuvat a

tunniste käyttäen tätä luokkaa. He saavat automaattisesti tämän rakastetun Medium-napsautus-zoom-efektin sekä työpöydälle että mobiilikäyttäjille.

Jos haluat ladata kopion tästä käsikirjoituksesta ja aloittaa, käy vain GitHubin tärkeimmässä repossa. Täältä löydät myös dokumentointi yhdessä koodinpätkän kanssa voit kopioida, jotta saat käyttöönsä nopeasti.