JfMagnify ile web sayfanıza büyütme efekti ekleyin

Bir sürü var ücretsiz yakınlaştırma eklentileri Bu inanılmaz derecede iyi çalışıyor. Ancak, bunların çoğu görüntüler için oluşturulmuş ve onlar için yön belirtiyorlar yalnızca resim içeriği.

Ya yapabilseydin büyüteç efekti ekle web sayfanızın her bölümüne? Sayesinde jfMagnify, yapabilirsin.

Bu bir ücretsiz jQuery eklentisi yalnızca görüntü yakınlaştırmayı değil, aynı zamanda tüm sayfa yakınlaştırma. Aynı zamanda size izin veren birkaç eklentiden biri büyütme seviyesini seç ve dokunma olaylarını destekler mobil kullanıcılar için.

Not Bu eklenti biraz ağır hissedebilirsiniz çünkü iki bağımlılığa dayanır: düzenli jQuery ve jQuery UI. Her ikisi de jfMagnify'ın düzgün çalışmasını sağlamak için gereklidir. Bahsetmiyorum bile gerçek jfMagnify betiği sayfanıza eklemeniz gerekecek.

Kurulum biraz zor, çünkü yalnızca büyütülmüş öğeleri hedefleyebilirsiniz. bir kap içinde. Tüm sayfayı hedeflemek istiyorsanız, yapmanız gereken tüm web sitenize bir sınıf ekleyin.

İşte nasıl jQuery tek satır Benzeyecekmiş gibi:

 $ ( "Büyütmek") jfMagnify ().; 

Bu hedefler içindeki tüm öğeler .büyütmek konteyner bu genellikle bir div eleman.

Bu iç öğeler görüntü olabilir, ancak aynı zamanda küçük baskı dahil, örneğin site şartları veya gizlilik politikası sayfalarında. Tüm belgeler GitHub deposunda mevcut, Böylece, bir kez ayarladıysanız, tüm işlem çok daha kolay hale gelir.

Ayrıca, bu eklenti çok kararsız ve birlikte geliyor birçok konteyner kuralı. Örneğin, konteyner elemanı statik bir CSS pozisyonu olamaz, bu yüzden göreceli, mutlak veya sabit olması gerekir.

Yapabilirsin tüm varsayılan stil kurallarını bul GitHub deposunda, ancak düzeniniz zaten kuruluysa ve çalışıyorsa, kişiselleştirilmesi acı verici olabilir. JfMagnify'ın faydaları benim için çabaya değer. Gerçekten gereksinimlerinize ve arayüzü beğenip beğenmediğinize bağlı.

Ne düşündüğünüzü görmek için GitHub'daki belgelere bir göz atın. Ve ayrıca arayüzü önizle Kitaplığı kurmadan önce çalışırken görmek istiyorsanız CodePen'e.