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>