Pridajte zväčšujúci efekt na svoju webovú stránku pomocou programu jfMagnify

Existuje veľa voľné zväčšovacie pluginy ktoré fungujú neuveriteľne dobre. Avšak väčšina z nich je postavený pre obrázky a určujú pokyny pre obsah iba pre obrázkov.

Čo ak by ste mohli pridať zväčšujúci účinok do každej časti vašej webovej stránky? Vďaka jfMagnify, môžeš.

Je to free jQuery plugin ktorý podporuje nielen priblíženie obrazu, ale aj celé zväčšenie stránky. Je to jeden z mála pluginov, ktorý vám tiež umožňuje vyberte úroveň zväčšenia a podporuje dotykové udalosti pre mobilných používateľov.

Všimnite si, že tento plugin sa môže cítiť trochu ťažké, pretože spolieha na dve závislosti: pravidelné jQuery a jQuery UI. Tieto sú obidva potrebné na to, aby sa program jfMagnify správne fungoval. Nehovoriac o tom skutočný skript jfMagnify budete musieť zahrnúť na svoju stránku.

Nastavenie je trochu komplikované, pretože môžete zacieliť iba zväčšené prvky v kontajneri. Ak chcete zacieliť na celú stránku, musíte to urobiť zahrnúť triedu na celú vašu webovú stránku.

Tu je postup ako jeden riadok jQuery by vyzeralo takto:

 $ ( "Zväčšenie") jfMagnify (). 

Tieto ciele všetky prvky vnútri .zväčšiť kontajner čo je zvyčajne a div element.

Tieto vnútorné prvky môžu byť obrázky, ale mohli by tiež byť obsahovať malú tlač, napríklad na stránkach alebo stránkach ochrany osobných údajov. Celá dokumentácia je k dispozícii v repo GitHub, takže akonáhle to nastavíte, celý proces sa stáva oveľa jednoduchším.

Tiež tento plugin je veľmi nestálý a prichádza s veľa kontajnerových pravidiel. Napríklad prvok kontajnera nemôže mať statickú pozíciu CSS, takže musí byť buď relatívny, absolútny alebo pevný.

Môžeš nájsť všetky predvolené pravidlá štýlu v repo GitHub, ale môže to byť bolest prispôsobiť, ak je vaše rozloženie už postavené a beží. Výhody jfMagnify sú pre mňa silné. Naozaj záleží na vašich potrebách a či sa vám páči rozhranie.

Pozrite sa na dokumenty na GitHub, aby ste videli, čo si myslíte. A môžete tiež ukážka rozhrania na stránke CodePen, ak chcete pred spustením knižnice zobraziť túto akciu.