Lightbox Nedir Bootstrap İle Resim Galerisi Nasıl Yapılır?
İçindekiler
Web sitesi yapmak ve sitenizde güzel bir resim galerisi bölümü oluşturmak istiyorsanız yazımız tam size göre. Yazımızda Lightbox nedir , resim galerisi yapımında gerekli olan kütüphaneler ve nasıl yapılır konularına değineceğim. İlginizi çeken bir konu ise yazımıza hemen başlayalım.
Lightbox Nedir ?
Bootstrap kütüphanesi kullanarak sitenize bir çok özellik ekleyebileceğiniz gibi bu özelliklerden biride resim galerisidir. Web sitesi yapanlar için en gerekli bölümlerden biri olan resim galerisi bölümü yapmanıza yardımcı olmaya çalışacağım.
lightbox olarak bilinen bu resim galerisi için gerekli olan kütüphanelerden bahsetmek istiyorum. Bu sayfayı yapmak için bootstrap ve baguetteBox.min.css kütüphanesi kullanacağız. Öncelikle ihtiyacımız olan eklentilerden bahsedeyim ve kolay ulaşmanız için linklerini ekleyeyim.
- bootstrap kütüphanesinin çalışması için gerekli olan komut.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”> - baguetteBox kütüphanesi ve java dosyası da aynı sayfaya eklenmelidir.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css”><script src=”https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js”></script> - style.css bu dosya için gerekli ayarları ise konunun içine ekleyeceğim.
Lightbox Resim Galerisi Nasıl Yapılır ?
Öncelikle bootstrap kütüphanesi ve guetteBox kütüphanes css dosya linklerini <head></head> etiketleri arasına ekliyoruz. baguetteBox kütüphanesinin java dosyasınıda </body> etiketinin hemen üzerine yani body bitiminden hemen önceye ekliyoruz. ayrıca aşağıdaki
<script>
baguetteBox.run(‘.tz-gallery’);
</script>
bu java komutunu da aynı yere ekliyoruz. Daha sonra resim galerisinin html kodlarını hazırlamaya başlıyoruz. 3 resimlik örnek kodları ekleyeyim. isterseniz bu örnek kodları genişleterek çoklu bir resim galerisi yapabilirsiniz.
<div class=”tz-gallery”>
<div class=”row”>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<a class=”lighbox” href=”1.resim eklenecek“>
<img src=”1.resim eklenecek“> </a>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<a class=”lighbox” href=”2.resim eklenecek“>
<img src=”2.resim eklenecek“>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<a class=”lighbox” href=”3.resim eklenecek“>
<img src=”3.resim eklenecek“>
</div>
</div>
</div>
</div>
Burada 1. resim, 2. resim ve 3. resim yazan yerlere istediğiniz bir resim ekleyebilirsiniz. En son olarak da css dosyası düzenlemesi yapalım.
Link olarak <link rel=”stylesheet” href=”style.css”> head bölümüne ekliyelim ve bu dosyayı oluşturup içerisine yüklenmesi için gerekli olan kodlar ise :
body {
background-color: #fff;
min-height: 100vh;
font: normal 16px sans-serif;
}
.gallery-container h1 {
text-align: center;
margin-top: 69px;
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
color: #58594a;
}
.gallery-container p.page-description {
text-align: center;
margin: 30px auto;
font-size: 19px;
color: #85879c;
}
/* Styles for the gallery */
.tz-gallery {
padding: 40px;
}
.tz-gallery .thumbnail {
padding: 0;
margin-bottom: 30px;
border: none;
}
.tz-gallery img {
border-radius: 2px;
}
.tz-gallery .caption{
padding: 26px 30px;
text-align: center;
}
.tz-gallery .caption h3 {
font-size: 14px;
font-weight: bold;
margin-top: 0;
}
.tz-gallery .caption p {
font-size: 12px;
color: #7b7d7d;
margin: 0;
}
.baguetteBox-button {
background-color: transparent !important;
}
Bu yazıdaki tüm talimatlara uyarak düzenlemeler yapmışsarınız resimgaleriniz sorunsuz bir şekilde çalışacaktır. Bootstrap 4 ile farklı bir uygulama olan slider yapmayı merak ediyorsanız yazımızı inceleyebilirsiniz.
Bootstrap slider ( carousel ) nasıl yapılır ?
