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 önermem de rol alan özellikleri;
- Tek bir dosya ile kullanımı
- Vanilla (sade) Javascript ile yazılmış olduğu için herhangi bir bağlılık içermiyor. Örneğin kullanmanız için jQuery vb. kütüphaneler olmasına gerek yok.
- Çalışması için veya çağırmak için herhangi ekstra bir javascript kodlarına ihtiyaç duymuyor. Sadece Html tarafına ekleyeceğiniz nitelikler ile kullanabiliyorsunuz.
- Oldukça güçlü bir yapısı var. En basiti ile çalıştırdığınız zaman sağ sol ok butonları, tam ekran yapma özelliği, galeride kaç öğe var hangi sırada, kapat tuşu gibi özellikleri ile birlikte açılmaktadır.
- Sadece görseller değil, HTML Video, Youtube Video, Özel Kaynaklar (Örn: Google Maps, Farklı bir video kaynağı vb.) ile kullanabiliyorsunuz.
Gördüğünüz gibi oldukça güzel özelliklere sahip. Nasıl sitenize entegre edeceğinizi adımlarla açıklayayım;
- Öncelikle indirme sayfasına buradan ulaşıp Basic versiyonunu indirin.
- Zip içinden fslightbox.js isimli dosyayı site klasörü içine ekleyin.
- Daha sonra sayfanızda fslightbox.js isimli Javascript dosyasını çağırın.
Ardından yukarıda da belirttiğim HTML tarafında yapacağınız nitelik ekleme işlemi aşağıdaki gibi olacaktır;
<!-- fslightbox galeri özelliği, href içine açılacak dosyanın yolunu yaz -->
<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>FS Lightbox kullanım aşamalarımız bu kadar. Adımları izlediğinizde ne kadar kolay bir işlem olduğunu sizde farkedeceksiniz. Her türlü projelerinizde kullanabilirsiniz. Modern bir arayüzü vardır. Umarım işinize yarar.
Mutlu Kodlamalar 🙂
