JQuery sıralamasıyla güzel galeri. JQuery Jquery galerisinde resim galerisi

Günümüzde duyarlı tasarım, tasarımcılar ve geliştiriciler için bir numaralı seçenek haline geldi ve giderek daha fazla insan web sitelerinin akıllı cihazlarda çalışmasını istiyor. Duyarlı tasarım, mobil kullanıcıların dikkatini çeker ve işletmenizi başka bir düzeye taşıyan olası satışlar ve satışlar oluşturmanıza yardımcı olur.

Günümüzde, menü, ızgara, sütun ve hatta resimler ve görüntüler gibi hemen hemen her şey için duyarlı düzen oluşturabilirsiniz. Web sitenizin içeriğini, resimlerini ve videolarını duyarlı bir galeri tarzında görüntülemek istiyorsanız, aşağıdakileri yapın jQuery Resim galerisi eklentileri size yardımcı olabilir.

Bu makale aşağıdakilerden bazılarını içerir: En İyi Duyarlı jQuery Resim Galerisi eklentileribu, yalnızca web siteleriniz için duyarlı resim galerileri oluşturmanıza olanak sağlamakla kalmaz, aynı zamanda web sitenizi daha güzel ve görsel olarak çarpıcı hale getirmek için bunları zarif stillerde sergiler.

Listesi aşağıdadır 2016'da dikkate alınmaya değer En İyi Duyarlı jQuery Resim Galerisi Eklentileri.

Bootstrap Fotoğraf Galerisi, resimleriniz için Bootstrap tabanlı duyarlı bir Fotoğraf Galerisi oluşturan basit bir jQuery eklentisidir.
Bu eklenti, resimler ve başlıklar için değişken yüksekliği destekler. "Sonraki" ve "önceki" sayfalara sahip isteğe bağlı bir "kalıcı" kutu da dahildir.
Demo ve İndir

2. JK Responsive YouTube ve Resim Galerisi

Sitenizdeki resimleri ve YouTube videolarını görüntülemek için modern, ışık kutusu tarzı bir galeridir. Galeri arayüzü tamamen duyarlıdır ve büyük veya küçük tüm cihazlarda güzel bir şekilde çalışır.
Demo ve İndir

3. Faba

FABA, seçilen Facebook Sayfasındaki tüm albümleri ve fotoğrafları yükleyecek duyarlı Facebook albümleri ve fotoğraf galerisi jquery eklentisidir.

Düzenleyebileceğiniz yaklaşık 90 seçenek vardır ve neredeyse her şeyi özelleştirebilirsiniz: animasyonlar, fareyle üzerine gelme efektleri, fareyle üzerine gelme animasyonlarının her bölümü, metinler, davranışlar ve çok daha fazlası. Güzel albümleri projenize veya web sayfanıza entegre edebilirsiniz.

xGallerify, web siteleriniz için güzel resim galerileri oluşturmanıza olanak tanıyan hafif, duyarlı bir galeri eklentisidir. Bu eklenti hafiftir (3kb dosya boyutu), kullanımı kolay ve özelleştirilebilir seçenekler ve stillerle birlikte gelir.
Demo ve İndir

Instagram Element, blogcular, fotoğrafçılar, modeller ve Instagram'daki varlığını artırmak isteyen herkes için premium bir Instagram eklentisidir.
Bu eklenti tamamen duyarlıdır ve 50'den fazla seçeneği kolayca yönetmenize olanak tanır ve fotoğraflarınızı herhangi bir cihazda güzel bir şekilde görüntülemenizi sağlar.

SnapGallery, farklı boyutlardaki görüntülerin çirkin bir listesini tek satır JavaScript içeren güzel, özelleştirilebilir bir galeriye dönüştüren basit bir jQuery eklentisidir.

Tamamen duyarlıdır, özelleştirilebilir ve resimler arasındaki boşluğu, yığınlamadan önce izin verilen minimum genişliği ve maksimum sütun sayısını seçmenize olanak tanır ve daha fazla seçenek yolda!
Demo ve İndir

