Resim galerileri ve kaydırıcılar en popüler jQuery formatlarından bazılarıdır. Onlar sayesinde sitenize gerekli miktarda görsel içerik ekleyebilir, aynı zamanda değerli alandan tasarruf edebilirsiniz.

Galeriler ve kaydırıcılar sayfayı daha az meşgul eder ancak yine de mesajınızı iletmek için ihtiyacınız olan tüm görselleri eklemenize olanak tanır. Özellikle çevrimiçi mağazalar için faydalı olacaklar.

Bugünkü yazımızda sizin için en iyi jQuery resim galerilerini ve kaydırıcılarını topladık.

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

Bu unsurlardan hangisinin projenize mükemmel şekilde uyduğunu seçin.

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

Bootstrap Slider, dokunma ve kaydırma kaydırma özelliğine sahip ü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. Kaydırıcılara görseller, videolar, metinler, küçük resimler ve düğmeler yükleyebilirsiniz.

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

Ürün Önizleme Kaydırıcısı, jQuery'nin tüm potansiyelini bünyesinde barındırır ve her türlü arayüze mükemmel uyum sağlar. Ayrıca bu eklentinin kodunun kalitesinden ve temizliğinden de memnun kalacaksınız.

3. Genişletilebilir Resim Galerisi

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

4. Fotorama

Fotorama, hem masaüstü hem de mobil tarayıcılarda çalışan duyarlı bir jQuery galeri eklentisidir. Çeşitli gezinme seçenekleri sunar: küçük resimler, kaydırma, ileri ve geri düğmeleri, otomatik slayt gösterileri ve madde işaretleri.

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

Sürükleyici Kaydırıcı, Google TV kaydırıcısına benzer benzersiz bir slayt görüntüleme deneyimi oluşturmanıza olanak tanır. Ana fotoğrafı odakta tutmak için arka plan görüntüsünü bulanıklaştıracak şekilde değiştirebilirsiniz.

6. En az

Leastjs, harika bir galeri oluşturmanıza yardımcı olacak duyarlı bir jQuery eklentisidir. İmleci görselin üzerine getirdiğinizde metin görünür; tıkladığınızda pencere tam ekrana genişler.

7. Sürgülü Panel Şablonu

Bu eklenti bir portföy için idealdir. Seçilen içeriğin bağlanacağı yatay olarak (küçük ekranlarda dikey olarak) düzenlenmiş görüntü blokları oluşturacaktır.

8. Squeezebox Portföy Şablonu

Squeezebox Portföy Şablonu, portföyünüz 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

Shuffle Images, fareyle üzerine gelindiğinde değişen resimlerden oluşan bir galeri 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 görsel göstermenize yardımcı olacaktır. Ayrıca büyütülebilir ve orijinal boyutlarına döndürülebilir.

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

PgwSlider minimalist bir görüntü kaydırıcısıdır. jQuery kodu hafif olduğundan bu eklentinin yükleme hızı sizi hoş bir şekilde şaşırtacak.

12. Dağınık Polaroid Galerisi

Dağınık Polaroid Galerisi, düz tasarıma sahip çarpıcı bir kaydırıcıdır. Görüntüler değiştirilirken öğeleri düzensiz bir şekilde hareket ediyor ve bu harika görünüyor.

13. Kabarık İçerik Filtresi

Kabaran İçerik Filtresi portföyler için ideal bir çözümdür. Bu eklenti, kullanıcıların bir kategoriden diğerine hızlı bir şekilde geçmesine olanak tanır.

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

Basit jQuery Slider ismine yakışır bir şekilde çalışır. Bu eklenti JavaScript, HTML5 ve CSS3 öğelerini birleştirir. Varsayılan demo yalnızca metnin yüklenmesine izin verir, ancak birkaç değişiklik yaparsanız görsel içerik de ekleyebilirsiniz.

15. Kayma JS

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

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

Görüntü ve metin yükleme özelliğine sahip bu muhteşem jQuery kaydırıcısı her site için uygundur. Hafif bir paralaks efekti ve yavaş metin görünümüyle kullanıcıları memnun edecek.

