jQuery ile Resim Önizlemesi

jQuery ile yapılmış birçok galeri ve resim özellikleri kodlamalarının yanında sanırım bu biraz ufak tefek ve gösterişsiz kalacak.Ama resimlerin üzerine gelindiğinde ortaya çıkan bir popup ve bunu kullanmak isteyen bazı arkadaşlar olabilir. Keza benim böyle bir ihtiyacım oldu ve oturdum bu kodlarla ilgilendim. Buraya yazma nedenim de isteyen faydalanabilsin diyedir. Zamanında tooltip ile ilgili bir jQuery plugini vardır elimde. Şimdi ise ufak bir galeri scripti var 😀 Neyse. Bu script size galeri olarak ya da sayfalarınızda kullandığınız thumbnail (ufak resim) resimlerinizin üzerine gelindiğinde büyük hallerinin ortaya çıkmasını ve görünebilir hale gelmesini sağlıyor. Dediğim gibi ufak bir galeri oluşturabilirsiniz bu kodlarla.

Bir diğer özelliği de büyük kodlamalardaki gibi açılan popup alanının fare imlecine olan uzaklığı. Yani siz resmin üzerine gelidğinizde popup direk resmi kapatmıyor, fare imlecinin yanında açılarak her iki resminde görünmesini sağlıyor.Kodlara geçelim isterseniz.

Öncelikle javascript kodlarımızı görelim;

Kodlar;

Yukarıdaki kodlarda görebileceğiniz gibi bir ayar alanı var. Buradan x ve y ofsetlerini ayarlayarak açılacak popup alanının fare imlecine uzaklığını ayarlayabiliyorsunuz. Bunu seçmek size kalmış. Ve diğer ayarlar da görebileceğiniz gibi resmin yolunu belirten a alanına bir rel kod atadım. Bunun adını da popupacil olarak belirledim. buraları dilediğiniz gibi değiştirebilir, benim rel olarak atadığım alanları class olarak da düzenleyebilirsiniz. Bu değişiklği yaptığınızda aşağıdaki HTML kodlarında da gerekli değişiklikleri yapın. Bir de fadeIn değer olarak sabit bir değer bıraktım . Bunun iki opsiyonu var slow ve fast. slow opsiyonu 600ms, fast opsiyonu 200ms, benim bıraktığım gibi kalırsa varsayılan gecikme değeri olarak 400ms belirlenir. Bunu değiştirmek için tırnak işaretlerini kullanarak fadeIn(“slow”) ya da fadeIn(“fast”) olarak belirtebilirsiniz.

Sonra da html dosyamızı oluşturalım ve kodlarımızı çağıralım.

Önce kodlarımızı çağıralım. jQuery kaynağı olarak kendi sitesini kullandım. Siz dilediğiniz bir adresi veya kendi sitenizdeki jQuery dosyasını çağırabilirsniz.

Sonra da araya stil kodlarımızı serpiştirelim. Burada #onizleme alanı bizim popup alanımız için ayarlanmıştır. Siz renkleri ve diğer değişkenleri istediğiniz gibi ayarlayın.

Stil kodları da bittiğine göre resimlerimizi ekleyelim. Burada unutmamanız gereken link alanındaki rel kodlamasıdır. Bütün resimlerin linklerini atarken rel=”popupacil” kodunu eklemeyi unutmayın.

Bütün işlem bundan ibaret. Canlı örnek için buraya tıklayın. İndirmek için aşağıda kaynak kodlarını ve resimleri size aktarıyorum.

Hadi Selametle.

 

Gelen Aramalar:

  • jquery de resim degis tokusu yapan kod
  • jquery resim üzerine gelince
  • sudeys

    ben denedım asp.net uzerınde ama bır turlu cıkmadı resım var uzerıne gelınce cıkması gereken popupda cıkmıyor

    <img src="urunler/" border="0" alt="" title=" " width="120" height="120"> kodda bu neden sorun cıkıyor

    • sudeys a href olarak belirttiğin link resmin büyük hali olmazsa sanırım söylediğin sorunu yaşarsın. bir de benim yaptığım gibi resmi link olarak eklemeyi dene. Benim buradaki amacım galeri tarzında resmi gösteren bir önizleme yaptırmak. senin verdiğin link hatalı

  • Nevzat ÇAVUŞ

    Öncelikle Kod için teşekkür ederim,

    js içerisinde ki

    $("body").append(""+ c +"");

    satırında width ve heigh değerlerinide ekleyerek resmin istediğim boyutta açılmasını sağladım, çok işime yaradı tekrar teşekkür ederim…

WordPress gururla sunar.Theme: Flat by YoArts. WpAdamı Uyarlaması : Serkan Algur