Eagle Gallery Bu, görüntü yakınlaştırma işlevine sahip modern galeridir. Galeriyi yönetmek için hareketleri veya kontrol düğmelerini kullanabilirsiniz. Bu, dokunmatik ekranı destekleyen ve mobil cihazlar, dizüstü bilgisayarlar ve masaüstü bilgisayarlar için oluşturulmuş, tamamen duyarlı bir galeridir.

Bu galeri ile detaylı görünüm için internet mağazanızda kolayca bir ürün galerisi oluşturabilir ve seçenekler yardımıyla özelleştirebilirsiniz.

Unite Galerisi, jQuery kitaplığına dayalı çok amaçlı JavaScript galerisidir. Kullanım ve özelleştirme kolaylığı sağlayan modüler bir teknikle oluşturulmuştur. Galeriyi özelleştirmek, css aracılığıyla dış görünümünü değiştirmek ve hatta kendi temanızı yazmak çok kolaydır. Yine de bu galeri çok güçlü, hızlı ve günümüzün çoğunda yanıt verme, dokunma etkinleştirme ve hatta yakınlaştırma özelliği gibi özelliklere sahip olmalı, benzersiz bir etki.
Demo ve İndir

jQuery lightGallery, resim ve video galerisini görüntülemek için hafif bir jQuery ışık kutusu galerisidir.

Lightgallery, dokunmatik ekranlı cihazlarda dokunma ve kaydırma ile gezinmenin yanı sıra masaüstü bilgisayarlar için fareyle sürüklemeyi destekler. Bu, kullanıcıların kaydırarak veya fareyle sürükleyerek slaytlar arasında gezinmesine olanak tanır.

Lightgallery, eklentiyi çok kolay bir şekilde özelleştirmenize izin veren çok sayıda seçenekle birlikte gelir. SASS değişkenlerini güncelleyerek galerinin görünümünü ve hissini kolayca özelleştirebilirsiniz.
Demo ve İndir

Bu, resimleriniz ve videolarınız için ızgara düzeni galerisi oluşturmanıza olanak tanıyan başka bir harika jQuery resim galerisi eklentisidir. Bu eklentiler tamamen duyarlıdır ve sosyal paylaşım, sonsuz kaydırma, css3 animasyonları, filtreler ve çok daha fazlası gibi bir dizi özellik ile birlikte gelir.

blueimp Galeri, hem mobil hem de masaüstü web tarayıcıları için optimize edilmiş, dokunmatik, duyarlı ve özelleştirilebilir bir resim ve video galerisi, atlıkarınca ve ışık kutusudur.

Kaydırma, fare ve klavye gezintisi, geçiş efektleri, slayt gösterisi işlevselliği, tam ekran desteği ve isteğe bağlı içerik yükleme özelliklerine sahiptir ve ek içerik türlerini görüntülemek için genişletilebilir.
Demo ve İndir

nanoGALLERY, yaslanmış, basamaklı ve ızgara düzenine sahip dokunma özellikli ve duyarlı bir resim galerisidir. Kendi kendine barındırılan görüntüleri ve Flickr, Picasa, Google+ ve SmugMug fotoğraf albümlerinde çekmeyi destekler.

Albümlerde çok seviyeli gezinme, küçük resimlerde birleştirilebilir vurgulu efektler, duyarlı küçük resim boyutları, çoklu düzenler, slayt gösterisi, tam ekran, sayfalandırma, görüntü tembel yükleme ve çok daha fazlasını içerir.
Demo ve İndir

flipGallery, küçük resimler ve ışık kutusu büyütmeleri arasında şık geçişlere sahip jQuery destekli ücretsiz bir fotoğraf galerisidir. Diğer özellikler arasında dinamik görüntü akışı, otomatik sayfalama, otomatik kırpma ve şeffaf görüntü bindirme bulunur.

Bu eklentinin ayrıca birkaç şık özelliğe sahip olan ve kesinlikle duyarlılık içeren bir premium sürümü vardır.
Demo ve İndir

Fancy Gallery, resimlerinizi ve videolarınızı süslü bir tarzda görüntülemenizi sağlayan duyarlı jQuery resim galerisi eklentisidir. Bu eklentilerin birçok özelleştirme seçeneği vardır ve sınırsız albümler, videolar, resimler ve çok daha fazlasını ekleyebilirsiniz.

