Pazar 22 Mayıs 2022
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Whitepaper Nedir?

Tailwind CSS, Bootstrap’in Yerini Alabilir mi?

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. JavaScript
  3. Lightgallery.js ile Tam Ekran Lightbox Slayt Gösterisi
 Lightgallery.js ile Tam Ekran Lightbox Slayt Gösterisi
JavaScript

Lightgallery.js ile Tam Ekran Lightbox Slayt Gösterisi

Yazar : Fatih 13 Mart 2017 1 Comment

Fotoğraflarınızı blog veya portfolio web sitelerinizde lightbox slayt gösterisi haline getirebilirsiniz. Fotoğrafların güzel bir şekilde sergilenmesi veya ziyaretçilere bir portföy(tasarım, sanat, fotoğrafçılık) sunarak fotoğraflara rahat bir şekilde göz atmalarını sağlayabilirsiniz.

Lightgallery.js kütüphanesini kurup çalıştırıp, istediğiniz sayıda fotoğraf yükleyip tam ekran lightbox slayt galerisi şeklinde fotoğraflarınızı sunmak oldukça kolay hale geliyor.

Lightgallery.js ile son kullanıcının tüm odağı slayt gösterisine yani tıklanan resime gidiyor. Her slaytın alt kısmında fotoğraf bağlantıları veya ilgili istediğiniz metni içeren küçük bir açıklama bulabilirsiniz. Üst kısımda genişletilmiş özellikler içeren bir dizi button(düğme) görürsünüz. Sırasıyla onlardan bahsedelim.

  • Slayt gösterisini oynat
  • Yakınlaştırma / uzaklaştırma
  • Tarayıcı tam ekran
  • Sosyal paylaşım
  • Resim indir
  • Slayt gösterisini kapat

Eklentiyi çağırdığınızda seçenekleri düzenleyerek bu button(düğme)ların hangisini görüntülemek istediğinizi seçip ayarlayabilirsiniz. İstediğiniz seçeneklerde kullanmanız için çeşitli yöntemler vardır. Özel veri nitelikleri, Sass değişkenleri, hatta lightgallery’e modüller oluşturmak için bir eklenti API bilgisi bulabilirsiniz.

Mobil uyumlu olduğunu söylemekte fayda var. Fotoğrafları, parmağınızla veya fare ile galeri boyunca hızlıca geçebilirsiniz. Portfolyolarını sitelerinde sergilemek için mükemmel bir yöntem isteyen bir tasarımcı veya fotoğrafçı için mükemmel bir seçimdir.

Hatta iframe’leri veya YouTube veya Vimeo gibi sitelerdeki videoları yerleştirebilirsiniz. En iyi kullanıcı deneyimini sunan lightbox galeri eklentisidir.

Bu kütüphane tüm bağımlılıklardan uzaktır ve saf JavaScript ile çalışır. jQuery veya Bootstrap gibi büyük kütüphanelerle birlikte çalışır.

Demolar sayfasında çeşitli demoları görebilir veya aşağıdaki mutfak uygulamamızı kontrol edebilirsiniz. Eğer kaynak koduna ihtiyacınız varsa GitHub repo‘suna gidip bir kopyasını alabilir ve geliştirebilirsiniz.

Umarım faideli olmuştur. Değerli zamanınızı Webmaster Kitchen‘e için ayırdığınız için teşekkür ediyoruz. Verimli çalışmalar diliyorum. Esenle kalın. 🙂

See the Pen PpjQqG by Fatih (@fatihozel) on CodePen.

Etiketler: Lightbox Lightbox demoları lightbox fotoğraf galerisi lightbox galeri nasıl yapılır lightbox resim galerisi Lightbox uygulaması Lightgallery.js Mobil uyumlu lightbox galeri
Önceki Yazı
Sonraki Yazı

Fatih

author

1 Yorum

  • furkan says:
    14 Şubat 2021 at 00:13

    Teşekkür ederim, sayende aradığımı buldum.?

    Reply

Yorum Yap furkan Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Blockchain

Whitepaper Nedir?

21 Nisan 2022
Arayüz

Tailwind CSS, Bootstrap’in Yerini Alabilir mi?

20 Nisan 2022
Arayüz

JavaScript ile Otomatik Koyu Tema

15 Nisan 2022
Güncel

Jest Kullanarak React Native Nasıl Test Edilir?

13 Nisan 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.