jfMagnify ile Sitenize Büyüteç Efekti
İnanılmaz derecede iyi çalışan çok sayıda ücretsiz yakınlaştırma eklentisi bulunmaktadır. Bununla birlikte, bunların çoğu görüntüler için üretilmiştir ve yalnızca resim amaçlı içerik için yön belirtirler.
Web sayfanızın her bölümüne büyüteç efekti eklediyseniz ne olur? JfMagnify sayesinde, yapabilirsiniz.
Sadece görüntü yakınlaştırmayı değil aynı zamanda tüm sayfa yakınlaştırmayı da destekleyen ücretsiz bir jQuery eklentisidir. Büyüteç seviyesini seçmenizi sağlayan ve mobil kullanıcılar için dokunmatik etkinlikleri destekleyen birkaç eklentiden biridir.
Bu eklentinin biraz bağımlı hissedebileceğini unutmayın çünkü iki bağımlılığa güveniyor: düzenli jQuery ve jQuery UI. Bunların ikisi de jfMagnify’ın düzgün çalışması için gereklidir. Gerçek jfMagnify komut dosyasından bahsetmemek için sayfanıza eklemeniz gerekecektir.
Bir containerde büyütülmüş öğeleri yalnızca hedefleyebildiğiniz için kurulum biraz zor. Sayfanın tamamını hedeflemek istiyorsanız, tüm web sitenize bir sınıf eklemeniz gerekir.
Tek jQuery satırı şöyle görünür:
$(".magnify").jfMagnify();Bu, genellikle bir div öğesi olan .magnify kapsayıcısındaki tüm öğeleri hedefler.
Bu dahili öğeler görüntü olabilir, ancak örneğin siteyle ilgili terimlerle veya gizlilik politikası sayfalarında da küçük baskılar içerebilir. Tüm dokümantasyon, GitHub repo’sunda mevcuttur, bu yüzden kurduktan sonra tüm süreç daha kolay hale gelir.
Ayrıca, bu eklenti çok kararsızdır ve birçok konteyner kuralıyla birlikte gelir. Örneğin, konteyner öğesi statik CSS konumuna sahip olamaz, dolayısıyla göreceli, mutlak veya sabit olması gerekir.
Tüm varsayılan stil kurallarını GitHub repo‘sunda bulabilirsiniz ancak düzeninizin önceden oluşturulup oluşturulmadığını özelleştirmek bir acı olabilir.
Düşündüğünüz şeyleri görmek için GitHub’daki dokümanlara göz atın. Ayrıca, kütüphaneyi kurmadan önce hareket halinde görmek istiyorsanız, arayüzü CodePen’de önizleyebilirsiniz.
Bu makalede sitenize büyüteç efektini uygulayabileceğiniz jfMagnify kütüphanesinden bahsettik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.
