fslighbox.js Kullanımı
Merhabalar,
Bu yazımda fslightbox.js ile sitenize en kolay ve hızlı şekilde kurabileceğiniz Lightbox eklentisinden bahsedeceğim. Tam ismi Full Screen (Tam Ekran) Lightbox olarak geçmektedir. Öncelikle sitesini ziyaret etmenizi öneririm. Oldukça dikkat çeken mükemmel özelliklerini az çok kavrayabilirsiniz.
Benim en çok dikkatimi çeken ve size önermemde rol alan özellikleri:
- Tek bir dosya ile kullanımı
- Vanilla (sade) Javascript ile yazılmış olması – herhangi bir bağlılık (örneğin jQuery) içermiyor
- Çalışması için ekstra bir Javascript kodu gerektirmiyor, sadece HTML tarafında nitelik eklemeniz yeterli
- Sağ-sol okları, tam ekran, sıra sayacı, kapatma tuşu gibi birçok özelliği barındırıyor
- Yalnızca görseller değil, HTML video, Youtube, Google Maps gibi kaynaklarla da kullanılabiliyor
Gördüğünüz gibi oldukça güzel özelliklere sahip. Şimdi kurulum adımlarına geçelim:
- Buradan Basic sürümünü indiriyoruz.
- Zip dosyasının içindeki fslightbox.js dosyasını sitenizin klasörüne ekleyin.
- HTML dosyanızın en altına bu dosyayı dahil edin.
HTML tarafında yapmanız gereken kullanım aşağıdaki gibi olacaktır:
<!-- fslightbox galeri özelliği, href içine açılacak dosya yolunu yazın -->
<a data-fslightbox="gallery" href="gorsel.jpg">
<!-- Normal görsel, tıklanacak element -->
<img src="gorsel.jpg">
</a>
<!-- Dosyayı çağırmayı unutmayın - sadece 1 dosya :) -->
<script src="fslightbox.js"></script>
fslightbox.js eklentisinin kurulumu işte bu kadar basit. Ne kadar kolay olduğunu uyguladığınızda siz de fark edeceksiniz. Projelerinizde modern ve hafif bir galeri çözümü arıyorsanız kesinlikle öneririm.
Mutlu Kodlamalar :)
