jquery portföy galerisi. Bir dizi duyarlı kaydırıcı

Bizim durumumuzda yetkin bir şekilde oluşturulmuş ve görsel olarak tasarlanmış bu ayrı sayfa, mesleki faaliyetlerinde belirli bir beceri düzeyine ulaşmış herhangi bir uzmanın kişisel web sitesinin veya blogunun önemli bir unsurudur.
Portföy sayfası, okuyuculara ve siteye / bloga gelen ziyaretçilere, fotoğraflar, makaleler, yayınlar olsun, en başarılı tamamlanmış çalışmaların bir dizisini açıkça gösterebileceğiniz bir tür rapor veya görsel bir özettir. , tasarım öğeleri vb.
Böyle bir sayfam yok ve benim açımdan bu, gerçekte ne olduğu konusunda mümkün olan en kısa sürede düzeltilmesi gereken talihsiz bir ihmal. şu an ve çalışıyorum.
sonsuz boşluklarda küresel ağ, çok sayıda bulabilirsiniz hazır şablonlar portföy organizasyonu için sayfalar ve bu tür sayfaların çeşitliliği gerçekten etkileyici. Bu nedenle, web tasarımı ve geliştirmenin tüm inceliklerini önemseyen herkes, her zaman kendileri için uygun bir seçenek bulabilecektir. Web sitesi oluşturma konusunda bilgiden muzdarip olanlar için bir örnek incelemeyi öneriyorum. uyarlanabilir düzen, basit bir portföy sayfası, tamamlanmış işin kategoriye göre filtrelenmesiyle, üzerinde yapıldı, çekici bir geçiş efektiyle seyreltildi, animasyon öğeleriyle.

Sayfanın düzeni, yürütülebilir javascript ve bazı tasarım öğeleri, harika bir web tasarımcısı ve geliştiricisi olan Kevin Liew'i (queness.com) "dağlara" verdi. En uygun çözümü seçerken, yürütme kolaylığı, jQuery eklentisinin işlevselliği, tüm modern tarayıcılarda doğru çalışma ve İnternet'te gezinmek için çeşitli mobil cihazların giderek artan popülaritesi, uyarlanabilirlik olması benim için önemliydi. gelecekteki sayfanın tasarımı. Gösterişli, tasarımcı çanları ve ıslıkları ve ağır eklentiler yok.

Temel düzen, oluşturmamız gereken iki ana UI öğesinden, gönderilen çalışmanın kategorilerini filtrelemek için sekmeli gezinmeden ve vurgulu resim yazısı efektiyle küçük resim ızgarasının kendisinden oluşur.
Yeni başlayanlar için, her şeyin sonunda çalışması için jQuery'nin en az 1.7.0 sürümü gerekli olacaktır. Henüz sahip değilseniz, ekleyin Sonraki satır etiketten önce :

MixItUp eklentisini çalıştırın, bu kodu yukarıdaki dosyalardan sonra yapıştırın:

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) .mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , efektler: [ "solma" ] , hareket hızı : "snap" , // onMixEnd üzerinde vurgulu efekti çağırın: filterList. find(".label" ) .stop() .animate(( alt: 0 ), 200 , "easeOutQuad" ) ; $(bu) .find("img" ) .stop() .animate(( üst: - 30 ), 500 , "easeOutQuad" ) ; ) , function () ( $(bu) .find(".label" ) .stop() .animate(( alt: - 40 ) , 200 , "easeInQuad" ) ; $( this) .find("img" ) .stop() .animate(( üst: 0 ), 300 , "easeOutQuad" ) ; ) ) ; ) ) ; filterList.init() ; ) ) ;

Tüm eklenti seçeneklerini ayrı ayrı düşünün, mantıklı değil, varsayılan olarak oldukça ayarlanmıştır. en iyi seçenek. Pekala, herhangi biri parametrelerle deneyler yaparsa, lütfen, her şey sizin gücünüzde.

Sayfa düzenini ve öğelerin görünümünü oluşturmak için belgeye birkaç dosya bağlayın . , temel stiller için, varsayılan stilde daha iyi tarayıcı tutarlılığı için layout.css ve başka bir küçük CSS dosyası normalize.css diyelim:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Şimdi her şeyi sırayla, mümkünse gereksiz su olmadan, erişilebilir ve anlaşılır bir şekilde, uzun süredir acı çeken ana dilimizde analiz edeceğiz.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Her şey < li>< span class = "filter" data- filter= "app" >Uygulamalar < li>< span class = "filter" data- filter= "card" >kartvizitler < li>< span class = "filter" data- filter= "icon" >Simgeler < li>< span class = "filter" data- filter= "logo" >Logo < li>< span class = "filter" data- filter= "web" >Web tasarımı

• Her şey
• Uygulamalar
• kartvizitler
• Simgeler
• Logo
• Web tasarımı

