JQuery'de resim galerisi. JQuery'de ilginç efekt jquery galerisi tam ekran görüntü galerisi

Paralaks Kaydırıcı

Paralaks Kaydırıcı manuel kontrollerle bir slayt gösterisi şeklinde görüntülerin gösterimini organize etmek için ilginç bir çözüm. Küçük resimlerin orijinal yerleşimini çeker. Resmi web sitesi, kaydırıcıyı entegre etmek ve yapılandırmak için eksiksiz bir düzene sahiptir.

JQuery ile Minimalist Slayt Gösterisi Galerisi otomatik görüntü değişimi öğelerine sahip mükemmel bir görüntü galerisi ve ayrıca bir küçük resim ızgarasıyla açılır bir bloktan görüntülerin görüntülenmesini ve seçilmesini manuel olarak kontrol etme yeteneği. Eksilerden, tam ölçekli görüntüleri izlemenin eksikliğine dikkat edebiliriz, ancak bu, bu galerinin minimalizmi.

Otomatik olarak değişen görüntülere sahip tam ekran bir slayt gösterisi, akıllara durgunluk veren efektler yok, her şey basit ve zevkli.

Minimit Galerisigörüntüleri görüntülerken geniş bir geçiş yelpazesine sahip oldukça özelleştirilebilir bir jQuery eklentisidir. Minimit galerisinin yardımıyla, bir atlıkarınca, slayt gösterisi, basit bir döndürücü ve basit bir resim broşürü şeklinde bir resim gösterimi düzenleyebilirsiniz.

Görüntüleri slayt gösterisi olarak göstermenin basit ve mantıksız bir yolunu sağlayan küçük (2kb) bir jQuery eklentisidir.

Tüm bilgisayarlarda, iPhone'larda ve mobil cihazlarda sezgisel kontroller ve kusursuz uyumluluğa sahip güzel görünümlü bir javascript galerisi. Kurulumu ve yapılandırması çok kolay

Birçok Javascript ve jQuery görüntü kaydırıcısının aksine, Slider.js karma bir çözüm, verimli CSS3 geçişleri ve animasyon tabanlı.

Bu, HTML5 ve CSS3'te çeşitli sunumlar oluşturmak için tek sayfalık bir şablondur.

Diapo slideshow, açık kaynak kodlu bir projedir. İsterseniz değişiklik veya iyileştirme önerebilirsiniz. Ücretsiz olarak indirebilir ve kullanabilirsiniz, ayrıca hiçbir şey ve hiç kimse bu kaydırıcıyı projelerinizde kullanmaktan rahatsız olmaz. Kaydırıcı, sunulan içerik arasında kolayca özelleştirilebilir, ilginç geçişler sağlar ve kaydırıcıya herhangi bir şey yerleştirebilirsiniz, herhangi bir pervaz olmadan oldukça hızlı çalışır.

Web sitelerinde ve diğer web projelerinde slayt gösterileri oluşturmak için başka bir araçtan başka bir şey değildir. Tüm modern tarayıcılar, yatay ve dikey animasyon, özel geçişler için destek, geri arama API'si ve daha fazlası tarafından desteklenir. Tamamen ücretsiz olarak dağıtılan, yeni başlayanlar için anlaşılabilir ve erişilebilir herhangi bir html öğesini slaytlarda kullanabilirsiniz.

Çevik Geliştirme için JavaScript Slayt Gösterisi

Slayt gösterilerinizi bu harika jQuery eklentisiyle uygulayın. İçerik sunumunuzu ihtiyaçlarınıza göre oluşturabilmeniz için oldukça özelleştirilebilir bir araç. CMS'nizden harici veriler veya verilerle daha kolay entegrasyon sağlamak için bir veri formatı kullanılır. Bu yeni bir versiyondur ve sıfırdan yazılmıştır. Geliştiriciler, beyin çocuklarıyla çalışmanın tüm sürecini son derece açık ve anlaşılır bir şekilde tanımlamaya çalıştılar.

- Sıralanmamış listeleri çekici animasyon efektleriyle slayt gösterilerine dönüştürmenize olanak tanıyan jQuery eklentisi. Bir slayt gösterisinde, sayıları veya küçük resimleri kullanarak veya Önceki ve Sonraki düğmelerini kullanarak bir slayt listesi görüntüleyebilirsiniz. Kaydırıcıda küp (çeşitli alt türlerle), boru, blok ve daha fazlası dahil olmak üzere birçok orijinal animasyon türü vardır.

