Ajax Örnekleri | Lightbox | Öne Dogru Açılan Resim

Nedir bu lightbox : Çogunlukla ajax dilinde duydugumuz bir kelimedir. Resmin küçük boyutuna tıklayınca büyük resmin açılması sonucu oluşan şekle lightbox deniyor. Örneğimize geçelim ;

Nasıl Kullanılır

Öncelikle dosyamızı indirmeniz gerekecektir.

Lightbox Download

Kurulum

1. Lightbox Prototip Çerçevesi ve Scriptaculous Etkileri Kütüphane kullanır. Size başlık Bu üç Javascript dosyaları bu sıraya () eklemeniz gerekir.

<script type=”text/javascript” src=”js/prototype.js”> </ script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder”> </ script>
<script type=”text/javascript” src=”js/lightbox.js”> </ script>

2. Lightbox CSS dosyası ekleyin (veya) Lightbox stilleri ile aktif stil ekler.

<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />

3. CSS kontrol edin ve başvurulan prev.gif ve next.gif dosyaların doğru yerde olduğundan emin olun. Ayrıca, loading.gif ve close.gif olarak lightbox.js dosyanın en yakın başvurulan dosyaları emin olun doğru konumda bulunmaktadır.

Etkinleştir

1. Herhangi bir bağlantı için lightbox etkinleştirmek tag = “lightbox” özniteliği rel ekleyin. Örneğin:

<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”> image # 1 </ a>

Eğer bir başlık göstermek istiyorum Opsiyonel: Başlık özniteliğini kullanın.
2. Eğer ilgili görüntülerin bir dizi grup isterseniz, aşağıdaki adım ama ayrıca rel özelliğinde köşeli parantez arasında bir grup adı yer var. Örneğin:

<a href=”images/image-1.jpg” rel=”lightbox[roadtrip]”> image # 1 </ a>
<a href=”images/image-2.jpg” rel=”lightbox[roadtrip]”> image # 2 </ a>
<a href=”images/image-3.jpg” rel=”lightbox[roadtrip]”> image # 3 </ a>

Sayfa başına görüntü kümelerinin sayısı sınırı yok veya kaç görüntü her sette izin verilir.

Klasör içinde daha ayrıntı bilgileride bulacaksınız.

Kolay Gelsin.

Yazar: Samet Dinçer

Samet Dinçer sitemizde 13 yazı eklemiş...

27,09,1991 Rize Dpğumluyum İlkokulu 3 değişik okulda okudum ilk sene Çayeli Fikri Keçeli İlköğretim Okulu 2-3-4-5 Rize Şevket Yardımcı İlköğretim Okulu 6-7-8 Rize Çaykur İlköğretim Okulunda okudum lise hayatımın tamamını Rize Mimar Sinan İMKB(Hasan Kemal Yardımcı Lisesi yeni adı) Lisesinde Okudum. Üniversiteyide inş güzel bir okulda okuyup hayat okuluna tek başıma devam etmeye başlarım.

• Tüm yazıları-> Samet Dinçer →
• Kişisel Sayfası