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ı:

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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <h2>TasarimKodlama</h2> <b>Örnek CSS Uygulamaları</b> <div class="galeri"> <a href="image/res1.png"> <img src="image/res1.png" > </a> <a href="image/res2.png"> <img src="image/res2.png" > </a> <a href="image/res3.png"> <img src="image/res3.png" > </a> <a href="image/res4.png"> <img src="image/res4.png" > </a> </div> |
Tasarım Yapısı: Bu bölümde, resim galerisini çekici kılmak için bazı CSS özellikleri ekleyeceğiz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <style> body { text-align: center; } h2 { color: green; } .galeri { margin: 10px 40px; } .galeri img { width: 200px; height: 100px; transition: 1s; padding: 5px; } .galeri img:hover { filter: drop-shadow(4px 4px 6px gray); transform: scale(1.1); } </style> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <h2>TasarimKodlama</h2> <b>Örnek CSS Uygulamaları</b> <div class="galeri"> <a data-lightbox="mygallery" href="image/res1.png"> <img src="image/res1.png" > </a> <a data-lightbox="mygallery" href="image/res2.png"> <img src="image/res2.png" > </a> <a data-lightbox="mygallery" href="image/res3.png"> <img src="image/res3.png" > </a> <a data-lightbox="mygallery" href="image/res4.png"> <img src="image/res4.png" > </a> </div> |
Uygulamada çalışan tüm kodlar aşağıdaki gibi oluşacaktır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE html> <html> <head> <title>Lightbox Galeri</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.css"> <style> body { text-align: center; } h2 { color: green; } .galeri { margin: 10px 40px; } .galeri img { width: 200px; height: 100px; transition: 1s; padding: 5px; } .galeri img:hover { filter: drop-shadow(4px 4px 6px gray); transform: scale(1.1); } </style> </head> <body> <h2>TasarimKodlama</h2> <b>Örnek CSS Uygulamaları</b> <div class="galeri"> <a data-lightbox="mygallery" href="image/res1.png"> <img src="image/res1.png" > </a> <a data-lightbox="mygallery" href="image/res2.png"> <img src="image/res2.png" > </a> <a data-lightbox="mygallery" href="image/res3.png"> <img src="image/res3.png" > </a> <a data-lightbox="mygallery" href="image/res4.png"> <img src="image/res4.png" > </a> </div> </body> </html> |
Yorum Yap