Web projelerinizdeki çeşitli içeriklerin her türlü sunumunu düzenlemek için eksiksiz bir araç seti. Burjuva adamlar, klipte dahil olmak üzere, jQuery'nin büyüsünü kullanarak neredeyse her türden çeşitli kaydırıcılar ve galeriler dahil ellerinden gelenin en iyisini yaptılar. Fotoğraf kaydırıcısı, fotoğraf galerisi, dinamik slayt gösterisi, atlıkarınca, içerik kaydırıcısı, sekmeler menüsü ve çok daha fazlası, genel olarak önlenemez hayal gücümüzün dolaşabileceği bir yer var.

Bu, basitlik göz önünde bulundurularak oluşturulmuş bir jQuery slayt gösterisi eklentisidir. Hem yeni başlayanlar hem de ileri düzey geliştiriciler için yalnızca en kullanışlı işlevler setini paketleyerek, basit ama aynı zamanda kullanıcı dostu olan çok etkili slayt gösterileri oluşturma yeteneği sağlar.

- jQuery üzerine inşa edilmiş bu kadar basit bir kaydırıcı, her bakımdan basit, özel beceriler gerektirmez, sanırım birçoğunun sitelerinde slayt gösterilerinin uygulanması için kullanışlı olacağını düşünüyorum. Eklenti, daha yavaş IE dahil olmak üzere tüm modern tarayıcılarda test edilmiştir.

jbgallery jQuery kitaplığının javascript ile yazılmış bir tür kullanıcı arayüzü widget'idir. İşlevi, tam ekran modunda sitenin arka planı olarak büyük bir resmi, kaydırıcı olarak birkaç resmi göstermektir. Tüm görünüm modlarının görünüm kontrolleri vardır. Standart bile olmadığı kendi tarzında ilginç bir çözüm.

Fotoğraflarınızı, görüntüler arasında geçiş efektleriyle (görülen ve daha ilginç) slayt gösterisi olarak görüntülemek için kullanımı kolay bir jQuery eklentisidir. jqFancyTransitions; Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+ ile uyumludur ve kapsamlı bir şekilde test edilmiştir.

Resimleri ve diğer bilgileri bir "ışık kutusu" biçiminde görüntülemek için ücretsiz bir jQuery eklentisidir. Kontroller, gölgeli arka plan ve hepsi, basit ve zevkli açılır pencere.

Lightbox serisinden bir başka jQuery eklentisi, utanç verici bir ağırlığa sahip olmasına rağmen (9 KB), birlikte çalışmak için bir sürü fırsata sahip. CSS ile her zaman geliştirebileceğiniz veya özelleştirebileceğiniz iyi tasarlanmış bir arayüz var.

Zaten adından da süslü bir şey olmadığı anlaşılıyor, tamamen eksik kontrollere sahip çok basit bir otomatik görüntü kaydırıcımız var. Kim bilir, belki sadece minimalizmi sayesinde, bu kaydırıcı dikkatinizi çekecektir.

Farklı geçiş türlerine sahip görüntü döndürücü. Hem otomatik modda hem de tıklamayla çalışır, oldukça kolay kurulur.

- sadece bir kaydırıcı yerine tam teşekküllü bir resim galerisi. Küçük resim önizleme ve geçiş efektini seçme yeteneği, tüm tarayıcılar için tam destek, bir web projesine entegrasyonun ayrıntılı açıklaması ve ücretsiz dağıtım.

Scriptaculous / prototype veya jQuery kullanarak kullanıma hazır slayt gösterilerinin bir uygulamasıdır. Horinaja bir tür yenilikçi çözümdür, çünkü kaydırıcıya yerleştirilen içerikte gezinmek için tekerleği kullanmanıza izin verir. Fare işaretçisi slayt gösterisi alanının dışındayken, değişiklik otomatik olarak gerçekleşir, işaretçi slayt gösterisinin üzerine getirildiğinde kaydırma durur.

Bir dizi en basit görüntü kaydırıcıdan bir özellik, sırasıyla görüntüleme kontrollerinin varlığına rağmen, hem otomatik hem de manuel modlarda çalışır.

s3Slider - jQuery eklentisi, sıralanmamış bir resim listesinden bir slayt gösterisi oluşturur ve herhangi bir web sitesinde kolayca uygulanabilir.

Bu, bant genişliğini korurken büyük hacimli fotoğrafları işlemek için optimize edilmiş bir jQuery eklentisidir.