Bugünün konusunun konusunu seçmek için uzun zaman harcadım. Sonuç olarak, henüz seçim yapmadığımızı fark ettim. resim galerileri. Bunun harika bir konu olduğunu düşünüyorum çünkü galeriler birçok sitede mevcut. Açıkçası hepsi pek çekici değil. Mevcut geliştirme eğilimlerini dikkate alarak jquery, html5 vb. Sonuçta daha önce karşılaştığım çözümlerden çok daha çekici çözümler olması gerektiğini düşündüm. Bu yüzden. Bir gün geçirdikten sonra çok sayıda senaryo bulmayı başardık. Bütün bu dağdan sadece sevdiğim için seçmeye karar verdim, önceki yazılardan da fark ettiğiniz gibi.
Resim Galerisi yalnızca şu durumlarda geçerli değildir fotoğraf albümleri ile. Senaryo kullanılabilir, bence daha da doğru olur, çünkü fotoğrafçılar ve tasarımcılar için portföy vesaire. Jquery efektleri ziyaretçilerin dikkatini çekmenize yardımcı olacak ve sitenize şıklık katacaktır.
Bu yüzden. Dikkatiniz için koleksiyon site için jquery resim galerisi eklentileri.
Yorum yapmayı ve hatırlamayı unutmayın, bu koleksiyonu kaybetmemek için yazının altındaki yıldıza tıklayarak favorilerinize ekleyebilirsiniz.

FOTOĞRAF KUTUSU

Ücretsiz, hafif, duyarlı resim galerisi Tüm efektlerin ve geçişlerin css3 kullanılarak yapıldığı. Bir fotoğrafçının portföy web sitesini oluşturmak için idealdir.

Galeri

Çekici Jquery resim galerisi eklentisi. Animasyon css3 kullanılarak çalışır.

DIAMONDS.JS

Orijinal resim galerisi oluşturmak için eklenti. Minyatürler şu şekildedir: eşkenar dörtgenşu sıralar çok popüler. Bu form css3 kullanılarak yapılmıştır. Bu galerinin tek dezavantajı fotoğrafın tam boyutta açılacağı bir ışık kutusunun olmamasıdır. Yani, ışık kutusu eklentisini vidalamanız gerekecek. Bu komut dosyası, elmas şeklinde uyarlanabilir bir görüntü ızgarası oluşturur.

Süper kutu

Modern resim galerisi kullanarak Jquery, css3 ve html5. Hepimiz bir önizlemeye tıkladığınızda tam görüntünün bir ışık kutusunda (açılır pencere) açıldığı gerçeğine alışkınız. Bu eklentinin geliştiricileri, ışık kutusunun artık geçerliliğini yitirdiğine karar verdi. Bu galerideki resimler önizlemenin altında açılır. Demoyu izleyin ve bu çözümün çok daha modern göründüğünü görün.
|

Pürüzsüz Çapraz Solma Galerisi

Modern bir resim galerisi önizlemeler tüm ekran alanına dağıtılır. Komut dosyası, sunucudaki fotoğrafların bulunduğu bir klasörü tarayabilir, yani her görüntüyü ayrı ayrı eklemenize gerek yoktur. Resimleri sunucudaki bir klasöre yükleyin ve ayarlarda dizinin yolunu belirtin. Daha sonra senaryo her şeyi kendisi yapacak.

Gama Galerisi

Bugünlerde çok popüler hale gelen, Pinterest tarzı bir ızgaraya sahip, şık, hafif ve duyarlı bir resim galerisi. Komut dosyası hem masaüstü bilgisayarlarda hem de mobil cihazlar herhangi bir ekran çözünürlüğü ile. Bir web tasarımcısı portföyü oluşturmak için mükemmel bir çözüm.

GENİŞLEYEN ÖNİZLEME İLE KÜÇÜK RESİM IZGARA

Eklenti uyarlanabilir görüntü ızgarası. Aşağıya tıkladığınızda daha büyük bir fotoğraf ve açıklama görünecektir. Portföy oluşturmak için iyi.

jGaleri

jGallery (şimdiki değeri) tam ekran, duyarlı resim galerisi. Efektler, geçişler ve hatta stil kolaylıkla özelleştirilebilir.

