Bootstrap - Bir resim galerisi oluşturun. Uyarlanabilir düzen, üçüncü ders

BlocksIt, dinamik bir işaretleme ızgarası oluşturmanıza olanak tanıyan bir eklentidir. HTML öğelerinin "bloklara" dönüştürülmesini yönetir ve bunları sayfa ızgarasında düzenler. Bunu yapmak için sadece sütun sayısını belirtin, gerisini eklenti halledecektir. Üstelik "blokları" birleştirip büyük bir tane bile oluşturabilirsiniz.

BlocksIt.js, seçilen öğeleri mutlak konumlandırmayı kullanarak yeniden konumlandıracaktır. Belirli kriterlere göre bir öğenin üst ve sol konumunu hesaplar:

Soldan sağa yeni bir blok başlatın ve
En kısa bloğun altına yeni bir blok yerleştirin.

Kullanmak için jQuery kitaplığını ve eklenti komut dosyasını bağlamanız gerekir:

Daha sonra jQuery nesnesi üzerinde .BlocksIt() fonksiyonunu çağırıyoruz. Çeşitli ayarlar mümkündür. $(document).ready(function() ( $("#objectID").BlocksIt(); )); Bu kadar.
Bloklar şunları içeriyorsa öğeleri, .BlocksIt() çağrılmadan önce boyutlarının belirlendiğinden ve görüntülerin önceden yüklendiğinden emin olun. Bunu yapmak için, her şeyin DOM'a yüklendiğinden emin olmak için $(window).load() işlevini kullanabilir veya görüntülerin durumunu kontrol etmek için waitForImages'a benzer bir eklenti kullanabilirsiniz.

Seçenekler

Eklentiyi çağırırken birkaç ek parametre belirleyebilirsiniz:

sayıOfCol:
Tür: Int Varsayılan: 5
Oluşturulacak sütun sayısı.

ofsetX:
Tür: Int Varsayılan: 5
Her blok için sol ve sağ dolgu.

ofsetY:
Tür: Int Varsayılan: 5
Her blok için üst ve alt kenar boşluğu.

blokElemanı:
Tür: Dize Varsayılan: 'div'
Bloklara dönüştürülecek alt öğe.

HTML

İşaretleme örneği:

... ... ... ... ... data-size niteliği blok boyutunu belirtir (bir blok kombinasyonu için).
Ve çağıran komut dosyası şu şekilde görünebilir: $(document).ready(function() ( $("#container").BlocksIt(( numOfCol: 5, offsetX: 8, offsetY: 8, blockElement: ".grid" ) ));

Bu eğitimde, döşenmiş ızgarayı kullanarak bir portföy sayfası düzeni oluşturmaya bakacağız. Ağı oluşturmak için Kütüphaneler ve Dave DeSandro kullanılır. Demoda gösterilen görseller Unsplash.com'dan alınmıştır.

Duvarcılık sütun bazlı bir ızgaradır. Kayan sarma kullanılarak oluşturulan bir ızgaradan farklı olarak, bir Duvar ızgarası sabit bir satır yüksekliğine sahip değildir; bu, bir web sayfasındaki alanın en iyi şekilde kullanılmasını sağlayarak gereksiz beyaz alanı azaltır. Bu ızgara, portföy sayfaları, resim galerisi bulunan sayfalar ve blog gönderileri içeren sayfalar için uygun olacaktır.

1. Meta etiketler ve bölüm

Duvar Galerisi

2. Sayfa başlığı

Sayfa başlığı - bölüm aşağıdaki kapsayıcı öğeleri içerir:
- logo;
- Ana menü

Helen Parker kişisel fotoğrafçı

Sayfanın ana kısmı, gri tonlamalı bir filtrenin ayarlandığı ve onlara siyah beyaz fotoğraf efekti veren fotoğraflı bloklardan oluşur. Üzerine gelindiğinde bu etki kaybolur.

Altbilgide telif hakkı bilgileri ve sosyal medya bağlantıları bulunur.

Tam işlem için aşağıdaki komut dosyalarını bağlamanız gerekir:

Izgara görüntülerinin üst üste bindirilmesiyle ilgili sorun, Imagesloaded eklentisi kullanılarak çözüldü. Bir görüntünün ne zaman yüklendiğini algılar ve ardından bir Duvar ızgarası oluşturur.

Böyle bir bileşen, bir web sitesi tasarımında arka plan veya dekoratif öğe olarak mükemmel bir şekilde uyum sağlayabilir, çünkü görüntüleri gösterme ve bunlara rastgele geçişler uygulama yeteneğine sahibiz.

Aşağıdaki ek jQuery eklentilerini kullanacağız:

*çoğu CSS geçişi için
* ilgili CSS parametreleri için tarayıcı desteğini kontrol etmek için

Bu eğitimdeki güzel görseller Sherman Geronimo-Tan () tarafından sağlanmıştır ve Creative Commons Atıf 2.0 Genel Lisansı (CC BY 2.0) kapsamında dağıtılmaktadır.

HTML yapısı, bağlantı elemanları ve görselleri içeren basit, sırasız bir liste içerecektir:

$("#ri-grid").gridrotator();

});
Gerekli diğer komut dosyalarını eklemeyi unutmayın.

