Lightbox Effect Kullanımı

HTML, ASPX, PHP, yada WORDPRESS Tema projelerinizde kullanıcılarınızı heyecanlandırmak ister misiniz? Lightbox Effect Kullanımını arıyorsanız doğru yerdesiniz çünkü kullanmanızı mutlaka önerdiğim efektli resim açma olayını hemen anlatacağım;

Adım Adım Lightbox Effect Kullanımı:

1) BURADAKİ adrese giderek işe başlıyoruz
2) by Lokesh Dhakar tarafından hazırlanan js/css kütüphanesini projeye dahil edebilmek için öncelikle son version paketi buradan download ediyoruz.

3) Projeye kütüphaneyi dahil etmek:

dist klasörü içinde yer alan aşağıdaki dosyaları projenizin ilgili klasörüne yapıştırın ve aşağıdaki gibi head etiketleri arasına linkleyin

<link href="cssKlasorunuz/lightbox.css" rel="stylesheet" />
<script src="jsKlsorunuz/lightbox.js"></script>

Ardından mutlaka unutmamanız gerken bir şey;

*/dist/images klasöründeki görselleri de projenizin img dizinine atmayı unutmayın ve bu img’lerin konumlarını lightbox.css içinde düzenleyin.

Ardından projenizde yer alan tıklanınca ilgili resmin efektli bir şekilde gelmesi için data-lightbox=”image-1″ data-title=”My caption” şeklinde ekleme yapın

Örneğin eklenmemiş hali:

<a href="images/image-1.jpg">Resim #1</a>

İlgili Efektin Eklenmiş Hali:

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Resim #1</a>

Birden fazla aynı gruptan görsel varsa ve bu görseller arası ileri geri işlevinin çalışmasını istiyorsanız hepsine image-1 şeklinde aynı etiketi girmelisiniz.

Örneğin Birden Fazla Resmin Aynı Grup Altında Lightbox Effect Kullanımı :

<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.