Eklenti, küçük resimler ve başlıklar için de ayarlanabilen farklı vurgulu efektlerle birlikte gelir. Önceden tanımlanmış 7 renk teması arasından seçim yapabilir veya kendi renk temanızı kolayca oluşturabilirsiniz.

Dengeli Galeri, fotoğrafları satırlara veya sütunlara eşit olarak dağıtan ve sağlanan alandan en iyi şekilde yararlanan bir jQuery eklentisidir. Fotoğraflar varsayılan olarak 'kapsayıcı' öğesinin boyutuna göre ölçeklenir ve Dengeli Galeri, duyarlı web siteleri için iyi bir seçimdir.
Demo ve İndir

16. S Galeri

S Gallery, HTML5'in Tam Ekran API'sini kullanır ve ağırlıklı olarak CSS3 animasyonlarının iyiliğine ve CSS3 dönüşümlerine dayanır, bu nedenle yalnızca bu özellikleri destekleyen tarayıcılarda çalışacaktır.
Demo ve İndir

17. Ultimate Grid Duyarlı Galeri

Bu bir HTML | CSS | Lightbox ile JQuery Grid, ızgara için küçük resimler belirleyebilir ve ışık kutusunu açmak için üzerine tıkladığınızda normal görüntüyü yükler, altyazılar ve ışık kutusu için metin belirleyebilirsiniz. Ayrıca, tüm görüntüleri aynı anda yüklemeniz gerekmez (performans amacıyla), böylece ilk yüklendiğinde yüklenecek görüntülerin sayısını ve "daha fazla görüntü yükle" düğmesini tıkladığınızda yüklenecek görüntülerin sayısını belirleyebilirsiniz.

Responsive Thumbnail Gallery, kapsayıcılarına sığacak şekilde ölçeklenen resim galerileri oluşturmak için bir jQuery eklentisidir.
Demo ve İndir

SuperBox, tüm "görüntü" ve "ışık kutusu" nu bir adım daha ileri götüren bir jQuery eklentisidir ve ışık kutusunu geçmişte bırakmak için JavaScript ve görüntü yüküne bağımlılığı azaltır! HTML5 data- * özelliklerini, duyarlı düzenleri ve jQuery'yi kullanma.

SuperBox, görüntünün tam sürümünü ortaya çıkarmak için tıklayabileceğiniz statik bir resim galerisi olarak harikalar yaratır.
Demo ve İndir

Ultimate Thumbnail galerisi tamamen duyarlı resim galerisi eklentisi, kaydırma (jScrollPane) veya düğme gezintisi ile iki düzen türünde (ızgara ve çizgi, dikey ve yatay) gelir. Küçük resim kutuları, içlerindeki herhangi bir HTML öğesini destekler.

Merhaba sevgili okuyucular a! Bu eğiticide, size minimalist ancak rahat ve işlevsel bir tasarımın nasıl oluşturulacağını göstereceğim jQuery'de fotoğraf galerisiveya istediğiniz gibi bir resim galerisi. Galeri, kategoriler oluşturma ve ardından filtreleme yeteneğine sahiptir. Bir slayt gösterisi başlatmak da mümkündür. Galeri tüm tarayıcılarda çalışır, bu nedenle uyarlamayla ilgili herhangi bir sorun yaşanmaz.

Bu galeriyi oluşturmak için iki ücretsiz kitaplık kullanılacaktır: Bataklıkve Güzel fotoğraf... Bir galeri oluşturmayı çok daha kolay hale getiriyorlar. Her zaman olduğu gibi, demo sayfasında çalışmanın sonucunu görebilir, ayrıca arşivi çalışma galerisinden ve tüm kaynak dosyalardan indirebilirsiniz. Tek dezavantajı, eğer söyleyebilirsem, büyük resimler için manuel olarak küçük resimlerin oluşturulmasıdır. Aksi takdirde, bu galeri dikkate değer. Hem de !

HTML işaretlemesi

Öncelikle, kategori listesinin bulunduğu panele bir göz atalım, bu madde işaretli bir liste ul. Ayrıca, listenin her bir öğesi benzersiz bir sınıf adına sahip olmalıdır.

1 2 3 4 5 6 7 8 9 10 11

Görüntü adı yayınlandı: 2012