Glisse.js

Basit ama çok etkili bir resim galerisi eklentisi. Fotoğraf albümü oluşturmanız gerektiğinde çözüm tam olarak budur. Eklenti albümleri destekliyor ve çok güzel bir çevirme efektine sahip.

Mozaik Akışı

Basit, uyarlanabilir Pinterest tarzı ızgara resim galerisi.

Galeri

Kategoriye göre filtrelenmiş Pinterest tarzı ızgaraya sahip başka bir şık galeri. Tarayıcılarda çalışır: Chrome, Safari, Firefox, Opera, IE7+, Android tarayıcı, Chrome mobile, Firefox mobile.

en az.js

Harika ücretsiz resim galerisi JQUERY, 5 ve CSS3 kullanarak. Oldukça çekici bir görünüme sahiptir ve hiç şüphesiz ziyaretçilerinizin dikkatini çekecektir.

FlipLightBox

Basit bir resim galerisi. Önizlemeyi tıkladığınızda görüntünün tamamı bir ışık kutusunda açılır.

blueimp Galeri

Esnek galeri. Kalıcı bir pencerede yalnızca görüntüleri değil, aynı zamanda video. Dokunmatik cihazlarda harika çalışır. Özelleştirilmesi kolaydır ve ek eklentiler kullanarak işlevselliği genişletmek mümkündür (Sonraki eklentiye bakın).

Herkese selam! Bu yazıda bakacağız, JQuery kullanarak güzel ve rahatlıkla sıralanabilir bir galeri nasıl oluşturulur?.

Güzel, uygun şekilde sıralanmış bir galeri, web siteniz için sizi ve ziyaretçilerinizi memnun edecek harika bir şeydir. Bugün kurulumu ve yapılandırması çok kolay bir kütüphane eklentisine bakacağız. JQuery– Filterizr.

Kullanım kolaylığına rağmen eklenti oldukça hafif ve etkilidir. Şimdi ona daha yakından bakalım.

Gösteri

Eklentinin nasıl çalıştığını görmek için resmi web sitesine gidin ve işte karşınızda!

Şehir, doğa, sektör, gün doğumu, gün batımına göre sıralamayı veya tüm fotoğrafları göstermeyi (varsayılan) seçebilirsiniz. Bir düğme var Karıştır görüntüleri karıştırmanıza olanak tanır. Düğmeler A.S.C. Ve TANIM resimleri sırasıyla artan ve azalan sırada sıralayın. Konuma veya açıklamaya göre bir görsel bulmak istiyorsanız açılır listeden istediğiniz öğeyi seçin ve arama alanına sorguyu girin. Farenizi görselin üzerine getirdiğinizde resim siyah beyazdan renkliye dönüşür.

Kurulum

Kütüphaneyi indirmek için düğmeye tıklayın İndirmek veya kullan NPM:

Npm filterizr'ı yükle

Eklenti zaten kutudan çıktığı gibi yapılandırılmıştır ancak varsayılanları geçersiz kılmak istiyorsanız aşağıdakilerden birini yapabilirsiniz:

1) Parametreleri olan bir nesneyi yapıcıya iletin JQuery

Var filterizd = $(".filtr-container").filterizr((
// seçenekler
})

2) Parametreleri kullanarak yeniden yazın. setOptions() nesnedeki yöntem Filtreleme.

Filterizd.filterizr("setOptions", (
// seçenekler
})

Seçenekler

Varsayılan parametreler:

Seçenekler = (
animasyonSüre: 0,5,
geri aramalar: (
onFilteringStart: function() ( ),
onFilteringEnd: function() ( )
},
gecikme: 0,
gecikmeMode: "aşamalı",
kolaylaştırma: "hareket kolaylaştırma",
filtre: "tümü",
filterOutCss: (
opaklık: 0,
dönüşüm: "ölçek(0,5)"
},
filterInCss: (
opaklık: 0,
dönüşüm: "ölçek(1)"
},
düzen: "aynıBoyut",
seçici: ".filtr-container",
kurulumKontrolleri: doğru
}

Her parametreye ilişkin daha ayrıntılı talimatlar ve açıklamalar şu adreste bulunabilir:

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