Seçenekler

// satır sayısı
satırlar: 4,

// sütun sayısı
sütunlar: 10,

// farklı ekran genişlikleri için satırlar/sütunlar
//yani w768, 768 pikselden küçük ekranlar içindir
w1024: (
satırlar: 3,
sütunlar: 8
},

w768: (
satırlar: 3,
sütunlar: 7
},

w480: (
satırlar: 3,
sütunlar: 5
},

w320: (
satırlar: 2,
sütunlar: 4
},

w240: (
satırlar: 2,
sütunlar: 3
},

// adım: aynı anda değiştirilen öğelerin sayısı
// rastgele ||
// not: performans sorunları için sayı > options.maxStep olmamalıdır
adım: "rastgele",
maksimumAdım: 3,

// kullanıcının öğelere tıklamasını önle
PreventClick: doğru,

// animasyon türü
// Gizle'yi göster || fadeInOut || slaytSol ||
// Sağa kaydır || slaytÜst || slaytAlt ||
// Sola döndür || sağa döndür || döndürÜst ||
// Alt'ı döndür || ölçek || 3d'yi döndür ||
// LeftScale'i döndür || SağÖlçek döndürme ||
// TopScale'i döndür || Alt Ölçek Döndür || rastgele
animType: "rastgele",

// animasyon hızı
animasyon Hızı: 500,

//animasyon yumuşatmalar
animEasingOut: "doğrusal",
animEasingIn: "doğrusal",

// öğe(ler) her 3 saniyede bir değiştirilecek
// not: performans sorunları için zaman "olamaz"< 300 ms
aralık: 3000
Izgara boyutunuzu belirlerken ızgarada listeye koyduğunuzdan daha az görselin bulunacağını göz önünde bulundurmalısınız. Listede 50 görselin olacağını ve 5 sütun ve 4 satır tanımlayacağınızı varsayalım. Bu şekilde 20 görüntüden oluşan bir ızgaraya ve kalan 30 görüntüye geçme olanağına sahip olacağız.

Üç farklı konfigürasyona sahip bu demolara göz atın:

* : Rastgele animasyonlar / %55 konteyner genişliği / anahtarlar arasında 3 saniye

En son blog makalelerini görüntülemek veya ürünleri sunmak için benzer bir çözüm kullanılabilir.

Fotoğraflarınızı şık bir jQuery galerisinde görüntülemenin benzersiz bir yolu.

JQuery eklentisi, birden fazla görsel içeren bir ürün sayfasını uygulamak için mükemmeldir. Resimler arasındaki geçiş, küçük resimler veya gezinme okları kullanılarak yapılabilir.

Farenizi üzerine getirdiğinizde resim büyür.

2011'in profesyonel jQuery galerisi.

Nivo Slider'ın geliştiricilerinden bir başka yüksek kaliteli jQuery eklentisi. Küçük resme tıklayarak resmi büyütün.

