Ajax ( lytebox ) ile tıklayınca büyük açılan resimler
Merhaba
Bu makalede daha çok foto galerilerde kullanılan bir ajax uygulaması yapıyoruz.
Sitemizin resim galerisindeki küçük olarak açılan resimlerin üzerine tıklandığında resimler büyük olarak açılacak ve resmin sağ ya da soluna tıklanarak da galerideki tüm resimler gezilebilecek.
Resimlerin açılışı da animasyonlu bir şekilde olacak.
Malzemeler ;
1) images klasörü -> Bu klasörde slayt içindeki ileri geri kapat gibi küçük gif resimlerimiz yer alıyor.
2) resimler klasörü -> Bu klasörde slayt içinde kullanılacak resimlerimiz bulunuyor.
3) lytebox.js dosyası -> Bu JavaScript dosyamız hazır olarak geliyor ve asıl işi o yapmakta J
4) lytebox.css dosyası -> Bu slayt animasyonun stil dosyası , isterseniz değişiklikler yapabilirsiniz.
Kullanım ;
HTLM kodlar:
Öncelikle kullanacağımız JS ve CSS dosyalarını sayfamıza eklememiz gerekiyor .
Sayfanın <head> tagının içerisine aşağıdaki gibi ekleme yapıyoruz.
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
Şimdi de <body> nin içine geçelim ;
<a href="resimler/mavi.jpg" title="Mavi " rel="lytebox[vacation]">
<img src="resimler/mavi.jpg" alt="sasa" width="50" height="50" />
</a>
<a href="resimler/kirmizi.jpg" title="Al" rel="lytebox[vacation]">
<img src="resimler/kirmizi.jpg" width="50" height="50" />
</a>
<a href="resimler/yesil.jpg" title="Yesil" rel="lytebox[vacation]">
<img src="resimler/yesil.jpg" width="50" height="50" />
</a>
Hepsi bu. Burada önemli nokta <a elementinin rel özelliğinin unutulmaması .
Resme Tıklandıktan Sonra
(Animasyon içindeki önceki,sonraki ,kapat gibi iconları PhotoShop da açıp Türkçeye çevirebilirsiniz.)
Tabi ki bütün bu işlemleri dinamik olarak (Asp,Asp.Net,Php. ile ) ,resimlerin yolunu Veritabanından çekerek de yapabiliriz.
Uygulamayı ve gereken dosyaları Buradan indirebilirsiniz.
Kolay Gelsin.
