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.

Bunu beğen
Paylaş

Yorumlar
Yorum Yaz
İsim : (*)
E-mail :
Web Adresi:
:
(*)
 
Kapat