Bir örnek burada görülebilir:

İndirmek

Sol üstte görünen menüyle Demo 2'den nasıl menü oluşturulacağına daha yakından bakacağız.

HTML bölümü

Öncelikle buradan indirebileceğiniz jQuery kütüphanesini ve Flipping Gallery eklentisini etiketlerin arasına bağlamanız gerekir. :

1 2 3 4 5 6

<kafa > ... <"http://code.jquery.com/jquery-1.9.1.js"> <komut dosyası türü = "metin/javascript" src = "http://code.jquery.com/jquery.flipping_gallery.js"> ... </kafa>

Daha sonra görselleri düzenliyoruz. İstediğiniz kadar resim ekleyebilirsiniz:

1 2 3 4 5 6 7 8

<div sınıfı = "galeri" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > ... </div>

Resimlere bir açıklama eklemek için (demo 4 ve 5'te olduğu gibi) bu özelliği kullanmanız gerekir. veri başlığı:

1 2 3 4 5 6 7 8

<div sınıfı = "galeri" > <a href = "#" data-caption = "Çok" > <a href = "#" data-caption = "harika" > <a href = "#" data-caption = "galeri" > <a href = "#" data-caption = "kullanılıyor" > <a href = "#" data-caption = "Döndürme" > ... </div>

JS bölümü

1 2 3 4 5 6 7 8 9

$(".gallery") .flipping_gallery (( yön: "ileri" , seçici: "> a" , aralık: 10 , showMaximum: 15 , activeScroll: true , flipDirection: "alt" , otomatik oynatma: 500 ) ) ;

Her yöntemin ne anlama geldiğine bakalım:

• yön— görsellerin nasıl görüneceğinden sorumlu bir yöntem. "İleri" ise, başlangıçtaki görüntü sona yerleştirilecektir, "geri" ise tam tersi. Varsayılan değer “ileri”dir.
• seçici— görüntüleri seçtiğimiz bir seçici; istenildiği gibi değiştirilebilir.
• aralık— Perspektifteki görüntüler arasındaki mesafeyi ayarlar.
• showMaksimum— Kullanıcının görebileceği resim sayısını ayarlar. En az 100 resim kullanabilirsiniz, ancak yalnızca ilk 15 tanesi gösterilecektir, bu da çok kullanışlıdır ve tarayıcıyı yüklemez.
• etkinleştirmeKaydırma- Fare tekerleğini kullanarak görüntüleri görüntüleyebilirsiniz.
• çevirme yönü— görüntünün nereye kayacağını belirler: "sol" - sol, "sağ" - sağ, "üst" - yukarı ve "alt" - aşağı. Varsayılan olarak aşağı doğru kayar.
• otomatik oynatma— galeri otomatik başlatma. Milisaniye cinsinden belirtilir, yani. Görsellerin değişmesi ne kadar sürer?

Çözüm

Artık fotoğraflarınızı yayınlarken kullanabileceğiniz muhteşem bir galeriniz var.

Komut dosyaları koleksiyonumuzda web siteniz için küçük ama çok kullanışlı ve işlevsel eklentiler bulabilirsiniz. Araçlara dönüş jQueryGaleri, güzel bir tasarım, kaydırma, yakınlaştırma, küçük resim görüntüleme ve diğer birçok kullanışlı özellik ile dijital fotoğraf galerinizi kolayca düzenleyin. Hem profesyonel web siteleri için katı çözümler hem de eğlence projeleri için animasyon ve diğer özel efektler içeren parlak çözümler vardır.

Bu arada jQuery görselleri sayfayı yeniden yüklemeden ve trafik akışını artırmadan görüntülenebilir. Sunulan eklentiler, görsellerin yüklenmesini gerçek zamanlı olarak optimize etmenize ve galeriyi kullanışlı ve kullanıcı dostu bir şekilde sunmanıza olanak tanır. Ayarların kolaylığı ve mevcut birçok çözüm sayesinde, kendi jQuery fotoğraf galerisi artık tam olarak istediğiniz gibi görünebilirsiniz. Sunulan komut dosyaları farklı platformlarda test edilmiştir ve mükemmel uyumluluğa sahiptir.