Vegas Geçmişi

Vegas Background jQuery eklentisi, tümü slayt gösterisi öğeleriyle birlikte web sayfalarınıza güzel tam ekran arka plan resimleri eklemenizi sağlar. Eklentiyle çalışmanın inceliklerini dikkatlice incelerseniz, elbette sadece ihtiyacınız olursa birçok ilginç çözüm bulabilirsiniz.

- "Yazma" yöntemini kullanarak, makalelerin görüntüleri veya duyuruları ve basit kontrolleri için altyazılar içeren, daha fazla veya daha az olmayan kaydırıcı olarak bir kaydırıcı.

Görüntü görüntülemeyi düzenlemek için hafif (yaklaşık 5 KB) bir javascript. Büyük resimlerin otomatik olarak yeniden boyutlandırılması ve ölçeklendirilmesi, resmi tarayıcı penceresinde tam boyutta görüntülemenizi sağlar

PikaChoose jQuery Resim Galerisi Sürüm 4 çıktı! Pikachoose, harika özelliklere sahip hafif bir jQuery slayt gösterisidir! Fancybox ile entegrasyon, harika temalar (ücretsiz olmasa da) ve çok daha fazlası eklenti geliştiricileri tarafından sunulmaktadır.

Listenizdeki görüntülerin sayısını kontrol eder ve dinamik olarak dijital gezinme biçiminde bir dizi fotoğraf bağlantısı oluşturur. Ek olarak, her bir resme tıklamak ileri veya geri hareket eder ve ayrıca resmin üzerine tıklama alanına bağlı olarak resimler arasında gezinebilirsiniz (örneğin: resmin sol tarafına tıklamak, resmin sağ tarafı için sırasıyla slaytları ileri ve geri hareket ettirecektir).

Herhangi bir WordPress şablonuna mükemmel şekilde uyan başka bir jQuery kaydırıcısı.

"Nivo" nun bir başka gelişimi, bu stüdyodaki adamların yaptığı her şey gibi, eklenti yüksek kalitede yapılmıştır, 16 benzersiz geçiş efekti, klavye navigasyonu ve çok daha fazlasını içerir. Bu sürüm, doğrudan WordPress için özel bir eklenti içerir. Bu blog motorunun tüm hayranları için, Nivo Slider tema için tam doğru olacak.

her boyuttaki görüntüler için hızlı bir şekilde basit, etkili ve güzel bir kaydırıcı oluşturmanıza olanak tanıyan jQuery eklentisi.

Piroboxhafif bir jQuery "ışık kutusu" komut dosyasıdır; görüntüleme, tüm kontrollerle birlikte görüntünün boyutuna göre otomatik olarak ayarlanan bir açılır pencere bloğundadır.

Bu galerinin yaratıcıları, resimlerin oldukça orijinal bir sunumunu sunuyor. Görüntüler dalga şeklinde küçük resimler olarak gösterilir, küçük resme tıkladığınızda resmin orta boyutlu bir versiyonunu düşünürüz, ikinci kez tıklarsanız büyük bir resminiz olur. Bunu bir deney olarak düşünebilirsiniz, ancak yeni ve alışılmadık bir şeyin her zaman ilginç olduğunu kabul etmelisiniz.

HTML5 ve jQuery ile tam ekran slayt gösterisi

Geliştiriciler, slayt gösterileri oluşturmak ve resimleri tam ekran modunda görüntülemek için, daha önce grubun makalelerinde ayrıntılı olarak açıklanan birçok fikir ve tekniği içeren, zaten tanıdık olan Vegas jQuery eklentisini kullandılar. HTML5 ses öğelerinin varlığından ve görüntüler arasındaki geçişlerin gerçekleştirilme tarzından etkilenir.

Codrops ekibinin bir başka gelişimi, tam teşekküllü ve işlevsel bir resim galerisi, ancak, onu tanımlamanın amacı ne, onu görmelisiniz.

Resim slayt gösterisi, resimler gözünüzün önünde kaybolur, etkisi inanılmaz.

JQuery kitaplığının üzerine inşa edilmiş bir resim galerisi JavaScript çerçevesidir. Amaç, web ve mobil cihazlar için profesyonel bir resim galerisi geliştirme sürecini basitleştirmektir. Açılır pencerede ve tam ekran modunda görüntüleme imkanı.

