CSS, HTML ve JavaScript ile Resim Galerisi Oluşturmak

Adı : CSS, HTML ve JavaScript ile Resim Galerisi Oluşturmak

Günümüzde, web sitesi tasarımında resim galerileri oldukça popüler hale geldi. Bu galeriler, web sitelerinin daha modern ve profesyonel görünmesini sağlarken, ziyaretçilerin de site içeriğiyle etkileşim kurmasına olanak tanıyor. CSS, HTML ve JavaScript kullanarak resim galerisi oluşturmak oldukça kolaydır ve aşağıda detaylarıyla anlatacağız.
Resim Galerisi Oluşturmak için Gerekenler
Resim galerisi oluşturmak için temel olarak HTML, CSS ve JavaScript kullanmanız gerekiyor. İşe ilk olarak, projenin kök dizini içinde bir klasör oluşturun ve bu klasöre tüm resimleri ekleyin.
Resim Galerisi HTML Kodu
Öncelikle, resim galerisinin HTML yapısını hazırlamak gerekiyor. Bunun için ilk olarak div etiketleri kullanarak bir ana yapı oluşturabiliriz. Ayrıca, HTML içindeki class ve id özellikleri aracılığıyla CSS ve JavaScript kodlarına bağlantılar yapacağız.
```

```
Bu kodda, gallery-wrapper isimli div, galerinin ana yapısını oluşturur. gallery-thumbnails div'i, resim galerisinin küçük görüntüleri için bir konteyner sağlar. gallery-image div'i ise galerinin büyük görüntülerinin tutulduğu div'in yerini alır. thumbnail-X ve selected-image isimli id özellikleri ise daha sonra CSS ve JavaScript kodları tarafından kullanılacaktır.
Resim Galerisi CSS Kodu
Resim galerimizin CSS kodu, HTML içindeki class ve id özelliklerine bağlı olarak tasarlanır. CSS kullanarak galeriye gölge, kenar boşlukları ve arka plan rengi gibi stil özellikleri eklenebilir.
```
.gallery-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 20px;
background-color: white;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.gallery-thumbnails img, .gallery-image img {
width: 200px;
height: 150px;
object-fit: cover;
margin: 10px;
cursor: pointer;
}
.gallery-thumbnails img:hover {
opacity: 0.7;
}
.gallery-image img {
width: 500px;
height: 350px;
object-fit: cover;
}
```
Bu kodda, gallery-wrapper elementi, ana galeri konteynırı olarak kullanılır ve flexbox yöntemiyle konumlandırılır. Küçük resimlerin tutulduğu div'e özgü .gallery-thumbnails img özelliği ve büyük resimlerin tutulduğu div'e özgü olan .gallery-image img özelliği yazılır. Ayrıca, hover özelliği kullanılarak küçük boyutlu resimlerin yeniden boyutlandırılmasına ek özellikler eklenebilir.
Resim Galerisi JavaScript Kodu
Resim galerisinin kodlaması için JavaScript kullanımı, kullanıcının küçük resimleri tıkladığında, büyük görüntülerin değiştirilmesini sağlar. Bunun için addEventListener metodunu kullanarak tıklama olayını dinleyebiliriz.
```
const thumbnail1 = document.querySelector(#thumbnail-1);
const thumbnail2 = document.querySelector(#thumbnail-2);
const thumbnail3 = document.querySelector(#thumbnail-3);
const selectedImage = document.querySelector(#selected-image);
thumbnail1.addEventListener(click, () => {
selectedImage.src = images/image1.jpg;
});
thumbnail2.addEventListener(click, () => {
selectedImage.src = images/image2.jpg;
});
thumbnail3.addEventListener(click, () => {
selectedImage.src = images/image3.jpg;
});
```
Bu JavaScript kodunda, queryselector yöntemi kullanılarak küçük resimler tespit edilir. Daha sonra bu küçük resimlere bir tıklama olayı eklenir ve kullanıcının tıklayarak resimleri büyütmesine olanak sağlanır. Ayrıca, selectedImage.src özelliği kullanarak tıklanan resmin büyük olarak görüntülenmesi sağlanır.
Sonuç
CSS, HTML ve JavaScript kullanarak bir resim galerisi oluşturmak oldukça kolaydır. Galeriyi tasarlarken, ziyaretçilerin kolayca gezinmesi ve resimlerin yüklenmesi için optimize edilmelidir. Yukarıda örneğini verdiğimiz resim galerisi tasarımı teknikleri, yeni başlayan web tasarımcıları için iyi bir başlangıç noktasıdır. Okuyucularımızın bu örneği uygulayarak kendi resim galerilerini tasarlamalarını dileriz.