Kotisivu » Toolkit » Lisää suurennusvaikutus Web-sivullesi jfMagnify

    Lisää suurennusvaikutus Web-sivullesi jfMagnify

    On paljon vapaan zoomauksen lisäosat jotka toimivat uskomattoman hyvin. Useimmat näistä ovat kuitenkin rakennettu kuville ja ne määrittävät ohjeet vain kuva-sisältö.

    Mitä jos voisit lisää suurennusvaikutus sivun jokaiseen osaan? Kiitokset jfMagnify, sinä pystyt.

    Se on a ilmainen jQuery-laajennus joka tukee vain kuvan zoomausta, mutta myös koko sivun zoomaus. Se on yksi harvoista laajennuksista, joiden avulla voit valitse suurennusaste ja tukee kosketustapahtumia mobiilikäyttäjille.

    Huomaa, että tämä plugin voi tuntea hieman raskaan, koska se on riippuu kahdesta riippuvuudesta: säännöllinen jQuery ja jQuery-käyttöliittymä. Nämä ovat molemmat välttämättömiä, jotta jfMagnify toimii oikein. Puhumattakaan siitä todellinen jfMagnify-komentosarja sinun on sisällytettävä sivullesi.

    Asennus on hieman hankala, koska voit kohdistaa vain suurennettuja elementtejä säiliössä. Jos haluat kohdistaa koko sivun, sinun täytyy sisällyttää koko sivustosi luokka.

    Tässä on, miten yksi jQuery-rivi näyttää siltä:

     $ ( "Suurentaa"). JfMagnify (); 

    Nämä tavoitteet kaikki elementit .suurentaa kontti joka on yleensä a div elementti.

    Nämä sisäiset elementit voivat olla kuvia, mutta myös sisältää pienen tuloksen, esimerkiksi sivuston termeillä tai tietosuojakäytännön sivuilla. Kaikki dokumentaatio on GitHub-repossa, joten kun olet asettanut sen, koko prosessi on paljon helpompaa.

    Tämä plugin on myös hyvin hämmentävä ja mukana paljon kontin sääntöjä. Esimerkiksi säiliöelementti ei voi olla staattinen CSS-sijainti, joten sen on oltava joko suhteellinen, absoluuttinen tai kiinteä.

    Sinä pystyt etsi kaikki oletusasetukset GitHub-repossa, mutta se voi olla kova muokata, jos ulkoasu on jo rakennettu ja käynnissä. JfMagnifyin edut ovat minulle vaivan arvoisia. Todellakin se riippuu tarpeistasi ja haluatko käyttöliittymän.

    Tutustu GitHubin dokumentteihin nähdäksesi mitä mieltä olet. Ja voit myös esikatsele käyttöliittymää CodePenissä, jos haluat nähdä kirjaston toiminnassa ennen sen asentamista.