Sessizce alışmaya başladık ve Codrops ekibinden yeni çalışmalar bekledik. Resimleri tam ekran modunda görüntülemek için lütfen harika bir 3B geçiş efektine sahip harika bir resim kaydırıcısı edinin.

Slayt gösterisi düzenleyicileri serisindeki başka bir WordPress eklentisi. Hemen hemen her tasarıma kolayca entegre olur ve hem deneyimli hem de deneyimsiz kullanıcılar için birçok özelleştirme seçeneği sunar.

WordPress için yazılmış başka bir eklenti, bloglarınızdaki resimlerden veya diğer içeriklerden oluşan bir slayt gösterisini düzenlemeyi çok daha kolay hale getirecektir.

Wordpress entegrasyonu için güzel slayt gösterisi eklentisi. Xili-floom-slideshow otomatik olarak kurulur ve kişisel ayarlara da izin verilir.

Slimbox2 "Lightbox" efektli resimleri görüntülemek için köklü bir WordPress eklentisidir. Otomatik slayt gösterisini ve tarayıcı penceresinde görüntünün yeniden boyutlandırılmasını destekler. Genel olarak, bu eklentinin bu serideki diğer eklentilere göre birçok avantajı vardır.

Bu eklenti widget'ı, WordPress web siteniz veya blogunuz için dinamik, yönetilen slayt gösterileri ve sunumlar oluşturmanıza olanak tanır

Bu WordPress eklentisi, galeriye gömülü resimleri basit ve esnek bir slayt gösterisine dönüştürür. Eklenti, FlexSlider jQuery görüntü kaydırıcısını ve kullanıcının kişisel tercihlerini kullanır.

Fotoğraf slayt gösterileri, SmugMug, Flickr, MobileMe, Picasa veya Photobucket RSS beslemesinden resimler düzenlemek için bir WordPress eklentisidir, saf Javascript ile çalışır ve görüntüler.

WordPress ve daha fazlası için bunun gibi basit bir kaydırıcı. Gereksiz ve hantal bir şey yok, iş minimalist bir tarzda yapılıyor, vurgu kararlılık ve hızda, blog yönetim motoruna mükemmel bir şekilde bağlanıyor.

Bence Skitter, en iyi wordpress kaydırıcılarından biridir. Kararlılık ve çalışma hızı, çok belirgin kontroller, geçiş efektleri ve temayla oldukça basit bir bağlantıdan etkileniyor.

Sitenizdeki bir resim galerisini slayt gösterisinde görüntüleyebilme özelliğiyle kolay ve hızlı bir şekilde düzenlemenizi sağlayan bir WordPress eklentisidir. Ekran, küçük resim ekranı ve resim yazıları ile otomatik veya tam olarak kontrol edilebilir.

Of.Websitesi | Demo

Bir gönderi / sayfa için tüm resimleri slayt gösterisi olarak gösterir. Kolay kurulum. Bu eklenti, geçiş animasyonlu sürüm için Adobe Flash gerektirir, Flash bulunmazsa kaydırıcı normal şekilde çalışmaktadır.

Yazı resimlerini ve kısa makale önizlemelerini gösteren başka bir basit WordPress kaydırıcısı. Zaman zaman bu blogda böyle bir eklenti kullanıyorum.

Meteor Slides, aralarından seçim yapabileceğiniz yirmiden fazla geçiş stiline sahip jQuery tabanlı bir wordpress kaydırıcısıdır. Yazar eklentiyi "meteor" olarak adlandırdı, muhtemelen işin hızını ima ediyordu, belki de meteor hakkında hiçbir şey fark etmemiştim.

oQey Galerisi, gömülü video ve müzik özelliklerine sahip, wordpress için slayt gösterisi öğeleri içeren eksiksiz bir resim galerisidir.

Web sitelerinde ve bloglarda görüntü ve videoları görüntülemek için flash animasyon öğeleri içeren bir slayt gösterisidir. Bu kaydırıcıyı herhangi bir web sitesine yerleştirebilir, istediğiniz boyutta ve istediğiniz içerikle doldurabilirsiniz.

Flash Galeri eklentisi, normal galerilerinizi gönderi başına birden fazla albüm desteği, tam ekran önizleme ve slayt gösterisi modu ile çarpıcı resim duvarlarına dönüştürür.

WOW Slider, harika görseller (Patlama, Sinek, Panjurlar, Kareler, Dilimler, Taban, Soldurma, Yığın, Dikey Yığın ve Doğrusal) ve profesyonelce tasarlanmış şablonlar içeren WordPress için bir jQuery görüntü kaydırıcısıdır.