2011 için yeni jQuery galerisi. Görüntülerin akışı ekranın tüm genişliğini kapsar. Fotoğraflar arasında üç şekilde gezinebilirsiniz: fare tekerleğini kullanarak, galerinin üst kısmında kaydırma yaparak ve alt kısımdaki küçük resim bloğunu kullanarak. Galeri çok etkileyici görünüyor.

Galerideki görseller rastgele bir şekilde büyütülüp küçültülerek baloncuk efekti yaratılır.

Üstteki kaydırıcıyı kullanarak yığındaki resimler arasındaki mesafeyi değiştirebilirsiniz. Bir resme tıkladığınızda döner.

2011'den itibaren eklenti. Boyutuna bakılmaksızın, tarayıcı penceresinin tüm alanına yayılan, görsellerin açıklamalarını içeren yeni bir galeri. Görüntü küçük resimleri ilginç bir şekilde uygulanmıştır. Fotoğraflar arasındaki geçiş, küçük resmin yanındaki oklar ve fare tekerleği kullanılarak gerçekleştirilir.

Eklenti, klasörü otomatik olarak tarar ve görüntülerin küçük kopyalarını oluşturur.

Fareyi bir küçük resmin üzerine getirdiğinizde ortaya çıkan ilginç bir efekt.

Yakın zamanda tam ekran galeriler oluşturmaya yönelik bu jQuery çözümünden zaten bahsetmiştim. Bugün sizi bu profesyonel eklentinin en son sürümüyle tanıştırmak istiyorum. Komut dosyası tamamen yeniden yazıldı, artık galeri daha da hızlı çalışıyor ve klavyeyi kullanarak gezinme, görüntüleri değiştirmenin değişken hızı, ekran boyutu ve diğerleri gibi bazı ilginç ayarlar eklendi.

Projeleriniz için yeni jQuery galerisi.

Bir düğmeye bastığınızda sayfada galeri açılır. Büyütülmüş görüntünün etrafında küçük resimler görünür. Görüntülerin otomatik değişimini kontrol edebilirsiniz. Kullanılan teknolojiler: jQuery, CSS, PHP.

jQuery galerisi. Slaytların otomatik olarak değiştirilmesi ve çok fazla olması durumunda küçük resimlerin kaydırılması uygulandı.

JQuery kullanan resim galerisi eklentisi.

Mobil cihazlarda (telefonlar veya tabletler) görüntülemek için optimize edilmiş bir resim galerisi.

Yeni jQuery kaydırıcısı. Slaytları değiştirirken birçok harika animasyon efekti.

Resim olarak stilize edilmiş, ekrana dağılmış çeşitli boyutlarda minyatürlerden oluşan orijinal bir galeri. Küçük resme tıkladığınızda görselin açıklamasını içeren bir alan belirir ve tekrar tıkladığınızda orijinal büyük görsel açılır.

İlginç vurgulu efekti.

Küçük resimlerle jQyery galerisi. Kompakt bir pencerede ve tam ekran pencerede görüntüleme özelliğinin yanı sıra otomatik slayt değiştirmeyi devre dışı bırakma/etkinleştirme özelliği de uygulandı.

Görüntü ızgarası, tarayıcı penceresinin genişliğine bağlı olarak uzatılır. İlginç bir fareyle üzerine gelme efekti: etkin satır ve sütun vurgulanır.

Birkaç satır kodla hazırlanmış hafif jQuery galerisi.

Demo sayfası, farklı tarzlarda açılır mega menüler için çeşitli seçenekler sunar. Bu menüde şunları yapılandırabilirsiniz: bırakma efektini, bırakma hızını ve ayrıca tıklayarak veya fareyi bir öğenin üzerine getirerek bırakma arasında seçim yapabilirsiniz.

Resim altyazılı jQuery galerisi. Çeşitli slayt geçiş efektleri. Resimler arasında gezinme, oklar kullanılarak veya küçük resme tıklanarak gerçekleştirilir.

Resim ve minyatürleri daire şeklinde yapılmıştır.