Yukarıda belirtildiği gibi, liste öğeleri galerideki resimlerdir. Listenin her bir öğesi, bileşik olanları içerir. Bu, görüntünün kendisi veya daha doğrusu küçük resmi ve bir açıklamasıdır. Küçük resim, ana görüntünün bağlantısıdır. Rel özniteliği, javascript'i çağırmak ve ana görüntüyü açmak için gereklidir.

Ayrıca 2 önemli şeyi de unutmayın, data-id özniteliği li list öğesi için benzersiz olmalıdır. Veri türü özniteliği, listesi yukarıda açıkladığım kategori sınıfını içerir. Her şey işaretlemeyle ilgili.

CSS Stilleri

Hazır bir kitaplık kullandığımız için stillere odaklanmayacağım Güzel fotoğraf, görüntüyü arttırmaktan sorumlu olan ve çok sayıda css kodu var. Bununla birlikte, iki seçenekte yalnızca yuvarlama kaldırıldığından, ideal olarak yalnızca 3 olmasına rağmen, büyütülmüş görüntünün tasarımı için 5 seçenek olduğunu belirtmek gerekir.

Bu nedenle, küçük resimler ve kategori listesi için yalnızca CSS stillerini göstereceğim.

Prensip olarak, stillerle ilgili her şey net olmalıdır. Kategorilerin sıralanması için display özelliği satır içi olarak ayarlanır. Görüntüye kontur efekti vermek için arka plan rengini (beyaz) ve 10 piksellik bir ofseti ayarlayın. Liste öğelerinin boyutları .portfolio-area li içinde ayarlanır.

jQuery

Ve son olarak, en önemli şey, o zaman tüm ders için. Bu jQuery kodudur. Görüntüleri kategoriye göre filtreleyerek başlayalım.

Clone () yöntemini ve seçiciyi kullanarak .portfolio-alanının tüm alt öğelerini seçer ve bunları $ data değişkenine yazarız. Daha sonra, kategorilerden biri olan .portfolio-categ sınıfına sahip listedeki li öğesi üzerindeki tıklamayı izliyoruz. RemoveClass'ı ("aktif") kaldırarak tüm kategorileri pasif hale getiriyoruz, eğer bu yapılmazsa zamanla tüm kategoriler aktif hale gelecek ve filtreleme duracaktır.

Liste öğesine tıkladığımız için, bu seçici liste öğesini içerir, yani li, ondan sınıf özniteliğinin değerini alırız ve sınıf adını birkaç parçaya bölmek için bölme yöntemini kullanırız, sınır bir boşluktur (yani, sınıf " tümü aktif "sonra bölündükten sonra" tümü "ve" aktif "dizisini elde ederiz). Ve sonra, dilim yöntemini kullanarak, dizinin ilk elemanını (bizim durumumuzda "tümü") seçeriz ve elde edilen sonucu filterClass değişkenine yazarız. Boşluk yoksa sınıfın adı değişmeyecektir.

Ardından, filterClass değişkeninin dizeyi içerip içermediğini kontrol ediyoruz herşey, sonra .find yöntemini kullanarak, portföy öğesi2 sınıfına sahip tüm öğeleri yukarıda tartıştığımız $ data dizisinden seçiyoruz. Seçilen öğeler (ve bunlar listenin tüm öğeleri, yani tüm resimlerdir) filteredData değişkenine yerleştirilir.

Aksi takdirde, filterClass eşit değilse herşey, daha sonra filterData değişkenine listenin tüm öğelerini değil, yalnızca data-type özniteliği kategori sınıfıyla eşleşenleri koyacağız. Kısacası, öğeler yalnızca bir kategoridedir.

Ve sonunda, ortaya çıkan değişkeni kütüphaneye aktarıyoruz jquery Quicksand, resimleri filtreleyen. Bu tamamen filtrelemeyle ilgili.

Şimdi pop-up'taki görüntünün büyütülmesi için. Burada her şey çok daha basit.