Promosyon Kaydırıcısı, basit bir slayt gösterisini oynatmayı veya sayfada birden fazla dönen reklam bölgesini uygulamayı kolaylaştıran bir jQuery eklentisidir, çünkü oldukça özelleştirilebilir bir araçtır, kaydırıcıda gösterilenler ve modülün nasıl çalıştığı üzerinde tam kontrole sahip olacaksınız. genellikle.

| Demo

Sürüm 2.4'teki yenilik: fotoğrafları doğrudan WordPress düzenleyicisi aracılığıyla sürükleyip bırakarak sıralamanın yanı sıra ana resimlere fotoğraf bağlantıları ekleme yeteneği. (IE8'de hatalar olabilir, tüm büyük tarayıcılarda sorunsuz çalışır. Yazarlar, gelecekte IE8 için tam destek sözü verirler.)

| Demo

Bu incelemenin son akoru, resimleri seçmek ve değiştirmek için ilginç görsel efektlere sahip başka bir kaydırıcı olan bu WordPress eklentisi olacak.

Yukarıdakilerin hepsine bakıyorum ve bunun insan insanlar için bir hayal gücü uçuşu olması gerektiğine hayret ediyorum ve bu, alacalı web geliştiricilerinin son zamanlarda web projelerinde görüntü düzenleme konusunda topladıkları her şeyden uzak. Galeriler ve slayt gösterileri oluşturmak için bu kadar harika çözümleri hayata geçirmenin artık mümkün olması harika.
Sessizce bu koleksiyonda kendinize ilginç bir şeyler bulacağınızı, kendi benzersiz galerinizi veya kaydırıcınızı, kullanıcılarınızın zevkine ve tabii ki sevdiklerinize kapatacağınızı umuyorum, ama onsuz nerede ...

yazan Dmitry Semenov
bir jQuery resim galerisi ve içerik kaydırıcı eklentisidir. Tamamen duyarlı, dokunma dostudur ve yalnızca dosya boyutunu ve performansını optimize etmek için ihtiyaç duyduğunuz özellikleri eklemenize izin veren modüler mimariye sahiptir.

andy - The Coffeescripter tarafından
JQuery için oldukça özelleştirilebilir bir galeri / vitrin eklentisi.

trent tarafından
Galleriffic, bant genişliğini korurken yüksek hacimli fotoğrafları işlemek için optimize edilmiş zengin, post-back ücretsiz bir deneyim sağlayan bir jQuery eklentisidir.

Tonik Galerisi - jQuery XML Portföy Galerisi | 6 $

aino tarafından
Galleria, jQuery kitaplığının üzerine inşa edilmiş bir JavaScript resim galerisi çerçevesidir. Amaç, web ve mobil cihazlar için profesyonel resim galerileri oluşturma sürecini basitleştirmektir.

catchMyFame tarafından
Geçen gün, bir sayfadaki bir dizi resim arasında geçiş yapmak için jQuery'yi kullanmanın basit bir yolunu aramaya başladım. Bu yüzden kodlayıcı olarak kendi eklentimi oluşturmaya başladım.

thomas Kahn tarafından
Smooth Div Scroll, içeriği yatay olarak sola veya sağa kaydıran bir jQuery eklentisidir. Smooth Div Scroll, jQuery için yazılmış diğer birçok kaydırma eklentisi dışında kaydırmayı farklı adımlarla sınırlamaz.

victor Zambrano tarafından - frwrd.net
Minishowcase, AJAX tarafından desteklenen küçük ve basit bir php / javascript çevrimiçi fotoğraf galerisidir, resimlerinizi karmaşık veritabanları veya kodlama olmadan çevrimiçi olarak kolayca göstermenize olanak tanır ve birkaç dakika içinde çalışır durumda bir galeriye sahip olmanızı sağlar.

caspar David Friedrich tarafından
EOGallery, jQuery ile yapılmış bir web animasyonlu slayt gösterisi galerisidir. Daha büyük resimleri görüntülemek için yalnızca temel jQuery işlevlerini ve Cody Lindley'in Thickbox'ını kullanır.

tarafından Arnault Pachot
JQuery için çok formatlı bir atlıkarınca, Birden çok medyayı destekleyen belirsiz ve erişilebilir portföy: fotoğraflar, video (flv), ses (mp3). Bu jQuery eklentisi, her bir medyanın uzantısını otomatik olarak algılar ve uyarlanmış oynatıcıyı uygular.

