Html Javascript Ile Galeri Ekleme

HTML ve JavaScript ile Galeri Ekleme

Bir web sayfasına galeri eklemek, kullanıcıların birden fazla görüntüyü düzenli ve etkileşimli bir şekilde görüntülemesine olanak tanır. HTML ve JavaScript kullanarak, dinamik ve özelleştirilebilir galeriler oluşturabilirsiniz.

HTML Yapısı

Bir galeri oluşturmak için öncelikle HTML yapısını oluşturmanız gerekir. Bu yapı, bir div öğesi içinde bir dizi img öğesi içerir:

“`html

Resim 1
Resim 2
Resim 3

“`

gallery sınıfı, galeriye stil vermek için CSS’de kullanılabilir. alt özniteliği, görüntünün alternatif metnini sağlar ve erişilebilirlik için önemlidir.

JavaScript İşlevselliği

JavaScript kullanarak galeriye etkileşimli özellikler ekleyebilirsiniz. Örneğin, kullanıcıların görüntüler arasında gezinmesine, yakınlaştırmasına ve uzaklaştırmasına olanak tanıyabilirsiniz.

Görüntüler Arasında Gezinme:

“`javascript
const images = document.querySelectorAll(‘.gallery img’);
let currentImageIndex = 0;

const nextButton = document.querySelector(‘.next-button’);
nextButton.addEventListener(‘click’, () => {
currentImageIndex++;
if (currentImageIndex >= images.length) {
currentImageIndex = 0;
}
displayImage(currentImageIndex);
});

const prevButton = document.querySelector(‘.prev-button’);
prevButton.addEventListener(‘click’, () => {
currentImageIndex–;
if (currentImageIndex < 0) {
currentImageIndex = images.length – 1;
}
displayImage(currentImageIndex);
});

function displayImage(index) {
images.forEach((image) => {
image.classList.remove(‘active’);
});
images[index].classList.add(‘active’);
}
“`

Yakınlaştırma ve Uzaklaştırma:

javascript
const zoomButton = document.querySelector('.zoom-button');
zoomButton.addEventListener('click', () => {
const activeImage = document.querySelector('.gallery img.active');
activeImage.classList.toggle('zoomed');
});

CSS Stilleri

Galerinin görünümünü ve hissini özelleştirmek için CSS stilleri kullanabilirsiniz. Örneğin, görüntülerin boyutunu, aralıklarını ve kenarlıklarını ayarlayabilirsiniz:

“`css
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
}

.gallery img {
width: 200px;
height: 200px;
object-fit: cover;
border: 1px solid #ccc;
}

.gallery img.active {
border: 2px solid #000;
}

.gallery img.zoomed {
width: 400px;
height: 400px;
}
“`

Faydalı Kaynaklar

Sonuç

HTML ve JavaScript kullanarak, web sayfalarınıza etkileşimli ve özelleştirilebilir galeriler ekleyebilirsiniz. Bu galeriler, kullanıcıların birden fazla görüntüyü düzenli ve ilgi çekici bir şekilde görüntülemesine olanak tanır. Yukarıda verilen kaynakları kullanarak, kendi benzersiz galeri çözümlerinizi oluşturabilirsiniz.

Yayımlandı

kategorisi