Rel özniteliği prettyPhoto ile başlayan bir bağlantıdaki bir tıklama izlenir. Sonra kütüphane devreye girer güzel fotoğrafve görüntü mucizevi bir şekilde büyütülür. Bu arada, birkaç parametre de aktarıyoruz. Animasyon hızı - hızlı, slayt gösterisi gecikmesi - 5 saniye, Facebook teması (resimlerde / prettyPhoto klasöründe toplam 5 tema vardır), ayrıca resim adının görüntülenmesini ve fareyle üzerine gelindiğinde yakınlaştırmayı yasaklar. İçin eksiksiz belgeler güzel fotoğraf bulunabilir

En son makaleler ve derslerden haberdar olmak için, abone olun

Bu eğitimde, size minimalist ama rahat ve işlevsel bir tasarımın nasıl oluşturulacağını göstereceğim. jQuery'de fotoğraf galerisiveya istediğiniz gibi bir resim galerisi. Galeri, kategoriler oluşturma ve ardından filtreleme yeteneğine sahiptir. Bir slayt gösterisi başlatmak da mümkündür. Galeri tüm tarayıcılarda çalışır, bu nedenle uyarlamayla ilgili herhangi bir sorun yaşanmaz.

Bu galeriyi oluşturmak için iki ücretsiz kitaplık kullanılacak JQuery: Quicksandve Güzel fotoğraf... Bir galeri oluşturmayı çok daha kolay hale getiriyorlar. Her zaman olduğu gibi, demo sayfasında çalışmanın sonucunu görebilir, ayrıca arşivi çalışma galerisinden ve tüm kaynak dosyalardan indirebilirsiniz. Tek dezavantajı, eğer söyleyebilirsem, büyük resimler için manuel olarak küçük resimlerin oluşturulmasıdır. Aksi takdirde, bu galeri dikkate değer.

KAYNAKLAR

HTML işaretlemesi

Öncelikle, kategori listesinin bulunduğu panele bir göz atalım, bu madde işaretli bir liste ul. Ayrıca, listenin her bir öğesi benzersiz bir sınıf adına sahip olmalıdır.

• Kategoriler:


• Herşey


• Kategori 1


• Kategori 2


• Kategori 3


• Kategori 4

Görüntü adı

Yukarıda belirtildiği gibi, liste öğeleri galerideki resimlerdir. Listenin her bir öğesi, bileşik olanları içerir. Bu, görüntünün kendisi veya daha doğrusu küçük resmi ve bir açıklamasıdır. Küçük resim, ana görüntünün bağlantısıdır. Rel özniteliği, javascript'i çağırmak ve ana görüntüyü açmak için gereklidir.

Ayrıca 2 önemli şeyi de unutmayın, data-id özniteliği li list öğesi için benzersiz olmalıdır. Veri türü özniteliği, listesi yukarıda açıkladığım kategori sınıfını içerir. Her şey işaretlemeyle ilgili.

CSS Stilleri

Hazır bir kitaplık kullandığımız için stillere odaklanmayacağım Güzel fotoğraf, görüntüyü arttırmaktan sorumlu olan ve çok sayıda css kodu var. Bununla birlikte, iki seçenekte yalnızca yuvarlama kaldırıldığından, ideal olarak yalnızca 3 olmasına rağmen, büyütülmüş görüntünün tasarımı için 5 seçenek olduğunu belirtmek gerekir.

Bu nedenle, küçük resimler ve kategori listesi için yalnızca CSS stillerini göstereceğim.

Portföy kategorisi (kenar boşluğu alt: 30 piksel;)
.portfolio-categ li (
ekran: satır içi;
sağ kenar boşluğu: 10px;
}
.image-block (
Ekran bloğu;
konum: göreceli;
}
.image-block img (
border: 1px katı # d5d5d5;
sınır yarıçapı: 4px 4px 4px 4px;
arka plan: #FFFFFF;
dolgu: 10px;
}
.image-block img: hover (
kenarlık: 1 piksel düz # A9CF54;
kutu gölgesi: 0 0 5px # A9CF54;
}
.portfolio-area li (
şamandıra: sol;
kenar boşluğu: 0 12px 20px 0;
taşma: gizli;
genişlik: 245px;
dolgu: 5px;
}
.home-portföy-metni (margin-top: 10px;)
li.active a (metin süsleme: altı çizili;)

