zoom effect

Loupe efekti belirlediğiniz bir resim üzerinde kullanıcılarınızın büyüteç ile zoom yapabilmesini sağlayan basit kullanışlılı bir js uygulaması. Aslında genel tabiriyle güzel bir ajax uygulamasıda diyebiliriz. okumanız dahil bir kaç dakika içerisinde kolayca uygulayabilirsiniz.

Başlangıç:

Öncelik loupe.js isimli dosyayı indiriyoruz ve içinden çıkan loupe.js ve louge.png adlı dosyaları yapacağınız html sayfasının bulunduğu dizine çıkartıyorsunuz. html sayfamızın <head> kısmını aşağıdaki kodları girerek ayar yapıyoruz

// büyüteç efekti olan "loupe.png" nin bulunacağı dizini belirtelim
<scriptscript type="text/javascript">var loupePath="resimler/";</script>
// burası aynı kalabilir
<script type="text/javascript" src="loupe.js"></script>

Kullanım:

Aşağıdaki kodu sayfanızın uygun yerine düzenleyerek koyuyorsunuz. 

<div>
<img id="..." onLoad="initLoupe(this.id);" src="..." width="356" height="205" alt="...">
</div>

 Hepsi bu kadar.

 

kaynak: http://www.netzgesta.de/loupe/

Yorumlar

Yeni yorum gönder

Bu alanın içeriği gizli tutulacak ve açıkta gösterilmeyecektir.
  • Web sayfası ve e-posta adresleri otomatik olarak bağlantıya çevrilir.
  • Allowed HTML tags: <a> <cem> <strong> <small> <sup> <sub> <cite> <blockguote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3> <h4> <img> <br> <br /> <p> <div> <span> <b> <i> <h1> <front>
  • Satır ve paragraflar otomatik olarak bölünürler.

Biçimleme seçenekleri hakkında daha fazla bilgi