Bir fotoğrafçının portföyünü tasarlamak için orijinal bir javascript çözümü. Görüntüler arasında gezinme, Yukarı/Sol/Sağ okları ve mini kareler (2B alanda hareketin taklit edilmesi) kullanılarak gerçekleştirilir. Farklı fotoğraf oturumlarındaki fotoğrafları farklı dikey sıralarda gruplayabilir ve gezinme öğelerini kullanarak bunlar arasında gezinebilirsiniz. Demoyu izleyin.

Tarayıcı penceresinin tüm boyutuna yayılan görüntüleri görüntülemek için eklenti. Bir portföydeki çalışmaları görüntülemek için kullanılabilir.

Google haritasıyla entegre galeri. Sağ alt köşedeki simgeye tıklayarak tam ekrana genişletebilirsiniz. Seyahat web siteleri için mükemmeldir.

Küçük resimlerle jQuery galerisi.

Küçük resimlerle slayt gösterisi.

Bir sayfadaki görsellerin ve içeriğin dalga benzeri sunumu. Küçük resme tıkladığınızda tüm resimler büyütülür ve adları görünür. Tekrar bastığınızda fotoğrafın açıklamasını içeren bir blok açılır.

Birçok ekran seçeneği ve ayarı.

Güzel görünüyor ve tüm modern tarayıcılarda harika çalışıyor

Otomatik slayt gösterisini (başlatma/durdurma) kontrol edebilir, klavye oklarını kullanarak slaytlar arasında geçiş yapabilir, çok sayıda varsa slayt başlıklarının otomatik olarak sayfalandırılmasını, bir sayfada birden fazla galeriyi desteklemeyi, slaytlar için altyazıları, API desteğini ve kendi galerinizi oluşturma yeteneğini kullanabilirsiniz. slayt geçiş efektleri

Oluşturacağımız galerinin sonucu böyle görünmeli. Demoyu izleyebilir ve dilerseniz galerinin nihai sonucunu indirebilirsiniz.

Aynı galerinin bir örneği, ancak Bootstrap 3 çerçevesinde yapılmış:

Gridify eklentisini temel alarak resim galerisinin ikinci versiyonunu oluşturacağız. Bu eklenti Pinterest gibi bir resim ızgarası oluşturmak için tasarlanmıştır.

Bu galeriyi oluşturma sürecini aşağıdaki adımlarda sunuyoruz:

Not: Gridify.js eklentisinin çeşitli uygulamaları vardır. Bu projemizde jQuery kütüphanesini temel alan olanı seçeceğiz.

$(function () ( var options = ( srcNode: "img", // ızgara öğeleri (sınıf, düğüm) kenar boşluğu: "15 piksel", // piksel genişliğinde kenar boşluğu: "240 piksel", // ızgara öğesi piksel cinsinden genişliği max_width : "", // dinamik kiriş öğesi genişliği yeniden boyutlandırılabilir: true, // pencere yeniden boyutlandırılırsa yeniden düzen: "tümü 0,5 saniyelik kolaylık" // CSS3 için geçişi destekler );

2. Galeri için HTML kodu oluşturma:

...

Önceki örnekte olduğu gibi galeri görselini fanteziBox kullanarak görüntüleyeceğiz.

Bootstrap 4 için Pinterest benzeri bir resim galerisinin son kodu:

Bootstrap 4 - Gridify.js kullanarak duyarlı bir resim galerisi oluşturma img ( padding: 4px; arka plan rengi: #fff; border: 1px katı #ddd; border-radius: 4px; ) img:hover ( opacity: 0,6; filter: alpha (opaklık=60); ... $(function() ( var options = ( srcNode: "img", // ızgara öğeleri kenar boşluğu: "15 piksel", // piksel genişliğinde kenar boşluğu: "240 piksel", // piksel cinsinden ızgara öğesi genişliği max_width: " ", // dinamik kiriş öğesi genişliği yeniden boyutlandırılabilir: true, // pencere yeniden boyutlandırılırsa yeniden düzen geçişi: "tüm 0,5 saniyelik kolaylık" // CSS3 için geçişi destekler ); $(".grid").gridify(options); ) );

Bootstrap 3'teki aynı galerinin bir örneği.