Responsive Resim Galerisi Oluşturmak (PhotoSwipe)

PhotoSwipe, plain javascript tabanında responsive resim galerileri oluşturmanıza yardımcı bir javascript eklentisidir. Kullanımı gayet basit, arayüz olarak çok rahat bir şekilde kişiselleştirilebilen bir yapıya sahip. Ek olarak github'un da yardımı ile birçok önceden hazırlanmış arayüze de sahip.

responsive resim galerisi

  • Şahsen, PhotoSwipe'ı beğeniyor olmamın en büyük sebeplerinden birisi, herhangi başka bir kütüphaneye ihtiyaç duymuyor olması. Piyasada bulunan çoğu galerinin jQuery ile oluşturulduğunu ve benim de jQuery kullanımından kaçınıyor olduğumu düşünürseniz, gerçekten büyük bir artı.

  • Bir diğer artısı, bu javascript aracının mobilde touch özelliği ile çok iyi çalışıyor olması. Denemeler yaparken resmin yönetimi ve telefonun görsel işlemci gücünün bu kadar verimli kullanılmış olması gerçekten çok büyük artı.

responsive fotoğraf galerisi

  • Eklentideki native fullscreen ve görseli paylaşma özelliği de sıfırdan başlanıldığında implement zaman alacak çalışmalar.

  • Açılan resim görüntüleyici pencerede, resimlerin altında görünmek üzere yazılar belirleyebiliyorsunuz ve görselin gösterilmesini istediğiniz boyut ratio'sunu da önceden atayabiliyorsunuz.

Nasıl Kullanacağız?

Eklentinin kullanımı yeterince kompakt değil, diğer bir değiş ile, programcıya ya da end user'a güzel bir notasyon arayüzü oluşturmamışlar. Halen geliştirişmekte olduğunu ve şuan v4.1.1 üzerinde çalışıldığını göz önüne alırsak, devamında çok daha kolay uygulanabilir hale geleceğe benziyor.

1) Eklentiyi kullanmaya başlamadan önce (tercihen </body> kapanış etiketinin hemen öncesinde) bazı CSS ve Javascript dosyalarını sayfaya çağırıyoruz. Burada ek olarak CSS dosyasında kullanılmış bazı skin dosyalarını (png, svg vs dosyaları) sizin sunucunuzda ve default-skin.css dosyanız ile aynı dizinde olması gerekiyor.

<link rel="stylesheet" href="path/to/photoswipe.css"> 
<link rel="stylesheet" href="path/to/default-skin/default-skin.css"> 

<script src="path/to/photoswipe.min.js"></script> 
<script src="path/to/photoswipe-ui-default.min.js"></script> 

Bu dosyaları, eklentinin Github sayfasındaki dist/ klasörü içerisinden en güncel hali ile indirip kullanabilirsiniz.

2) Bundan sonra, sayfaya resmin görüntüleneceği divi yerleştirmeniz gerekeiyor. .pswp divinin içeriği, default-skin CSS dosyasındakine göre önceden belirlenmiş, bu kodu şu gist üzerinden kopyalayarak, HTML'de Javascript kodlarını kullanacağımız yerin daha üstünde bir bölüme yerleştirin.

3) Son olarak listeyi şu şekilde objeyi initilize ederek oluşturuyorsunuz.

var pswpElement = document.querySelectorAll('.pswp')[0];
//.pswp, içinde çalışma yapıalcak divimizin class adıdır.
var items = [
    {
        src: 'https://placekitten.com/600/400',
        w: 600,
        h: 400
    },
    {
        src: 'https://placekitten.com/1200/900',
        w: 1200,
        h: 900
    }
];
//resimlerimizi items arrayi içerisinde tanımlıyoruz.

var options = {
    // optionName: 'option value'
    index: 0 // ilkinden başla
};

var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

Burada galeriyi PhotoSwipe prototipi ile oluşturuyoruz ve init() metodu, sayfadaki arayüzü inşa ediyor.

(Örneği CodePen'de görün.)

Ayrıca, PhotoSwipe eklentisinin tam dökümantasyonu için tıklayınız.

Yorumları Göster veya Yeni Yorum Yaz