×
İçindekiler

Unsplash api ile resim çekme ve kullanma

javascript

Merhaba,

Unsplash API’sini kullanarak fotoğraf galerisi oluşturmayı örnek ile anlatmaya çalışacağım. JavaScript kullanarak API’den resimleri çekecek ve galeriye ekleyeceğiz. Ayrıca, sayfa scroll edildikçe otomatik olarak daha fazla resim yükleyeceğiz.

İhtiyaçlarımız #

HTML ve CSS Dosyalarını Hazırlama #

İlk olarak, HTML dosyanızda bir unsplash-gallery id’sini verin. Bu, Unsplash resimlerini bu kapsayıcıya çekeceğiz. Sonrasında CSS ile görünümü iyileştireceğiz.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="unsplash-gallery"></div>
  <script src="script.js"></script>
</body>
</html>

CSS Dosyası (opsiyonel) #

SCSS dosyası oluşturup aşağıdaki kodları ekleyin. Bu kodlar sayesinde resimlerin görünümünü iyileştireceğiz.

.masonry-gallery {
    column-count: 4;
    column-gap: 16px;
    .masonry-item {
        a {
            display: inline-block;
            width: 100%;
            height: auto;
            cursor: pointer;
        }
        display: inline-block;
        margin-bottom: 1rem;
        width: 100%;
        img {
            width: 100%;
            height: auto;
            border-radius: 5px;
        }
    }
    @media (max-width: 1200px) {
        column-count: 3;
    }
    @media (max-width: 767px) {
        column-count: 2;
    }
}

JavaScript Dosyası #

const unsplash_gallery = document.getElementById("unsplash-gallery");
const client_id = "UNSPLASH_API_ANAHTARI";
const per_page = 8;
let page = 1;
let isLoading = false;

// Daha fazla resim yüklemek için çağrılan fonksiyon
const loadMore = async () => {
  if (isLoading) return;
  isLoading = true;
  try {
    const response = await fetch(`https://api.unsplash.com/users/UNSPLASH_KULLANICI_ADI/photos/?client_id=${client_id}&per_page=${per_page}&page=${page}`);
    const data = await response.json();
    if (data.length > 0) {
      data.forEach(({ urls }) => {
        unsplash_gallery.insertAdjacentHTML('beforeend', generateHTML(urls));
      });
      page++;
    }
  } catch (error) {
    console.error("Bir hata oluştu:", error);
  }
  isLoading = false;
};

// HTML oluşturma fonksiyonu
const generateHTML = (urls) => {
  return `<div class="masonry-item"> 
        <img src="${urls.thumb}" width="210" height="280" alt="image" />
    </div>`;
};

// Sayfa scroll edildikçe daha fazla resim yüklemek için dinleyici ekleme
window.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  if (scrollTop + clientHeight >= scrollHeight - 200) {
    loadMore();
  }
});

// İlk yüklemeyi başlatma
loadMore();

Yukarıdaki JavaScript kodunda, UNSPLASH_API_ANAHTARI ve UNSPLASH_KULLANICI_ADI yerine kendi Unsplash API anahtarınızı ve Unsplash kullanıcı adınızı girin. Bu sayede API’ye istek yapacak ve resimleri çekeceğiz. Ayrıca, galeriye resimleri eklemek ve sayfa scroll edildikçe daha fazla resim yüklemesi ayarladık.

Unsplash API Anahtarını Alma #

Unsplash API’sini kullanmak için bir API anahtarına ihtiyacınız olacak. Unsplash API’sini kullanmak için bir hesap oluşturmanız gerekiyor. Hesabınızı oluşturduktan sonra, Unsplash API anahtarınızı alabilirsiniz.

Unsplash API anahtarınızı almak için, Unsplash geliştirici sayfasına gidin ve hesabınızla giriş yapın. Giriş yaptıktan sonra, API anahtarınızı almak için New Application butonuna tıklayın.

Galeriyi Oluşturma #

Son adımda, HTML dosyanızı bir tarayıcıda açın. Galeri, Unsplash API’sinden çekilen resimleri görüntüleyecektir. Sayfa scroll edildikçe otomatik olarak daha fazla resim yüklenecektir.

Bu adımları takip ederek, Unsplash API’sini kullanarak dinamik bir fotoğraf galerisi oluşturabilirsiniz. JavaScript kodu, sayfa yüklenirken otomatik olarak bazı resimler yükleyecek ve scroll edildikçe galeriye daha fazla resim ekleyecektir.

Galeri görünümünü CSS dosyanızda özelleştirebilir ve istediğiniz gibi düzenleyebilirsiniz. Projenizi geliştirmek fancybox kütüphanesini dahil edebiliriz.

Fancybox Kütüphanesini Dahil Etme (opsiyonel) #

fancyapps.com adresinden kütüphaneyi projenize dahil ediniz.

İlgili satırı aşağıdaki kod ile değiştiriniz.

// HTML oluşturma fonksiyonu
const generateHTML = (urls) => {
  return `<div class="masonry-item"> 
      <a data-fancybox="gallery" data-src="${urls.regular}">
        <img src="${urls.thumb}" width="210" height="280" alt="image" />
      </a>
    </div>`;
};

Daha da geliştirelim ve lazyload da dahil edelim.

Lazyload Kütüphanesini Dahil Etme (opsiyonel) #

npmjs.com/package/lazysizes adresinden kütüphaneyi projenize dahil ediniz.

src adresine yüklenirken gözükecek görseli belirliyoruz. data-src adresine ise resim yolunu yazıyouz.

// HTML oluşturma fonksiyonu
const generateHTML = (urls) => {
  return `<div class="masonry-item"> 
      <a data-fancybox="gallery" data-src="${urls.regular}">
        <img loading="lazy" src="default-content-image.svg" data-src="${urls.thumb}" class="lazyload" width="210" height="280" alt="image" />
      </a>
    </div>`;
};

Bu projede, Unsplash API’sini kullanarak bir galeri oluşturma sürecini anlatmaya çalıştım. Umarım yardımcı olmuştur.

Unsplash API ile koleksiyon kullanımı için ilgili makaleye bakabilirsiniz.