jQuery ile Fotoğraflarınızı Yakınlaştırın
jQuery sayesinde artık web sayfalarımızı dilediğimiz gibi kişiselleştirebiliyoruz. jQuery’nin kütüphanesinin dosyasını sayfamıza dahil ettiğimizde bu araç sayesinde benzersiz düzenlemeler yapabiliriz. Bugünkü yazımızda jQuery kullanarak sayfamızdaki fotoğraflara yakınlaştırma (zoom) yapabileceğiz.
Bunun için ilk önce yapmamız gereken sayfamızın stil dosyasına (.css) aşağıdaki tanımlamamızı girelim.
.zoom{
float:left;
}
Daha sonra jQuery kütüphanemizi sayfamıza dahil edelim. Aşağıdaki kodumuzu sayfamızın head tagları arasına giriyoruz.
<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.imageZoom.js" type="text/javascript" charset="utf-8"></script>
(*) Dosya yollarını kendinize göre düzenleyiniz.
Şimdi sıra fonksiyonumuzu çağırmaya geldi. Fonksiyonumuzu;
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.zoom').imageZoom({captionHeight:40});
});
</script>
ile çağırıyoruz. Fonksiyonumuzda kullanabileceğimiz bazı parametreler mevcut. Bu parametreler ile detayları istediğimiz şekilde ayarlayabiliyoruz. Kullanılabilecek parametreler;
- color – caption yazı renk kodu (örn. “#ff0000”)
- bgColor – caption arkaplan renk kodu (örn. “#ff0000”)
- opacity – caption geçirgenlik (örn. 0.5)
- captionHeight – caption yüksekliği (örn. 40)
- fontSize – caption yazı büyüklüğü (örn. “10pt”)
- fontFamily – caption yazı tipi (örn. “Arial, sans-serif”)
Bu parametrelerin kullanımı örnek olarak;
$(.zoom).imageZoom({captionHeight:30, color:”#000000”, bgColor:”#ccc”});
şeklinde kullanılabiliyor.
Yakınlaştırma yapılacak resimlerimize class değeri olarak zoom atayacağız. Bunun için resmimizi çağırdığımız koda
<img src="portalimiz1.jpg" alt="Portalimiz.Com" class="zoom" />
örnekteki gibi class eklememiz yeterli olacaktır. Bu değişikliği yaptıktan sonra resimlerimizin üzerine geldiğimizde resimlerimiz yakınlaşacaktır.
Eklentinin örnek kullanımı : http://www.devirtuoso.com/Examples/ImageZoom/index.html
Eklenti dosyaları: http://www.devirtuoso.com/Examples/ImageZoom/plugin.zip
Kaynak: http://www.devirtuoso.com/2009/08/jquery-image-zoom-plugin/