Prensip olarak, stillerle ilgili her şey net olmalıdır. Kategorilerin sıralanması için display özelliği satır içi olarak ayarlanır. Görüntüye kontur efekti vermek için arka plan rengini (beyaz) ve 10 piksellik bir ofseti ayarlayın. Liste öğelerinin boyutları .portfolio-area li içinde ayarlanır.

jQuery

Ve son olarak, en önemli şey, o zaman tüm ders için. Bu jQuery kodudur. Görüntüleri kategoriye göre filtreleyerek başlayalım.

// Portföy alanının tüm alt öğelerini seçin ve değişkene yazın
var $ veri \u003d $ (". portföy alanı"). clone ();

$ (". portföy-categ li"). tıklayın (işlev (e) (
$ (". filtre li"). removeClass ("aktif");

Var filterClass \u003d $ (bu) .attr ("sınıf"). Bölme ("") .slice (-1);

Eğer (filterClass \u003d\u003d "tümü") (
var $ filteredData \u003d $ data.find (". portföy-öğe2");
) Başka (
var $ filteredData \u003d $ data.find (". portföy-öğe2");
}
$ (". portföy alanı"). hızlı komut ($ filteredData, (
süresi: 600,
AdjustHeight: "auto"
), işlev () (

LightboxPhoto ();
});
$ (this) .addClass ("aktif");
yanlış dönüş;
});

Clone () yöntemini ve seçiciyi kullanarak .portfolio-alanının tüm alt öğelerini seçer ve bunları $ data değişkenine yazarız. Daha sonra, kategorilerden biri olan .portfolio-categ sınıfına sahip listedeki li öğesi üzerindeki tıklamayı izliyoruz. RemoveClass'ı ("aktif") kaldırarak tüm kategorileri pasif hale getiriyoruz, eğer bu yapılmazsa zamanla tüm kategoriler aktif hale gelecek ve filtreleme duracaktır.

Liste öğesine tıkladığımız için, bu seçici liste öğesini içerir, yani li, ondan sınıf özniteliğinin değerini alırız ve sınıf adını birkaç parçaya bölmek için bölme yöntemini kullanırız, sınır bir boşluktur (yani, sınıf " tümü aktif "sonra bölündükten sonra" tümü "ve" aktif "dizisini elde ederiz). Ve sonra, dilim yöntemini kullanarak, dizinin ilk elemanını (bizim durumumuzda "tümü") seçeriz ve elde edilen sonucu filterClass değişkenine yazarız. Boşluk yoksa sınıfın adı değişmeyecektir.

Ardından, filterClass değişkeninin dizeyi içerip içermediğini kontrol ediyoruz herşey, sonra .find yöntemini kullanarak, portföy öğesi2 sınıfına sahip tüm öğeleri yukarıda tartıştığımız $ data dizisinden seçiyoruz. Seçilen öğeler (ve bunlar listenin tüm öğeleri, yani tüm resimlerdir) filteredData değişkenine yerleştirilir.

Aksi takdirde, filterClass eşit değilse herşey, daha sonra filterData değişkenine listenin tüm öğelerini değil, yalnızca data-type özniteliği kategori sınıfıyla eşleşenleri koyacağız. Kısacası, öğeler yalnızca bir kategoridedir.

Ve sonunda, ortaya çıkan değişkeni kütüphaneye aktarıyoruz jquery Quicksand, resimleri filtreleyen. Bu tamamen filtrelemeyle ilgili.

Şimdi pop-up'taki görüntünün büyütülmesi için. Burada her şey çok daha basit.

JQuery ("a"). PrettyPhoto ((
animationSpeed: "hızlı",
slayt gösterisi: 5000,
tema: "facebook",
show_title: yanlış,
overlay_gallery: yanlış
});

Rel özniteliği prettyPhoto ile başlayan bir bağlantıdaki bir tıklama izlenir. Sonra kütüphane devreye girer güzel fotoğrafve görüntü mucizevi bir şekilde büyütülür. Bu arada, birkaç parametre de aktarıyoruz. Animasyon hızı - hızlı, slayt gösterisi gecikmesi - 5 saniye, Facebook teması (resimlerde / prettyPhoto klasöründe toplam 5 tema vardır), ayrıca resim adının görüntülenmesini ve fareyle üzerine gelindiğinde yakınlaştırmayı yasaklar.

