Dodaj efekt powiększania na swojej stronie internetowej za pomocą jfMagnify

Jest mnóstwo darmowe wtyczki do powiększania to działa bardzo dobrze. Jednak większość z nich to zbudowany dla obrazów i określają kierunki dla treść tylko obrazkowa.

Co jeśli możesz dodaj efekt powiększenia do każdej części twojej strony internetowej? Dzięki jfMagnify, możesz.

To jest darmowa wtyczka jQuery który obsługuje nie tylko powiększanie obrazu, ale także powiększanie całej strony. To jedna z niewielu wtyczek, która również pozwala wybierz poziom powiększenia i obsługuje zdarzenia dotykowe dla użytkowników mobilnych.

Zauważ, że ta wtyczka może być trochę ciężka, ponieważ opiera się na dwóch zależnościach: regularne jQuery i jQuery UI. Oba są niezbędne do poprawnego działania jfMagnify. Nie wspominając o rzeczywisty skrypt jfMagnify musisz zawrzeć na swojej stronie.

Konfiguracja jest nieco skomplikowana, ponieważ możesz celować tylko w powiększone elementy w pojemniku. Jeśli chcesz kierować na całą stronę, musisz dołącz klasę do całej witryny.

Oto jak pojedynczy wiersz jQuery wyglądałby jak:

 $ (". magnify"). jfMagnify (); 

To cele wszystkie elementy wewnątrz .powiększać pojemnik który jest zwykle a div element.

Te wewnętrzne elementy mogą być obrazami, ale mogą również zawierać drobny druk, na przykład na warunkach witryny lub stronach polityki prywatności. Cała dokumentacja jest dostępny w repozytorium GitHub, więc po skonfigurowaniu cały proces staje się o wiele łatwiejszy.

Ponadto ta wtyczka jest bardzo zmienna i zawiera wiele reguł dotyczących kontenerów. Na przykład element kontenera nie może mieć statycznej pozycji CSS, więc musi być względna, bezwzględna lub naprawiona.

Możesz znajdź wszystkie domyślne reguły stylu w repozytorium GitHub, ale może być ból, aby dostosować, czy układ jest już zbudowany i działa. Korzyści z jfMagnify są dla mnie warte wysiłku. Naprawdę zależy to od twoich potrzeb i tego, czy podoba Ci się interfejs.

Rzuć okiem na dokumentację na GitHub, aby zobaczyć, co myślisz. I możesz także podgląd interfejsu na CodePen, jeśli chcesz zobaczyć bibliotekę w akcji przed jej zainstalowaniem.