Resim Lightbox Galerisi Oluşturma – Tasarım Kodlama
CSS HTML Jquery

Resim Lightbox Galerisi Oluşturma

Bir light box  galerisi temel olarak galeri görüntülerini ayrıntılı olarak görüntülemek için kullanılır. Bunu yapmak için JavaScript kodlayabilir, ancak indirilen bazı JS ve CSS’leri de kullanabiliriz. Bu makalede, ışık kutusunu indireceğiz ve JS ve CSS dosyalarını kodumuza ekleyeceğiz. Kendi tasarım memnuniyetimiz için CSS kodunu istediğimiz gibi kullanabiliriz. Görevi üç bölüme ayıracağız. İlk bölümde, kendi amacımız için som CSS ekleyeceğimiz ikinci bölümde yapı oluşturacağız. Son bölümde, indirilen JS snd CSS dosyalarını bağlayacağız.

Çıktı:

Jquery Lightbox Yapımı

Jquery Lightbox Yapımı

Işık kutusunu indirmeliyiz, bunu bağlantıdan indirebiliriz: https://github.com/lokesh/lightbox2/releases

Yapı Oluşturma: Bu bölümde, normal bir HTML galeri oluşturmak için yalnızca HTML’de kodlayacağız.

 

Tasarım Yapısı: Bu bölümde, resim galerisini çekici kılmak için bazı CSS özellikleri ekleyeceğiz.

Son Çözüm: Bu bölümde indirilen CSS ve JS dosyasını kodunuza bağlamanız gerekir. İndirilen dosyayı, dosyayı açarak bağlayabilirsiniz.

CSS dosyası için, CSS adresi için href özniteliğine sahip <link> etiketini ve JS dosyası için kod için src özniteliğine sahip <script> etiketini kullanın. Atlast, data> lightbox = ”mygallery” özelliğini <a> etiketinin içine koymalıyız. JS dosya eki sırasında sonraki ve önceki düğme otomatik olarak eklenecektir.

 

Uygulamada çalışan tüm kodlar aşağıdaki gibi oluşacaktır.

 

Yorum bırak