Bugün, çok orijinal geçişlere sahip harika resim galerileri oluşturmanıza olanak tanıyan jQuery Flipping Gallery eklentisine bir göz atacağız. Örnekte, bu eklentiyi kullanan 5 tür geçiş vardır. Eklentinin kullanımı gerçekten çok kolaydır, bu nedenle herkes onunla tam olarak çalışabilir.

Burada bir örnek görülebilir:

İndir

Menü sol üstte göründüğünde Demo 2'den bir menünün nasıl oluşturulacağına daha yakından bakacağız.

HTML bölümü

Öncelikle, indirebileceğiniz jQuery kitaplığını ve Flipping Gallery eklentisini etiketler arasında bağlamanız gerekir. :

Sonra görüntüleri yerleştiriyoruz. İstediğiniz kadar resim ekleyebilirsiniz:

1 2 3 4 5 6 7 8

<div class \u003d "galeri"\u003e <a href \u003d "#"\u003e <a href \u003d "#"\u003e <a href \u003d "#"\u003e <a href \u003d "#"\u003e <a href \u003d "#"\u003e ... </ div\u003e

Ve görüntüler için bir açıklama eklemek için (demo 4 ve 5'te olduğu gibi), veri başlığı:

1 2 3 4 5 6 7 8

<div class \u003d "galeri"\u003e <a href \u003d "#" data-caption \u003d "Çok"\u003e <a href \u003d "#" data-caption \u003d "harika"\u003e <a href \u003d "#" data-caption \u003d "galeri"\u003e <a href \u003d "#" data-caption \u003d "with"\u003e <a href \u003d "#" data-caption \u003d "Çevirme"\u003e ... </ div\u003e

JS bölümü

Her yöntemin ne anlama geldiğini görelim:

• yön - görüntülerin nasıl görüneceğinden sorumlu yöntem. "İleri" ise, o zaman baştaki görüntü sona yerleştirilecektir, eğer "geri" ise - tersi. Varsayılan "ileri" dir.
• seçici - resimleri seçtiğimiz seçici, isteğe göre değiştirilebilir.
• aralık - perspektifte resimler arasındaki boşluğu ayarlar.
• showMaximum - kullanıcı tarafından görülebilen resimlerin sayısını ayarlar. En az 100 resim kullanabilirsiniz, ancak yalnızca ilk 15 tanesi gösterilecektir, bu çok kullanışlıdır ve tarayıcıyı yüklememektedir.
• enableScroll - fare tekerleğini kullanarak resimleri görüntüleyebilirsiniz.
• flipDirection - resmin nereye kayacağını belirler: "sola" - sola, "sağa" - sağa, "yukarı" - yukarı ve "aşağı" - aşağı. Varsayılan olarak aşağı kayar.
• otomatik oynatma - galeri otomatik başlatma. Milisaniye cinsinden ayarlanır, yani kaç görüntü değişecek sonra.

Çıktı

Artık fotoğraflarınızı gönderirken kullanabileceğiniz harika bir galeriniz var.

Resim galerileri ve kaydırıcılar, en popüler jQuery biçimlerinden bazılarıdır. Onlar sayesinde, değerli alandan tasarruf ederken, siteye gerekli miktarda görsel içerik ekleyebilirsin.

Galeriler ve kaydırıcılar sayfayı daha az meşgul hale getirir, ancak yine de mesajı iletmek için gereken tüm resimleri eklemenize izin verir. Özellikle çevrimiçi mağazalar için faydalı olacaklar.

Bugünün makalesinde, sizin için en iyi jQuery resim galerilerini ve kaydırıcıları topladık.

Bunları yüklemek için, seçilen eklentileri jQuery kitaplığı ile birlikte HTML sayfasının baş bölümüne ekleyin ve bunları belgelere göre yapılandırın (sadece birkaç satır kod).

Bu unsurlardan hangisinin projenize tam olarak uyacağını seçin.

1. Önyükleme Kaydırıcısı

Bootstrap Slider, dokunma ve kaydırma özellikli ücretsiz, mobil cihazlar için optimize edilmiş bir görüntü kaydırıcısıdır. Herhangi bir ekranda ve herhangi bir tarayıcıda harika görünecek. Görüntüleri, videoları, metinleri, küçük resimleri ve düğmeleri kaydırıcılara yükleyebilirsiniz.

2. Ürün Önizleme Kaydırıcısı

Ürün Önizleme Sürgüsü, jQuery'nin tüm potansiyelini bünyesinde barındırır ve her arabirime mükemmel şekilde uyar. Ayrıca bu eklentinin kodunun kalitesinden ve saflığından da memnun kalacaksınız.

3. Genişletilebilir Resim Galerisi

Genişletilebilir Resim Galerisi, tek bir tıklama ile tam ekran galeriye dönüşen harika bir eklentidir. Hakkımızda bölümü için veya ürün bilgilerini görüntülemek için kullanılabilir.

4. Fotorama

Fotorama, hem masaüstü hem de mobil tarayıcılar için çalışan bir jQuery duyarlı galeri eklentisidir. Birçok gezinme seçeneği sunar: küçük resimler, kaydırma, ileri ve geri düğmeleri, otomatik slayt gösterileri ve işaretçiler.

5. Sürükleyici Kaydırıcı

Immersive Slider, Google TV kaydırıcısına benzer benzersiz bir slayt gösterisi deneyimi oluşturmanıza olanak tanır. Ana fotoğrafta odağı korumak için bulanıklaştırılacak arka plan görüntüsünü değiştirebilirsiniz.

6. Aslı

Leastjs, harika bir galeri oluşturmanıza yardımcı olacak duyarlı bir jQuery eklentisidir. Resmin üzerine geldiğinizde metin belirir, tıklandığında pencere tam ekrana genişler.

7. Kayan Panel Şablonu

Bu eklenti bir portföy için mükemmeldir. Yatay olarak düzenlenmiş (küçük ekranlarda dikey olarak), seçilen içeriğin sabitleneceği görüntü blokları oluşturacaktır.

8. Squeezebox Portföy Şablonu

Squeezebox Portföy Şablonu, portföyler için hareket efektleri sunar. Ana görüntünün (veya bloğun) üzerine geldiğinizde bağlantılı öğeler görünür.

9. Resimleri Karıştırın

Shuffle Images, üzerine gelindiğinde değişen bir resim galerisi oluşturmanıza olanak tanıyan harika bir duyarlı eklentidir.

10. Ücretsiz jQuery Lightbox Eklentisi

Ücretsiz jQuery Lightbox Eklentisi, bir sayfada bir veya daha fazla resim göstermenize yardımcı olur. Ayrıca büyütülebilir ve orijinal boyutlarına geri döndürülebilirler.

11. PgwSlider - jQuery için duyarlı kaydırıcı

PgwSlider, minimalist bir görüntü kaydırıcısıdır. jQuery kodu hafiftir, bu nedenle bu eklentinin yükleme hızı sizi hoş bir şekilde şaşırtacaktır.

12. Dağınık Polaroid Galerisi

Dağınık Polaroid Galerisi harika bir düz tasarım kaydırıcısıdır. Görüntüleri değiştirirken öğeleri düzensiz hareket ediyor, bu da harika görünüyor.

13. Bouncy Content Filter

Bouncy Content Filter, portföy için mükemmel bir çözümdür. Bu eklenti, kullanıcıların bir kategoriden diğerine hızla atlamasına olanak tanır.

14. Basit jQuery Kaydırıcısı

Basit jQuery Slider, ismine kadar yaşar. Bu eklenti JavaScript, HTML5 ve CSS3 öğelerini birleştirir. Demoda varsayılan olarak yalnızca metin yükleme mevcuttur, ancak birkaç değişiklik yaparsanız görsel içerik de ekleyebilirsiniz.

15. Glide JS

Glide JS basit, hızlı ve duyarlı bir jQuery kaydırıcısıdır. Kurulumu kolaydır ve fazla yer kaplamaz.

16. Paralakslı tam ekran sürükle kaydırıcı

Görüntü ve metin yükleme özelliğine sahip bu harika jQuery kaydırıcısı, herhangi bir web sitesinde çalışacaktır. Hafif bir paralaks efekti ve yavaş metin görünümü ile kullanıcıları memnun edecek.