xZoom Jquery Galeri Görsel Yakınlaştırma
xZoom web sitelerindeki görsellere yakınlaştırma efekti vermek için oluşturulmuş bir Jquery kütüphanesidir. Kullanımı gayet basit, responsive destekli olduğundan dolayı mobil cihazlarda da verimli ve çoğu web tarayıcısı ile uyumlu çalışıyor. İhtiyaca göre kişiselleştirilebildiğinden dolayı da daha avantajlı kullanımı oluyor. Zoom efekti genel olarak e-ticaret sitelerinde galeri görsellerini yakınlaştırmak için kullanılsa da blog sitelerinde veya herhangi bir içerik sitesinde de kullanılabilir. Ayrıca xZoom kütüphanesi, Apache License 2.0 sertifikasına da sahip.
xZoom Efekt Çeşitleri
Kütüphanenin sağladığı 5 farklı yakınlaştırma efekti bulunuyor.
1. Default Options
Bu efekt mevcut görsel yanında en basit halde yakınlaştıma sağlıyor. Ayrıca her bir görsel için de görsel altına açıklama başlığı yazılabiliyor. Yakınlaştırma efekti esnasında farenin orta tekerleği kullanıldığında görselin yakınlaştırma oranı değişiyor.
2. Output Window
Bir önceki efekte göre yakınlaştırma yaptığı ekranı daha küçük olarak gösteriyor. Bu efekt üzerinde görsel altına açıklama başlığı yazılamıyor.
NOT: Zoom ekranı normalde görsellerin hemen sağında çıkıyor fakat örnek Jsfiddle.net üzerinden yansıtıldığı için dar alanda gösterim yapıyor bu yüzden zoom ekranını alta kaydırıyor.
3. Lens Options
Lens seçeneğinde büyüteç efekti oluşuyor. Farenin orta tekerleği veya touchpad ile lensin büyüklüğü ayarlanabiliyor.
4. With FancyBox
With FancyBox efektinde kullanıcı fareyi görselin üzerinde sürüklediğinde görseli yakınlaştırıyor. Eğer görselin üzerine tıklanırsa tıklanılan görseli daha büyük boyutta açıyor. Bunun dışında açılan büyük görselden diğer görsellere de geçiş yapılabiliyor.
5. With Magnific Pop-up
Magnific Pop-up efektinin FancyBox efektinde farkı mobil görünümde tek dokunuşta açılan tam ekran yakınlaştırmanın üzerine 2 kez dokunulduğunda pop up şeklinde yakınlaştırma efekti oluşuyor. Fakat bu görünüm FanycBox efektinde oluşmuyor.
xZoom Uyumlu Olduğu Tarayıcılar
- IE6+ (Internet Explorer 6 ve üzeri)
- Chrome
- Firefox
- Opera
- Safari
Kaynakça:
https://payalord.github.io/xZoom/