fslighbox.js Kullanımı

fslighbox.js Kullanımı
fslighbox.js Kullanımı
Bu yazımda fslightbox.js ile sitenize en kolay ve hızlı şekilde kurabileceğiniz Lightbox eklentisinden bahsettim. Sitenize eklemek ve nasıl kullanıldığını öğrenmek için yazımı inceleyebilirsiniz.

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;

  1. Öncelikle indirme sayfasına buradan ulaşıp Basic versiyonunu indirin.
  2. Zip içinden fslightbox.js isimli dosyayı site klasörü içine ekleyin.
  3. 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 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Siteye Loader Ekleme
Devamını Oku

Siteye Loader Ekleme

Yüklenme aşamasında kötü görünümü engellemek amacıyla güzel yükleniyor simgeleri oluşturma ve entegresi bu yazımda anlatılmıştır. İçeriğin devamı için detayını inceleyebilirsiniz.

Devamını Oku