Gezinme panelinde, tüm iş listesini kategorilere ayrılmış olarak yerleştiriyoruz. Her portföy kategorisini data-cat özniteliği aracılığıyla, data-filtre özniteliğindeki değere göre bir veya başka bir gezinme çubuğu öğesiyle bağlamamız gerekir. data-filtre değerleri data-cat ile eşleştirilerek portföy öğeleri kategoriye göre filtrelenecektir.
Ek olarak, şimdilik gizli olan küçük resme ek olarak, yalnızca resmin üzerine geldiğinizde açılan, işin adını ve kategori başlığını içeren küçük bir panel ekleyeceğiz. Daha kolay şekillendirmek için görünüm CSS'deki tüm bu yapı, ilgili sınıfları öğelere yazacağız:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Barındırma Beget. Ru < span class = "text-category" >Logo < div class = "label-bg" > .........

Kullanıcının tüm çalışmalarınızı tam olarak görebilmesi için resme veya doğrudan imzaya bağlantılar ekleyebileceğinizi lütfen unutmayın.

css

Şimdi, sessizce bezler, en ilginç kısma, portföy sayfamızın kullanıcı arayüzünün genel stillerinin CSS'deki oluşumuna ve uyarlanabilir versiyonuna geçelim. Makalede yalnızca temel (varsayılan) değerleri, yani herhangi bir arka plan görüntüsü ve bağlı yazı tipi olmadan göstereceğim, tüm bunlar, kimin ihtiyacı var, demoda görülebilir veya kaynak arşivde bulunabilir.

.container (konum: göreli; genişlik: 960 piksel; kenar boşluğu: 0 otomatik; /* Tarayıcı penceresi yeniden boyutlandırıldığında gezinme zincirini görebileceksiniz */-webkit-geçiş: tüm 1'lerin kolaylığı; -moz-geçiş: tüm 1'lerin kolaylığı; -o-geçiş: tüm 1'ler kolaylık; geçiş : tüm 1'ler kolaylık; ) #filters ( kenar boşluğu : %1 ; dolgu : 0 ; liste stili : yok ; ) #filters li ( kayan nokta : sol ; ) #filters li yayılma ( ekran : blok ; dolgu : 5 piksel 20 piksel ; metin süslemesi : yok ; renkli : #666 ; /* metne biraz gölge ekle */ metin gölgesi : 1 piksel 1 piksel #FFFFFF ; imleç : işaretçi ; ) /* üzerine gelindiğinde kategori arka planını değiştir */#filters li yayılma: vurgulu ( arka plan : #34B7CD ; metin gölgesi : 0 0 2px #004B7D ; renk : #fff ; ) /* aktif kategori öğesinin arka planı */#filters li span.active ( arka plan : rgb (62 , 151, 221) ; metin gölgesi : 0 0 2px #004B7D ; renk : #fff ; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; genişlik : %23 ; kenar boşluğu : %1 ; display : yok ; float : left ; overflow : gizli ; ) .portfolio-wrapper ( taşma : gizli ;konum : göreceli !important;arka plan : #666 ; imleç : işaretçi ; ) .portfolio img ( maksimum genişlik : %100 ; konum : göreli ; ) /* altyazılar varsayılan olarak gizlidir */.portfolio .label (konum: mutlak; genişlik: %100; yükseklik: 40 piksel; alt: -40 piksel;) %; konum: mutlak; üst: 0; sol: 0;) .portfolio.etiket-metni (renk: #fff ; konum : göreli ; z-endeksi : 500 ; dolgu : 5 piksel 8 piksel ; ) görüntü : blok ; yazı tipi boyutu : 9 piksel ; )

Container ( konum: göreceli; genişlik: 960 piksel; kenar boşluğu: 0 otomatik; /* Tarayıcı penceresi yeniden boyutlandırıldığında geçiş zincirini görebileceksiniz */ -webkit-transition: tümü 1s kolaylığı; -moz-transition: tümü 1s hareket hızı; -o- geçiş: tüm 1'ler hareket hızı; geçiş: 1'lerin tümü hareket hızı; ) #filters ( kenar boşluğu: %1; dolgu:0; liste stili:yok; ) #filters li ( kayan nokta:left; ) #filters li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* metne biraz gölge ekle */ text-shadow: 1px 1px #FFFFFF; imleç: işaretçi; ) /* kategori arka planını değiştir üzerine gelindiğinde */ #filters li span:hover ( arka plan: #34B7CD; metin gölgesi: 0 0 2px #004B7D; color:#fff; ) /* etkin kategori öğesinin arka planı */ #filters li span.active ( arka plan: rgb(62, 151, 221 ); metin gölgesi: 0 0 2px #004B7D; color:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing: border- kutu; -o-kutu- boyutlandırma: kenarlık-kutu; genişlik: %23; kenar boşluğu: %1; görüntü:yok; kayan nokta:sol; taşma:gizli; ) .po rtfolio-sarmalayıcı ( taşma:gizli; konum: göreli !önemli; arka plan: #666; imleç:işaretçi; ) .portfolio img ( maksimum genişlik:100%; konum: göreceli; ) /* etiketler varsayılan olarak gizlidir */ .portfolio .label ( konum: mutlak; genişlik: %100; yükseklik:40 piksel; alt:-40 piksel; ) portföy .label-bg ( arka plan: rgb(62, 151, 221); genişlik: %100; yükseklik: %100; konum: mutlak; üst:0; sol:0; ) .portfolio .label-metni ( renk: # fff; konum: göreceli; z-index:500; dolgu:5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )

