Bilişimcilerin Otağı

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.

Related posts

• Mootools Örnekleri -7 Kayan İçerik
• Jquery Tab Menü 2
• Jquery slayt
• Jquery Örnekleri-Akordion 1
• Mootools Örnekleri - 6 Accordion menü
• Jquery Örnekler
• Jquery resimli menü
• Jquery resim galeri
• Jquery Nivo Slider