zoom.js - Yazılarınızı yakınlaştırın!

Bir kaç gün önce Facebook üzerindeki bir grupta gördüğüm bu acayip ve güzel JavaScript eklentisini sizlerle paylaşmak istedim . Zoom.js nin görevi ne ondan başlayalım. Normalde her tarayıcının Yakınlaştırma ayarı %100′dür kullanıcı okuyamadığı zaman yakınlaştırmak zorunda kalır ve yakınlaştırınca sayfa içindeki css kodlarımız birbirleriyle uyumsuz hale gelir ve ortaya kötü bir görüntü çıkar. Hakim El Hattab isimli bir Webmaster Zoom.js isimli bu eklentiyi çıkarmış ortaya ki bu eklenti sayfa içinde çok güzel çalışıyor. İstediğiniz bir div’i veya nesneyi belirleyip onun sol tıklamayla yakınlaştırılmasını sağlayabiliyorsunuz. Ben sizin için bu yazı içerisinde yazı divini belirledim ve zoom.js den yakınlaştırmaısnı istedim. Eğer bu yazıya tıklarsanız mutlaka yakınlaşıcaktır. Deneyin

Eklentiden kısaca bahsettikten sonra kullanımını görelim.

Öncelikle zoom.js eklentisini sayfamıza çağırmamız gerekiyor. Bunun için Hakim’in GitHub linkinden eklentimizi indiriyoruz. Eklentimizi indirdikten sonra içindeki js klasöründeki zoom.js dosyasını hostumuzda uygun yere atıyoruz. Daha sonra tagından hemen önce aşağıdaki kodları ekliyoruz

<script></script>
<script>
document.querySelector( 'body' ).addEventListener( 'click', function( event ) {
event.preventDefault();
zoom.magnify({ element: event.target });
} );
</script>


[zoom.js'nin bulunduğu yol] yazan yeri kendi yüklediğiniz yola göre düzenliyorsunuz örnek:  http://kodbilen.com/ornekler/zoomjs/zoom.js gibi.



document.querySelector( ‘body’ ) sayfanızda hangi bölümü yakınlaştıracağını seçer. body derseniz body kısmını veya bir resmi isterseniz örnek: img#facebook gibi id=”facebook” olan tüm resimleri yakınlaştırır.



İşte bir javascript eklentinin daha sonuna geldik. Sonraki yazımızda görüşmek üzere hoşçakalın!



Kaynak: http://kodbilen.com/zoom-js-yazilarinizi-yakinlastirin.html  

Bu tercihimdir :)
http://janne.aukia.com/zoomooz/

wordpress te hangi tema dosyasına ekleyecez?
single mi index mi header mi?
bulamadım

Çok hoş bir script. Lakin bu tür ilgi çekici özelliklerin birden fazlasını kullanmamız sonucu sitelerimiz yavaş yüklenme sorunuyla karşılaşabiliyor.

bu güzelmiş ;)

arkadaşlar bunu wordpress te çalıştıramadım sinir oldum:)
yardım edebilir misiniz?

Bunu bende beğendim şimdi :D.



Öncelikle footer.php dosyasını açın. tagını bulun hemen üstüne:

<script>/js/zoom.js"></script>
<script>
document.querySelector( 'body' ).addEventListener( 'click', function( event ) {
event.preventDefault();
zoom.magnify({ element: event.target });
} );
</script>
ekleyin. tema dosyanıza girin js klasörü varsa zoom.js yi içine atın yoksa oluşturup atın :).

yaptımda yazı içindeki linkler çalışmıyor sorun çıkarıyor kaldırdım geri :)
Teşekkürler..