Početna » alat » Dodajte efekt povećanja na svoju web-stranicu pomoću jfMagnify

    Dodajte efekt povećanja na svoju web-stranicu pomoću jfMagnify

    Ima ih mnogo besplatni dodatci za zumiranje koji rade nevjerojatno dobro. Međutim, većina njih jesu izgrađena za slike i navode upute za sadržaj samo za slike.

    Što ako možeš dodati efekt povećanja na svaki dio vaše web stranice? Zahvaljujući jfMagnify, možeš.

    To je besplatni jQuery dodatak koji ne podržava samo zumiranje slike, već također povećavanje cijele stranice. To je jedan od rijetkih dodataka koji vam također omogućuje odaberite razinu povećanja i podržava događaje dodira za mobilne korisnike.

    Imajte na umu da se ovaj dodatak može osjećati malo teškim zbog toga oslanja se na dvije ovisnosti: redovito jQuery i Korisničko sučelje jQuery. Oba su potrebna kako bi se ispravno radilo s jfMagnify. Da ne spominjem stvarna skripta jfMagnify morat ćete uključiti na svoju stranicu.

    Postavljanje je malo zeznuto jer možete ciljati samo povećane elemente unutar spremnika. Ako želite ciljati cijelu stranicu, trebat ćete uključite razred na cijeloj web-lokaciji.

    Evo kako jedan redak jQuery izgledao bi ovako:

     $ ( "Uveličati") jfMagnify (). 

    To cilja svi elementi unutar. \ t .povećati kontejner što je obično a div element.

    Ti unutarnji elementi mogu biti slike, ali također mogu uključiti sitni tisak, na primjer na web stranicama ili na stranicama s pravilima o privatnosti. Sva dokumentacija je dostupne u GitHub repo, pa kad ga postavite, cijeli proces postaje mnogo lakši.

    Također, ovaj dodatak je vrlo promjenjiv i dolazi s njim puno pravila o kontejnerima. Na primjer, element spremnika ne može imati statičnu CSS poziciju, stoga mora biti ili relativna, apsolutna ili fiksna.

    Možeš pronađite sva pravila zadanog stila u repo GitHubu, ali možda je teško prilagoditi ako je vaš izgled već izgrađen i pokrenut. Prednosti jfMagnify su za mene vrijedne truda. Stvarno, to ovisi o vašim potrebama i želite li sučelje.

    Zavirite u dokumente na GitHubu da biste vidjeli što mislite. I također možete pregledajte sučelje na CodePen ako želite vidjeti knjižnicu u akciji prije nego što ga instalirate.