İkinci bölümde, aynı stil sayfasında, birkaç medya sorgusu yardımıyla alternatif CSS bölümleri oluşturacağız. Sayfamızın yerleşim düzeninin çeşitli mobil cihazların ekranlarında doğru bir şekilde görüntülenebilmesi için bu bölümlere farklı ekranlar için alternatif CSS kuralları ekleyeceğiz. Böylece, normal tarayıcılar için CSS tablomuzda önceden belirlenmiş kuralları kolayca geçersiz kılar ve çok istenen uyarlanabilirliği elde ederiz.

/* Tablet */ @media only screen ve (min-width : 768px ) ve (max-width : 959px ) ( .container ( width : 768px ; ) ) /* Mobil - Not: 320 piksel genişlik için tasarım*/@media yalnızca ekran ve (maksimum genişlik: 767 piksel) (.container (genişlik: %95;) #portfoliolist .portfolio (genişlik: %48; kenar boşluğu: %1;)) /* Mobil - Not: 480 piksel genişlik için tasarım */@media yalnızca ekran ve (min-genişlik : 480 piksel ) ve (maks-genişlik : 767 piksel ) ( .container ( genişlik : % 70 ; ) )

/* Tablet */ @media yalnızca ekran ve (min-genişlik: 768 piksel) ve (maks-genişlik: 959 piksel) ( .container ( genişlik: 768 piksel; ) ) /* Mobil - Not: Yalnızca 320 piksel genişlik için tasarım*/ yalnızca @medya ekran ve (maks. genişlik: 767 piksel) ( .container ( genişlik: % 95; ) #portfoliolist .portfolio ( genişlik: %48; kenar boşluğu: %1; ) ) /* Mobil - Not: 480 piksel genişlik için tasarlanmıştır */ @media yalnızca ekran ve (min-genişlik: 480 piksel) ve (maks-genişlik: 767 piksel) ( .container ( genişlik: %70; ) )

Bu kadar. "Portföy" adlı geniş adı altındaki harika sayfamız hazır, sadece daha az harika ve seçkin çalışmalarınızla doldurmak ve tüm dünya için sergilemek için kalıyor. Hala sessizce, mütevazı bir şekilde kendinle gurur duyabilirsin. Ana şey, bu konuda aşırıya kaçmamaktır.
Örneğe tekrar bakın ve gerekirse kaynak kodunu alın, boş zamanlarınızda, sessiz bir ev ortamında bu işi mükemmele ulaştırabilirsiniz.

Dersi oluştururken kullanılan materyal: . Orijinal, bozulmamış, sadece yazarın kaleminden, portföy sayfasından orada bulunur.

Herkese iyi şanslar ve vücudun yararına, kısa yazın geri kalanını geçirin!

Şu anda, bir atlıkarınca kaydırıcısı, bir işletme web sitesinde, portföy web sitesinde veya başka herhangi bir kaynakta bulunması gereken bir işlevselliktir. Tam ekran görüntü kaydırıcılarının yanı sıra yatay dönen kaydırıcılar her türlü web tasarımına iyi uyum sağlar.

Bazen kaydırıcının site sayfasının üçte birini kaplaması gerekir. Burada atlıkarınca kaydırıcısı, geçiş efektleriyle ve duyarlı düzenlerle birlikte kullanılır. Siteler e-ticaret birden fazla fotoğrafı ayrı gönderilerde veya sayfalarda sergilemek için bir dönen kaydırıcı kullanın. Kaydırıcı kodu kullanmakta serbesttir ve ihtiyaçlarınıza göre değiştirilebilir.

jQuery'yi HTML5 ve CSS3 ile birlikte kullanarak, benzersiz efektlerle sayfalarınızı daha ilgi çekici hale getirebilir ve ziyaretçilerin dikkatini sitenin belirli bir alanına çekebilirsiniz.

Slick - modern atlıkarınca kaydırıcı eklentisi

Slick, geliştiricilerinin çözümlerinin tüm kaydırıcı ihtiyaçlarınızı karşılayacağını iddia ettiği ücretsiz bir jQuery eklentisidir. Duyarlı kaydırıcı - atlıkarınca, mobil cihazlar için "döşeme" modunda ve masaüstü sürümü için "sürükle ve bırak" modunda çalışabilir.

Bir solma geçiş efekti, ilginç bir "merkezde mod" özelliği, otomatik kaydırma ile görüntülerin tembel yüklenmesini içerir. Güncellenmiş işlevsellik, slayt eklemeyi ve bir slayt filtresini içerir. Eklentiyi gereksinimlerinize göre özelleştirmeniz için her şey.

Demo modu | İndirmek

Owl Carousel 2.0 - dokunmatik cihazlar için jQuery eklentisi

Bu eklentinin cephaneliğinde - büyük set hem yeni başlayanlar hem de deneyimli geliştiriciler için uygun özellikler. Bu, atlıkarınca kaydırıcısının güncellenmiş bir sürümüdür. Selefi aynı isme sahipti.

Kaydırıcı, genel işlevselliği geliştirmek için bazı yerleşik eklentilere sahiptir. Animasyon, video oynatma, kaydırıcı otomatik oynatma, tembel yükleme, otomatik yükseklik ayarı Owl Carousel 2.0'ın ana özellikleridir.

Özellik desteği sürükle ve bırak Eklentinin mobil cihazlarda kullanımını kolaylaştırmak için drop dahildir.
Eklenti, mobil cihazların küçük ekranlarında bile büyük görüntüleri görüntülemek için mükemmeldir.

Örnekler | İndirmek

jQuery Silver Track Eklentisi

Küçük bir çekirdeğe sahip olan ve çok fazla site kaynağı tüketmeyen sayfaya bir atlıkarınca kaydırıcısı yerleştirmenizi sağlayan oldukça küçük ama zengin bir jquery eklentisi. Eklenti, animasyonlu dikey ve yatay kaydırıcıları görüntülemek ve galeriden görüntü kümeleri oluşturmak için kullanılabilir.

Örnekler | İndirmek

AnoSlide - Ultra kompakt duyarlı jQuery kaydırıcısı

Aşırı yoğun jQuery kaydırıcısı- işlevselliği geleneksel bir kaydırıcıdan çok daha fazla olan bir atlıkarınca. Tek bir görüntü önizlemesi, çok görüntülü bir döner ekran ve başlık tabanlı bir kaydırıcı içerirler.

Örnekler | İndirmek

Baykuş Atlıkarınca - jquery kaydırıcı - atlıkarınca

Baykuş atlıkarınca - destekli kaydırıcı dokunmatik ekranlar ve sürükle ve bırak teknolojisi, HTML koduna kolayca gömülür. Eklenti, özel olarak hazırlanmış herhangi bir işaretleme olmadan güzel atlıkarıncalar oluşturmanıza izin veren en iyi kaydırıcılardan biridir.

Örnekler | İndirmek

3D galeri - atlıkarınca

CSS stillerine ve bazı Javascript kodlarına dayalı 3B geçişler kullanır.

Örnekler | İndirmek

TweenMax.js ve jQuery kullanarak 3B atlıkarınca

Muhteşem 3D atlıkarınca. Hala bir beta sürümü gibi görünüyor, çünkü şu anda onunla ilgili birkaç sorun buldum. Kendi kaydırıcılarınızı test etmek ve oluşturmakla ilgileniyorsanız, bu atlıkarınca çok yardımcı olacaktır.

Örnekler | İndirmek

Önyükleme kullanarak atlıkarınca

Yeni web siteniz için doğru olan önyükleme teknolojisini kullanan duyarlı atlıkarınca kaydırıcı.

Örnekler | İndirmek

Önyükleme tabanlı kaydırıcı - Hareketli Kutu atlıkarınca

En çok portföy ve iş web sitelerinde aranır. Benzer bir kaydırıcı türü - atlıkarınca genellikle her türden sitede bulunur.

Örnekler | İndirmek

Minik Daire Kaydırıcı

Bu küçük boyutlu kaydırıcı, herhangi bir ekran çözünürlüğüne sahip cihazlarda çalışmaya hazırdır. Kaydırıcı hem dairesel hem de atlıkarınca modunda çalışabilir. Minik daire, bu türdeki diğer kaydırıcılara alternatif olarak sunulur. Yerleşik desteği vardır işletim sistemleri IOS ve Android.

Dairesel modda kaydırıcı oldukça ilginç görünüyor. Sürükle ve bırak yöntemi ve otomatik slayt kaydırma sistemi desteği iyi bir şekilde uygulanmaktadır.

Örnekler | İndirmek

Thumbelina içerik kaydırıcısı

Güçlü, uyarlanabilir, atlıkarınca tipi kaydırıcı, modern bir site için mükemmeldir. Herhangi bir cihazda düzgün çalışır. Yatay ve dikey modları vardır. Boyutu sadece 1 KB'a küçültülmüş. Ultra kompakt eklenti, mükemmel yumuşak geçişlere sahiptir.

Örnekler | İndirmek

vay kaydırıcı atlıkarınca

Siteniz için orijinal bir kaydırıcı oluşturmanıza yardımcı olabilecek 50'den fazla efekt içerir.

Örnekler | İndirmek

Duyarlı jQuery içerik kaydırıcısı bxSlider

Kaydırıcının nasıl uyum sağladığını görmek için tarayıcı penceresini yeniden boyutlandırın. Bxslider, 50'den fazla özelleştirme seçeneğiyle birlikte gelir ve özelliklerini çeşitli geçiş efektleriyle gösterir.

Örnekler | İndirmek

jAtlıkarınca

jCarousel, görüntü görünümlerinizi düzenlemenize yardımcı olacak bir jQuery eklentisidir. Örnekte gösterilen çerçeveden kolayca özel görüntü karuselleri oluşturabileceksiniz. Kaydırıcı duyarlıdır ve mobil platformlar için optimize edilmiştir.

Örnekler | İndirmek

ScrollBox - jQuery Eklentisi

Scrollbox, bir kaydırıcı - atlıkarınca veya çalışan metin satırı oluşturmak için kompakt bir eklentidir. Temel özellikler, fareyle üzerine gelindiğinde duraklama ile dikey ve yatay kaydırma efekti içerir.

Örnekler | İndirmek

dbpasCarousel

Basit bir atlıkarınca kaydırıcısı. Hızlı bir eklentiye ihtiyacınız varsa, bu %100 uygundur. Yalnızca kaydırıcının çalışması için gereken temel özelliklerle birlikte gelir.

Örnekler | İndirmek

Flexisel: Duyarlı JQuery Carousel Slider Plugin

Flexisel'in yaratıcıları, eski tarz jCarousel eklentisinden ilham alarak onun bir kopyasını çıkardılar ve kaydırıcının mobil ve tablet cihazlarda doğru çalışmasına odaklandılar.

Mobil cihazlarda çalışırken Flexisel'in duyarlı düzeni, tarayıcı penceresi boyutuna yönelik düzenden farklıdır. Flexisel, hem düşük hem de yüksek çözünürlüklü ekranlarda çalışmak için mükemmel bir şekilde uyarlanmıştır.

Örnekler | İndirmek

Elastislide - Duyarlı Döner Kaydırıcı

Elastislide, cihazın ekran boyutuna mükemmel uyum sağlar. Belirli bir çözünürlükte görüntülenecek minimum görüntü sayısını ayarlayabilirsiniz. Dikey kaydırma efektiyle birlikte sabit bir sarmalayıcı kullanan resim galerileri olan bir döner kaydırıcı olarak iyi çalışır.

Örnek | İndirmek

Esnek Kaydırıcı 2

Woothemes'ten ücretsiz kaydırıcı. En iyilerinden biri olarak kabul edilir uyarlanabilir kaydırıcılar. Eklenti birkaç şablon içerir ve hem acemi kullanıcılar hem de uzmanlar için faydalı olacaktır.

Örnek | İndirmek

inanılmaz atlıkarınca

Amazing Carousel, duyarlı bir jQuery resim kaydırıcısıdır. WordPress, Drupal ve Joomla gibi birçok içerik yönetim sistemini destekler. Ayrıca, herhangi bir uyumluluk sorunu olmadan işletim sistemlerinin Android ve IOS ve masaüstü sürümlerini destekler. Yerleşik şaşırtıcı atlıkarınca şablonları, kaydırıcıyı dikey, yatay ve dairesel modlarda kullanmanıza olanak tanır.

Örnekler | İndirmek

Uzun, bugünün konusu için konuyu seçti. Sonuç olarak, henüz seçim yapmadığımızı fark ettim. resim galerileri. Benim .. De harika konu, Çünkü galeriler birçok sitede mevcut. Açıkçası, hiçbiri çok çekici değil. Mevcut gelişme eğilimlerini göz önünde bulundurarak jquery, html5 vb. Düşündüm, çünkü daha önce tanıştığım çözümlerden çok daha çekici çözümler olmalı. Böyle. Bir gün geçirdikten sonra bulmayı başardı büyük miktar Kodlar. Tüm bu dağlardan sadece seçmeye karar verdim, çünkü önceki yazılardan fark ettiğiniz gibi seviyorum.
Resim Galerisi sadece için geçerli değil fotoğraf albümleri ile. Senaryo kullanılabilir, bence daha da doğru olacak, çünkü fotoğrafçılar, tasarımcılar için portföy vb. jquery efektleri ziyaretçilerin dikkatini çekmenize yardımcı olacak ve sitenize zarafet katacaktır.
Böyle. Dikkatiniz için koleksiyon web sitesi için jquery resim galerisi eklentileri.
Yorum yapmayı ve unutmayın 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, geçişlerin css3 kullanılarak yapıldığı. Bir fotoğrafçı için bir portföy web sitesi oluşturmak için idealdir.

Galeri

Çekici jquery resim galerisi eklentisi. Animasyon css3 ile çalışır.

DIAMONDS.JS

orijinal resim galerisi eklentisi. Minyatürler şekilleniyor eşkenar dörtgenşu anda çok popüler olan. Bu form css3 ile yapılmıştır. Bu galerinin tek olumsuz yanı, fotoğrafı tam boyutta açacak bir ışık kutusunun olmaması. Yani, lightbox eklentisini kerevit ile tutturmanız gerekir. Bu komut dosyası, uyarlanabilir bir elmas şekilli görüntü ızgarası oluşturur.

süper kutu

Modern resim galerisi kullanarak jquery, css3 ve html5. Hepimiz, önizlemeye tıkladığınızda tam görüntünün bir ışık kutusunda (açılır pencere) açılmasına alışkınız. Bu eklentinin geliştiricileri, ışık kutusunun kullanışlılığını çoktan yitirdiğine karar verdi. Bu galerideki resimler önizlemenin altında açılır. Demoyu inceleyin ve bu çözümün nasıl daha modern göründüğünü görün.
|

Pürüzsüz Diyagonal Soldurma Galerisi

Modern resim galerisi önizlemeler tüm ekran alanına dağıtılır. Komut dosyası, sunucudaki fotoğrafları içeren bir klasörü tarayabilir, yani her resmi ayrı ayrı eklemeniz gerekmez. Resimleri sunucudaki bir klasöre yüklemek ve ayarlarda dizine giden yolu belirtmek yeterlidir. Sonra senaryo her şeyi kendisi yapacak.

Gama Galerisi

Artık çok popüler olan Pinterest tarzı bir ızgaraya sahip şık, hafif, duyarlı resim galerisi. Komut dosyası olarak iyi çalışıyor sabit bilgisayarlar, yakında mobil cihazlar herhangi bir ekran çözünürlüğü ile. Bir web tasarımcısı portföyü oluşturmak için harika bir çözüm.

GENİŞLEŞTİRİLEN ÖNİZLEME İLE KÜÇÜK RESİM IZGARASI

eklenti uyarlanabilir görüntü ızgarası. Aşağıya tıklamak daha büyük bir fotoğraf ve açıklama gösterecektir. Portföy oluşturmak için iyi.

jGaleri

jGallery tam ekran, duyarlı resim galerisi. Efektler, geçişler ve hatta stil kolayca ayarlanabilir.

Glisse.js

Basit ama çok etkili bir resim galerisi eklentisi. Bir fotoğraf albümü oluşturmanız gerektiğinde tam olarak çözüm budur. Eklenti albümleri destekler ve çok havalı bir çevirme etkisine sahiptir.

Mozaik Akışı

Basit, uyarlanabilir Pinterest tarzı ızgaralı resim galerisi.

Galeri

Kategori filtreli bir başka şık Pinterest tarzı ızgara galerisi. Tarayıcılarda çalışır: Chrome, Safari, Firefox, Opera, IE7+, Android tarayıcı, Chrome mobil, Firefox mobil.

en az.js

Harika ücretsiz resim galerisiİle JQUERY kullanarak, 5 ve CSS3. Çok çekici bir görünüme sahiptir ve kesinlikle ziyaretçilerinizin dikkatini çekecektir.

FlipLightBox

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

blueimp galerisi

Esnek galeri. Kalıcı pencerede sadece görüntüleri değil, aynı zamanda video. Dokunmatik cihazlarda harika çalışıyor. Kolayca özelleştirilebilir ve ek eklentilerle işlevselliği genişletmek mümkündür (Bir sonraki eklentiye bakın).

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

Galeriler ve kaydırıcılar sayfayı daha az kalabalık hale getirir, ancak yine de mesajı iletmek için ihtiyacınız olan tüm resimleri eklemenize izin verir. Özellikle çevrimiçi mağazalar için faydalı olacaktır.

Bugünkü yazımızda sizler için derledik en iyi galeriler görüntüler ve jQuery kaydırıcıları.

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

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

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

Bootstrap Slider, dokun ve kaydır kaydırma özelliğine sahip ücretsiz, mobil için optimize edilmiş bir görüntü kaydırıcıdır. Herhangi bir ekranda ve herhangi bir tarayıcıda harika görünecek. Kaydırıcılara resim, video, metin, küçük resim 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, her arayüze mükemmel şekilde uyar. Bu eklentinin kodunun kalitesinden ve temizliğinden de memnun kalacaksınız.

3. Genişletilebilir Resim Galerisi

Genişletilebilir Resim Galerisi, tek bir tıklamayla 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 masaüstü için çalışan duyarlı bir jQuery galeri eklentisidir. mobil tarayıcılar. Çok sayıda 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ı

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ğraflara odaklanmak için arka plan görüntüsünü bulanık olacak şekilde değiştirebilirsiniz.

6. En az

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

7. Kayar Panel Şablonu

Bu eklenti portföyler için mükemmeldir. Seçilen içeriğin bağlanacağı yatay (küçük ekranlarda dikey) görüntü blokları oluşturacaktır.

8. Squeezebox Portföy Şablonu

Squeezebox Portföy Şablonu, portföy 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 resimlerle bir galeri oluşturmanıza olanak tanıyan harika bir duyarlı eklentidir.

10. Ücretsiz jQuery Lightbox Eklentisi

Özgür jQuery Işık Kutusu Eklenti, bir sayfada bir veya daha fazla resim göstermenize yardımcı olacaktır. Ayrıca büyütülebilir ve orijinal boyutlarına 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 küçüktür, bu nedenle bu eklentinin yükleme hızı sizi hoş bir şekilde şaşırtacaktır.

12. Dağınık Polaroidler Galerisi

Scattered Polaroids Gallery, harika bir düz tasarım kaydırıcıdır. Görüntüleri değiştirirken öğeleri rastgele hareket ediyor, bu da harika görünüyor.

13. Bouncy İçerik Filtresi

Bouncy Content Filter, portföyünüz için mükemmel bir çözümdür. Bu eklenti, kullanıcıların bir kategoriden diğerine hızlı bir şekilde geçmelerini sağlar.

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

Basit jQuery Slider, adının hakkını veriyor. 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. Kaydır 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ükle-kaydırıcı

Bu harika jQuery görüntüsü ve metin yükleme kaydırıcısı, herhangi bir web sitesi için mükemmeldir. Hafif bir paralaks efekti ve yavaş metin görünümü ile kullanıcıları memnun edecek.

Dijital Telepati ile
Harika bir içerik kaydırıcısı: SlideDeck – Web'de İçerik Sağlamanın Daha İyi Bir Yolu Amaç, kullanıcıların bir web sitesinin içeriğini sindirmesini ve anlamasını kolaylaştırmaktır.

slideViewer (sırasız tek bir liste üzerine kurulmuş bir jQuery görüntü kaydırıcısı) 1.2

Gian Carlo Mingati tarafından
SlideViewer, sırasız bir resim listesi gibi yalnızca birkaç satır HTML yazarak anında bir resim galerisi oluşturmaya izin veren hafif (3.5Kb) bir jQuery eklentisidir.

jqFancyTransitions – şerit efektli slayt gösterisi

Ivan Lazareviç tarafından
jqFancyTransitions, fotoğraflarınızı süslü geçiş efektleriyle slayt gösterisi olarak görüntülemek için kullanımı kolay bir jQuery eklentisidir.

AviaSlider - jQuery Slayt Gösterisi

Gaya tarafından
Sunum Döngüsü, jQuery Döngüsü komut dosyasının işlevselliğinin bir varyasyonudur. Tıklanabilir sayıların bir listesini oluşturmak yerine Sunum Döngüsü, yeni slaydın ne zaman görüneceğini gösteren bir ilerleme çubuğu oluşturur.

Dev7studios tarafından
Aşağıdaki özelliklere sahip dünyanın en harika jQuery & WordPress Image Slider'ı:

• 16 benzersiz geçiş efekti
• Basit temiz ve geçerli işaretleme
• İnce ayar yapmak için bir sürü ayar
• Yönlü ve kontrol navigasyonunda yerleşik
• Paketlenmiş sürüm yalnızca 12 kb ağırlığındadır
• Destek bağlantısı resimleri
• klavye gezintisi
• HTML Altyazıları
• 3 Kaygan Tema
• MIT lisansı altında kullanımı ve kötüye kullanımı ücretsiz

DaleDavies tarafından
Slayt gösterileri yapmak için muhtemelen kullanımı en kolay jQuery eklentisi! jQuery Easy Slides ayrıca, Javascript ve CSS'nin 2,1 kb'nin hemen altında ağırlığıyla oldukça hafif olma avantajına sahiptir.

Gelişmiş Kaydırıcı - jQuery XML Kaydırıcısı

tarafından D.Massiani
Horinaja, scriptaculous/prototype veya jQuery kullanan, kullanıma hazır bir slayt gösterisi uygulamasıdır. Horinaja, yenilikçi olduğu için navigasyon için bir fare tekerleği kullanmanıza izin verir.

tarafından OVIDIU CHERECHEȘ
Dragdealer, sonsuz ön uç çözümlerini kucaklayan, sürükle tabanlı bir JavaScript bileşenidir. JavaScript'i tanıyan kodlayıcılar için zarif bir şekilde hazırlanmıştır.

Thomas Kahn tarafından
Smooth Div Scroll, içeriği yatay olarak sola veya sağa kaydıran bir jQuery eklentisidir. JQuery için yazılmış diğer kaydırma eklentilerinin birçoğunun yanı sıra Smooth Div Scroll, kaydırmayı farklı adımlarla sınırlamaz. Eklentinin adından da anlaşılacağı gibi, kaydırma pürüzsüz. Kaydırma, kaydırılabilir alandaki sıcak noktalar kullanılarak veya otomatik kaydırma yoluyla yapıldığından görünür düğme veya bağlantı yoktur. Göze batmayan ve pürüzsüz burada anahtardır.

Sam Dunn tarafından
Supersize, jQuery kitaplığı kullanılarak oluşturulmuş tam ekran arka plan slayt gösterisidir.

Jeremy Fry tarafından
Resim galerinizi slayt gösterisi için basit bir jquery eklentisi.

UnoSlider – Duyarlı Dokunma Etkin Kaydırıcı

bxCreative tarafından
bxSlider, aşağıdaki özelliklere sahip bir içerik jQuery kaydırıcısıdır:

• Yatay, dikey ve solma geçişleri
• Birden çok slaytı aynı anda görüntüleyin ve taşıyın (atlıkarınca)
• Önceki / sonraki, çağrı cihazı, otomatik kontroller
• geçişleri kolaylaştırmak
• rastgele başlangıç
• borsa modu
• Önce, sonra, ilk, son, sonraki, önceki geri arama fonksiyonları
• İsteğe bağlı stil dahildir
• tonlarca seçenek

Gian Carlo Mingati tarafından
slideViewerPro, projeleriniz için olağanüstü kayan resim galerileri ve/veya blog gönderileri içinde etkileşimli galeriler oluşturmanıza olanak tanıyan, tamamen özelleştirilebilir bir jQuery resim galerisi motorudur.

Nathan Searles tarafından
Slides, basitlik göz önünde bulundurularak oluşturulmuş jQuery için bir slayt gösterisi eklentisidir. Acemilere yardımcı olacak kullanışlı özelliklerle dolu ve gelişmiş geliştiriciler hem zarif hem de kullanıcı dostu slayt gösterileri oluşturur.

Dinamik Sürücü ile
Görüntüleri, kullanıcı tarafından açıkça oynatılabilen veya duraklatılabilen otomatik bir slayt gösterisi olarak mı görüntülemek istiyorsunuz? Basit Kontroller Galeri, fare Galeri'nin üzerine geldiğinde açılan gezinme kontrolleriyle, bir resmi öncekinin üzerinde soldurarak döndürür ve görüntüler.

Boban Karısık tarafından
s3Slider jQuery eklentisi, jd'nin pürüzsüz slayt gösterisi komut dosyası örneğiyle yapılmıştır.

Yeni İmza ile
jCoverflip, görünüm, his ve özellik setinin hızlı ve ayrıntılı bir şekilde özelleştirilmesini sağlamak için geliştirilmiştir.

Mary Lou tarafından
Elastislide, herhangi bir ekran boyutunda çalışmak için boyutunu ve davranışını uyarlayacak duyarlı bir jQuery carousel'dir. Döner yapının akışkan genişliğine sahip bir kaba yerleştirilmesi de döner akışkanı akışkan hale getirecektir.

ZURB tarafından
Asla çalışmayan kafa karıştırıcı ve şişirilmiş görüntü kaydırıcılarından bıktınız mı? ZURB's Orbit'i sadece 4 KB'a sallayın.

LayerSlider – Paralaks Etkisi Kaydırıcısı

Scott tarafından
Harika bir jQuery UI Slider olan bu eklenti, zaten işlevsel olan bir HTML seçme öğesini bir jQuery UI kaydırıcı kontrolüyle değiştirmek için aşamalı geliştirme kullanır ve hem görsel kullanıcılar hem de yardımcı teknolojiler için bir dizi özellik ekler.

Tyler Smith tarafından
Harika, tamamen duyarlı bir jQuery kaydırıcı eklentisi. Özellikleri:

• Basit, anlamsal işaretleme
• Tüm büyük tarayıcılarda desteklenir
• Yatay/dikey kaydırma ve solma animasyonları
• Çoklu kaydırıcı desteği, Geri Arama API'si ve daha fazlası
• Donanım hızlandırmalı dokunmatik kaydırma desteği
• Özel gezinme seçenekleri
• Slaytlardaki herhangi bir html öğesini kullanın
• Yeni başlayanlar ve profesyoneller için tasarlandı:
• MIT lisansı altında kullanımı ücretsiz

tarafından çizilmiş tasarım
Özelliklerle birlikte süper basit bir jQuery Slideshow eklentisi – KOLAY – KÜÇÜK – ESNEK – NET

Kayan Resim Galerisi jQuery Eklentisi

Justin Mead tarafından
Bu eklentinin arkasındaki fikir, değişen sayıda görüntüyü çekici ve kullanımı kolay bir şekilde görüntülemektir.

Yarı Saydam - jQuery Banner Döndürücü / Slayt Gösterisi

tarafından Mark Tyrrell
Özellikle akıcı/duyarlı web düzenleriyle çalışmak üzere yazılmış bir jQuery görüntü kaydırıcı eklentisi.

madeni para kaydırıcı

Ivan Lazareviç tarafından
Benzersiz efektlere ve diğer özelliklere sahip bir jQuery görüntü kaydırıcısı:

• MIT lisansı altında kullanımı ücretsiz
• Android ve iPhone ile uyumlu
• Benzersiz geçiş efektleri
• Geçerli işaretleme
• esnek yapılandırma
• otomatik slayt
• navigasyon kutusu
• Hafif (yalnızca 8kb)
• Bağlantı resimleri
• CSS kullanılarak tamamen özelleştirilebilir

Christoph Schüssler tarafından
jQuery.popeye, jQuery JavaScript kitaplığı üzerine kurulmuş gelişmiş bir resim galerisi betiğidir. Bir resim koleksiyonunu görüntülerken yerden tasarruf etmek için kullanın ve kullanıcılarınıza resimlerinizin büyük bir versiyonunu sayfa akışından ayrılmadan göstermenin güzel ve zarif bir yolunu sunun.

Jack Moore tarafından
jQuery 1.3+ için hafif, özelleştirilebilir bir lightbox eklentisi

aeroalquimia tarafından
Slider Evolution, çok hoş geçiş efektleriyle kolayca güçlü javascript kaydırıcıları oluşturmanıza olanak tanıyan bir jQuery eklentisidir. Benzersiz ve çekici bir kaydırıcı ekleyerek web sitenizi geliştirin!