Responsive Fotoğraf Galerisi

Vatanay Özbeyli CSS3, Diğer Konular & İpuçları, HTML5, jQuery

Responsive Fotoğraf Galerisi Bu dersimizde her türden ekran çözünürlüğüne uyumlu olarak çalışan bir fotoğraf galerisi tasarlayacağız. Hazırlayacak olduğumuz bu galeri, görsel ağırlıklı tasarımlar için ideal gözüküyor.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl yapılır?

Sayfanın küçültülmesi ve büyültülmesi de dahil tüm ölçütlendirme işlemlerinin anlık olarak uygulanması için jQuery desteğine ihtiyacımız var. Dolayısıyla ilk olarak web sayfanızın <head></head> alanına jQuery‘nin güncel versiyonunu eklemeyi unutmayın. jQuery 1.11.0’ın sıkıştırılmış halini kullanmak isterseniz aşağıdaki kod sizin için yeterli.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Şimdi sırasıyla kodlarımızı yazalım.

HTML kodları

Galerinin gözükmesini istediği yere, yani kısaca <body></body> içerisinde istediğiniz alana div elemanımızı ekleyelim. Galeri isimli bir class atanmış div ekleyerek işleme başlayın. Bu div elemanının içerisine de bol bol görsel ekleyin. Eğer hali hazırda önizleme yapmak için yeterli görseliniz yoksa aşağıdaki kodları direkt olarak kullanabilirsiniz. Aşağıda 14 adet, çeşitli boyutlar görseller mevcut.

<div class="galeri">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/12/Ruth-Steck.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/11/aw-kartvizit.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/08/Kinetic-Singapore.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/08/Esteban-Munoz.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/08/instagram-1977.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/08/Dreamer-theme.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/08/Kutztown-University.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2014/01/Adament.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/08/tilt-shift-blur.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/08/scriptfont-masana.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/08/genclige-hitabe.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/08/scriptfont-anha-queen-vmf.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/08/scriptfont-the-dreamer.jpg">
<img src="https://www.adobewordpress.com/wp-content/uploads/2013/07/photoshop-eskitme-efekti.jpg">
</div>

CSS kodları

Sırada CSS kodlarımız var. Gördüğünüz gibi sadece 2 satırlık bir kod kullanacağız. Eğer isterseniz .galeri classına tasarım oluşturabilirsiniz. Ayrıca bu kısımdaki padding tanımlamasını değiştirerek objelerin birbirlerine olan mesafelerini de düzenleyebilirsiniz.

.galeri img {
float: left;
padding: 0 2px 2px 0;
}

JavaScript kodları

Ve son olarak JS kodlarımızı ekliyoruz. Detaylandırarak devam edelim. Düzenlemek isteyebileceğiniz kısımları etiketler ile belirttim.

<script language="JavaScript">
function boyutGaleri()
{
// Bir fotoğraf karesinin kabaca genişlik ve yükselik değeri
var genislik = 400;

// Eğer ne yaptığınızı bilmiyorsanız buradan aşağısını değiştirmeyin
var kutuGenislik = $(".galeri").width();
var MaxDeger = kutuGenislik / genislik;
var imgs = $(".galeri img");
var noFoto = imgs.length, OrtDeger, ratio, photo, row, rowPadding, i = 0;

while (i < noFoto) {
OrtDeger = rowPadding = 0;
row = new Array();
while (i < noFoto && OrtDeger < MaxDeger) {
photo = $(imgs[i]);
// genişliği resetle
photo.width("");
ratio = photo.width() / photo.height();
rowPadding += yatayPad(photo);
// eğer birinci öğe ise clear:left ekle
if(OrtDeger == 0) photo.css("clear", "left"); else photo.css("clear", "none");
OrtDeger += ratio;
row.push(photo);
i++;
// eğer sadece 1 resim kaldıysa onu sıkıştır
if(i == noFoto - 1) MaxDeger = 999;
}
unitWidth = (kutuGenislik - rowPadding) / OrtDeger;

row.forEach(function (elem) {
elem.width(unitWidth * elem.width() / elem.height());
});
}
}

function yatayPad(elem)
{
var padding = 0;
var left = elem.css("padding-left");
var right = elem.css("padding-right");
padding += parseInt(left ? left.replace("px", "") : 0);
padding += parseInt(right ? right.replace("px", "") : 0);
return padding;
}

$(window).load(boyutGaleri);
$(window).resize(boyutGaleri);
</script>

Kapanış

Bu galeri orjinal haliyle bile inanılmaz büyük görsel havuzuna alt yapı oluşturabilir. Eğer aklınızda böyle bir tasarım kullanmak varsa hiç düşünmeden bu tasarımı kullanabilirsiniz. Galeri Justin Klemm‘e aittir. Kendisine hem bu kaliteli tasarımı hazırladığı için, hem de Türkçe olarak anlatmamıza müsade ettiği için teşekkürlerimizi iletiyoruz. Bir sonraki yazımızda görüşmek üzere, hoşçakalın.

Bu da ilginizi çekebilir  Haftanın Ücretsiz Web Teması #7