Duvar - Medya Galerisi - jQuery powered | 5 dolar

stefan Petre tarafından
Uzay efektli, çok hafif ve basit eklentiye sahip başka bir resim galerisi eklentisi.

tarafından Moreno Di Domenico
jmFullWall, etkileyici bir portföy oluşturmak için bir jQuery eklentisidir.

fabrizio Calderan tarafından
Mosaiqy, Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome ve IE7 + üzerinde çalışan fotoğrafı görüntülemek ve yakınlaştırmak için bir jQuery eklentisidir. Fotoğraflar JSON / JSONP veri yapısından alınır ve ızgaranın içine rastgele taşınır. Tüm pahalı animasyonlar, CSS3 geçişlerini kullanan son tarayıcılarda GPU'nuz tarafından devralınır ve CPU ek yükünü en aza indirir.

cody tarafından
Aşağıdaki jQuery eklentisi, bir dizi görüntüyü birkaç seçenekle küçük bir galeriye dönüştürür. Mikro Görüntü Galerisi, görüntülerin önizlemesini küçük resimler olarak gösteren bir ızgara görünümü ile yalnızca bir görüntüyü gösteren tek bir görünüm arasında geçiş yapmayı sağlar.

VION - jQuery Resim Galerisi Eklentisi | 7 $

malihu tarafından
JQuery çerçevesi ve bazı basit CSS'ler ile oluşturulmuş basit ama zarif bir tam ekran resim galerisi.

Merhaba sevgili okuyucular a! 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 herkes için uygun olduğu için 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. Tıpkı gibi!

HTML işaretlemesi

Öncelikle, kategori listesinin bulunduğu panele bir göz atalım, bu madde işaretli bir listedir ul. Ayrıca, listenin her bir öğesinin benzersiz bir sınıf adı 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 girinti 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 öğesini tıkladığımız için, bu seçici liste öğesini içerir, yani li, ondan class özniteliğinin değerini alırız ve sınıf adını birkaç parçaya bölmek için split yöntemini kullanırız, kenarlık bir boşluktur (yani, sınıf " tümü aktif "sonra bölündükten sonra bir" tümü "ve" aktif "dizisi 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 öğeleridir, 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 yerleştireceğiz. Kısaca, öğeler yalnızca bir kategoridedir.

Ve sonunda, ortaya çıkan değişkeni kitaplığa aktarıyoruz jquery Quicksand, görüntüleri filtreler. Bu tamamen filtreleme ile ilgili.

Şimdi açılır pencerede 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 giriyor 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ı (resimler / güzel Fotoğraf klasöründe toplam 5 tema vardır), ayrıca resmin 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

Uzun zamandır bugünün konusu için bir konu seçtim. Sonuç olarak, henüz seçimler yapmadığımızı fark ettim. resim galerileri... Bence harika bir konu, çünkü galeriler birçok sitede mevcuttur. Dürüst olmak gerekirse, hepsi pek çekici değil. Mevcut gelişme trendlerini göz önünde bulundurarak jquery, html5 vb. Çözümlerin şimdiden daha önce karşılaştığım çözümlerden çok daha çekici olması gerektiğini düşündüm. Yani. Bir gün geçirdikten sonra çok sayıda senaryo bulmayı başardım. Tüm bu dağdan, daha önceki yazılardan da fark ettiğiniz gibi, sadece sevdiğim için seçmeye karar verdim.
Resim Galerisi sadece durumda değil fotoğraf albümleri ile... Komut dosyası kullanılabilir, sanırım daha da doğru olacaktır. fotoğrafçılar, tasarımcılar için portföy vb. Jquery efektleri ziyaretçilerin dikkatini çekmeye ve web sitenize şıklık katmaya yardımcı olacaktır.
Yani. Dikkat koleksiyonunuza web sitesi için jquery resim galerisi eklentileri.
Yorum yapmayı ve hatırlamayı unutmayın, bu koleksiyonu kaybetmemek için makalenin altındaki yıldıza tıklayarak favorilerinize ekleyebilirsiniz.

FOTOBOKS

S Galeri

DIAMONDS.JS

Süper kutu

Düzgün Diyagonal Fade Galerisi

Gama galerisi

GENİŞLETİLEN ÖNİZLEMELİ KÜÇÜK RESİM GRID

jGallery

Glisse.js

Mozaik Akışı

Galereya

en az.js

flipLightBox

blueimp galeri