Přidat efekt zvětšení na webovou stránku pomocí jfMagnify

Je jich spousta bezplatný zoom pluginy fungují neuvěřitelně dobře. Nicméně většina z nich je pro obrázky a specifikují pokyny pro pouze obsah obrázku.

Co kdybys mohl přidejte zvětšovací efekt na každou část vaší webové stránky? Díky jfMagnify, můžeš.

To je bezplatný plugin jQuery podporující nejen zvětšení obrazu, ale také zvětšení celé stránky. Je to jeden z mála pluginů, který vám také umožňuje zvolte úroveň zvětšení a podporuje dotykové události pro mobilní uživatele.

Poznámka: tento plugin se může cítit trochu těžký, protože to spoléhá na dvě závislosti: pravidelné jQuery a jQuery UI. Oba tyto kroky jsou nezbytné k tomu, aby jfMagnify fungoval správně. Nemluvě o Skript skutečné jfMagnify budete muset zahrnout na svou stránku.

Nastavení je trochu složitější, protože můžete cílit pouze na zvětšené prvky uvnitř kontejneru. Pokud chcete cílit na celou stránku, kterou potřebujete zahrnout třídu do celého webu.

Zde je návod, jak jeden řádek jQuery vypadalo by to takto:

 $ ("zvětšit"). jfMagnify (); 

Tyto cíle všechny prvky uvnitř .zvětšit kontejner který je obvykle div živel.

Tyto vnitřní prvky mohou být obrazy, ale také zahrnují malý tisk, například na stránkách nebo na stránkách zásad ochrany osobních údajů. Veškerá dokumentace je dostupné v repo GitHub, takže jakmile ho nastavíte, celý proces bude mnohem snazší.

Také, tento plugin je velmi fickle a přichází s spousta kontejnerových pravidel. Například prvek kontejneru nemůže mít statickou pozici CSS, tak to musí být buď relativní, absolutní, nebo pevné.

Můžeš najít všechna výchozí pravidla stylu v repo GitHub, ale to by mohlo být bolest přizpůsobit, pokud vaše rozložení je již postaveno a běží. Přínosy jfMagnify jsou pro mě, stojí za to. Opravdu záleží na vašich potřebách a na tom, zda se vám rozhraní líbí.

Podívejte se na dokumenty na GitHub, abyste viděli, co si myslíte. A můžete také náhled rozhraní na CodePen pokud chcete vidět knihovnu v akci před instalací.