Portföy için jquery'deki galeri. Çeşitli duyarlı kaydırıcılar. Flexisel: Duyarlı JQuery Carousel Slider Eklentisi

Genellikle en iyi galeriler jQuery'de oluşturulduğundan, esas olarak jQuery tipi kaydırıcılara odaklandık, ancak birkaç basit CSS galerisi de var.

Bu koleksiyon beş ana kategoriye ayrılmıştır, böylece tercih ettiğiniz bölüme kolayca geçiş yapabilirsiniz. Başlamadan önce, ücretsiz veya premium bir çözüme yönelmenin size kalmış olduğunu söylemek istedik.

Keyif alacağınız pek çok ücretsiz kaliteli görüntü çözümü bulduk. Tabii ki, birinci sınıf kaynaklarla bizi şaşkına çeviren bazı galeriler vardı.

Koleksiyona göz atın ve ihtiyaçlarınıza en uygun görüntü çözümünü bulun. Kişisel bir proje ise kesinlikle para harcamak istemeyeceksiniz. Ancak diğer yandan, eğer serbest çalışan bir işse, müşteriniz üzerinde gerçekten bir etki bırakmak ve aynı zamanda çok fazla zaman kazanmak için biraz para harcamaya değer olabilir!

Sanırım önerdiğim şey, ücretsiz bir çözümü değiştirmenizin, kurmanızın veya kurmanızın ne kadar zaman aldığına her zaman bakmaktır. O kadar yetenekli değilseniz veya zaman alıyorsa, kesinlikle önceden hazırlanmış kodlara ve bunun gibi ucuz ama yüksek kaliteli araçlara bakın.

Aşağıda en iyi jQuery slayt gösterilerini bulacaksınız. Genellikle web sitesinin en önemli kısımlarını en moda şekilde sunmak için slayt gösterileri kullanılır.

Sıra, CSS çerçevesini temel alan bir JavaScript kaydırıcısıdır.

Slayt gösterisi 2 resim galerisi

Slayt Gösterisi 2, Mootools 1.2'nin web sitenizdeki görsellerin sunumunu yayınlamak ve canlandırmak için kullandığı bir JavaScript sınıfıdır. Tam özellik listesi için lütfen web sitelerini ziyaret edin.

Çok basit resim kaydırıcı çözümü.

Bu dinamik JavaScript slayt gösterisi, hafif (5kb) ve ücretsiz bir resim galerisi / slayt gösterisi komut dosyasıdır.

Görüntüleri otomatik olarak gösterecek, kaydırma hızını, küçük resim opaklığını ayarlayacak veya küçük resim kaydırıcısını devre dışı bırakacak şekilde kolayca ayarlayabilirsiniz. Çok hafif olduğu için bu koleksiyona dahil etmek istedim. Bu slayt gösterisini indirmek ve canlı önizlemeyi görmek için burayı tıklayın.

Bu bölümde Resim Galerilerini bulacaksınız. Portfolyolar için en uygun olanlardır ancak bloglarda da kullanılabilirler. O halde hadi derinlemesine inceleyelim.

Bu bölüm en iyi ve en güzel kaydırıcılara, premium ve ücretsiz standlara ayrılmıştır. Slayt Gösterilerine benzer bir iş yaparlar ancak içerik sahiplerini vurgulayabilirler.

LayerSlider Duyarlı jQuery Slider Eklentisi.

Ana Kaydırıcı – jQuery Dokunmatik Kaydırma Kaydırıcısı

Akordeon Kaydırıcısı – piyasadaki en iyi jQuery akordeon kaydırıcısı.

Resimlerinizi veya görsellerinizi göstermenin basit bir yoludur, ancak sizi şaşırtacak kadar güçlüdür. Kullanımı ücretsizdir. Buna bir bak.

Yaban mersini jQuery resim kaydırıcısı

Blueberry resim kaydırıcısı, duyarlı web tasarımı için özel olarak geliştirilmiş bir jQuery eklentisidir. Blueberry resim kaydırıcısı, cssgrid.net'in 1140 piksellik ızgara sistemini temel alan açık kaynaklı bir projedir. Çok basit ve aynı zamanda mükemmel bir ücretsiz seçenek.

Eminim siz de benim kadar beğeneceksiniz. Canlı önizleme ve indirme seçeneğini kontrol edin.

Rhinoslider kaydırıcı - En esnek kaydırıcı

jQuery slayt gösterisi

Bu jQuery eklentisi, web sitesinin üst kısmı için, çalışmanızı sunmak veya hakkınızda daha fazla şey söylemek için mükemmeldir.

Slideme'de, her cihaz türü için ayrı ayrı kaydırıcınızı nasıl ayarlayacağınız konusunda tam belgeler ve bir eğitim bulunmaktadır. Tasarım CSS3 animasyonlarıyla tamamen duyarlıdır. Kurulumu kolaydır ve genel bir API sağlar.

Slideme'nin kullanımı ücretsizdir ve kesinlikle bir göz atmaya değer. Demoya buradan göz atın.

Pgw kaydırıcısı, resimlerinizi sergilemek için tasarlanmış bir jQuery kaydırıcısıdır. Bu kaydırıcı tamamen duyarlıdır. Hafiftir ve tüm tarayıcılarla uyumludur. Pgw kaydırıcısı aynı zamanda SEO dostudur.

Bu kaydırıcı, en son yayınınızı veya makalelerinizi gösterebildiğinden haber veya blog web siteleri için çok uygundur.

Lens Slider jQuery ve WordPress eklentisi

Lens Slider açık kaynaklı bir projedir ve bu nedenle tamamen özelleştirilebilir. Slider, sırasız bir listenin çok basit HTML işaretlemesini kullanır. Resimler ekran görüntüsünde gördüğünüz gibi gösterilmektedir. Başka seçenek mevcut değil. Lens Slider ayrıca bir WordPress eklentisi olarak da mevcuttur ve kullanımı ücretsizdir.

En uygun kullanım ürün, hizmet veya ekip sunumu için olacaktır.

Buradan kontrol edin.

Gridder jQuery ve Ajax eklentisi

Gridder, çalışmanızı sergilemek için harika bir kaydırıcıdır. Gridder bir nevi Google görsel aramasını taklit ediyor. Resmi daha büyük görmek için küçük resme tıklarsınız ve resim genişler. Bu, aynı anda çok sayıda görüntüyü göstermenin harika bir yoludur.

Gridder, jQuery veya Ajax küçük resim önizleyicisi olarak mevcuttur. Bir sonraki portföy projeniz için harika bir ücretsiz çözümdür.

JQuery canlı önizlemesi için burayı kontrol edin. Ajax'ı istiyorsanız buraya tıklayın.

Barack JS - JavaScript slayt gösterisi

Barack Slayt Gösterisi, JavaScript ile yazılmış zarif ve hafif bir slayt gösterisidir. Bu slayt gösterisi dikey, yatay ve düzensiz listelerle çalışabilir. Görüntüler MooTool Assets ile önceden yüklenmiştir. Kodunuzu temiz tutmak için CSS kodunu kontrol etmelisiniz. Bu, gerekirse bazı parçaların değiştirilmesi anlamına gelir.

Barack Slayt Gösterisi bir portföy vitrini, ürün listesi ve hatta müşterilerinizi listelemek için kullanılabilir.

Burada bir demo bulabilir ve farklı seçenekleri test edebilirsiniz.

JQ Yakınlaştırma Evrimi

JQZoom, popüler jQuery JavaScript çerçevesi üzerine kurulmuş bir JavaScript resim büyütücüsüdür. jQZoom, görüntünüzün bazı kısımlarını büyütmek için harika ve kullanımı gerçekten kolay bir komut dosyasıdır.

Bu görüntü büyüteci, çevrimiçi mağazalar ve restoran menüleri için en uygun olanıdır.

Belgeleri ve demoyu burada bulabilirsiniz.

Multimedya Portföyü 2 - jQuery kaydırıcısı

Multimedya Portföyü 2, her medya dosyasının uzantısını otomatik olarak algılayabilen ve uygun oynatıcıyı uygulayabilen bir jQuery eklentisidir. Görüntüleri ve videoları destekler. Multimedya Portföyü basit HTML işaretlemesini kullanır ve kullanımı kolaydır.

Bu kaydırıcı ürünleri, hizmetleri ve hatta haberleri sergilemek için en uygunudur.

jQuery sanal turu

jQuery Sanal tur, basit panorama görüntüleyicinin bir uzantısıdır. Bu jQuery sanal turu, bazı panoramik manzaraları sanal bir tura dönüştürmenize olanak tanır! Bakmaya değer harika bir eklenti.

Dikey Haber kaydırıcısı – jQuery eklentisi

jQuery Vertical News kaydırıcısı, sitelerinde bazı haberleri veya pazarlama kampanyalarını göstermek isteyen web siteleri için oldukça kullanışlıdır. Duyarlıdır ve CSS3 animasyonlarını kullanır. Dikey Haber kaydırıcısı ayrıca kaydırıcının stilini tamamen özelleştirmenize olanak tanır.

En iyi saf CSS Tabanlı Galerileri bulacağınız son bölümümüze geldik. O kadar popüler olmayabilirler ama kesinlikle denemeye değerdirler. Kendiniz görün.

HoverBox Resim Galerisi

HoverBox Resim Galerisi temel olarak CSS dışında hiçbir şey kullanmayan, süper hafif (8kb) bir roll-over fotoğraf galerisidir. Daha hızlı yükleme için küçük resim ve roll-over önizleme için yalnızca tek bir görüntü kullanır. Tüm önemli tarayıcılar desteklenir. HoverBox Resim Galerisi'ni kendi projeleriniz için kullanmak ücretsizdir.

Fotoğrafçılar, her türlü portföy ve restoran menüleri için fotoğraf vitrini olarak en iyi şekilde kullanılır.

Saf CSS3 Resim Galerisi

Bu, resme tıkladığınızda açılır pencere efekti yaratan basit bir CSS3 resim galerisidir. Web sitelerinde portföyleri sergilemek için uygundur. Eğer ilgileniyorsanız, bunu kendiniz yapmak için öğreticiyi de takip edebilirsiniz.

Canlı önizlemeye göz atın.

CSS Işık Kutusu resmi Galeri-saf CSS

Bu resim galerisi başka bir saf CSS galerisidir. Tıklandığında görselleri uzaklaştırır. Kaynak kodunu indirebilir veya isterseniz eğitime göz atabilirsiniz.

CSS Işık Kutusu resim Galerisi kaydırılamayan bir web sitesinde kullanılmalıdır. Ancak bu, eğitimin sonunda yer alan tek bir JavaScript satırıyla geçersiz kılınabilir. En uygun kullanım portföy vitrini olacaktır.

Slidea – Daha Akıllı Bir Duyarlı Slider Eklentisi

Ve işte bu koleksiyonun bir mücevheri, Slidea. Slidea çok amaçlı bir içerik kaydırıcısıdır. Bu kaydırıcı eklentisi jQuery, VelocityJS ve Animus animasyon çerçevesi üzerine oluşturulmuştur. Slidea'da herhangi bir animasyon sınırlaması yoktur; onunla çok fazla muhteşemlik elde edebilirsiniz!

Ne kadar harika olduğunu anlatmaya çalışabilirim ama aşağıdaki demoyu kontrol ederseniz neden bu kadar hoşuma gittiğini anlayacaksınız!

Bu eklentileri araştırmaktan gerçekten keyif aldığımı söylemeliyim. Bir sonraki projenizde daha verimli çalışmanıza yardımcı olacağını umduğumuz harika kaydırıcılar bulduk. Burada her duruma uygun bir şeyler var.

O kadar çok şaşırtıcı kaydırıcı ve slayt gösterisi var ki, neyi belirleyeceğinize karar vermek zor. Ancak bence Gridder kaydırıcısını kesinlikle kontrol etmelisiniz, çünkü özellikle ücretsiz olarak yapabilecekleri gerçekten şaşırtıcı, bu yüzden bir kazan-kazan durumu.

Ve Slidea'yı da kesinlikle unutmamalısınız. Evet, birinci sınıf bir kaydırıcıdır, ancak o kadar çok değer taşır ki, yatırıma değer!

Makalemizi beğendiyseniz yorum yapın, arkadaşlarınızla paylaşın ve favori kaydırıcınızı kaçırıp kaçırmadığımızı bize bildirin.

Favori galeri eklentiniz hangisi? Deneyimlerinizi duymak isteriz!

Popüler bültenimize abone olun ve en son web tasarımı haberlerini ve kaynaklarını doğrudan gelen kutunuza alın.

Yetkin bir şekilde oluşturulmuş ve görsel olarak tasarlanmış, bizim durumumuzda bu ayrı bir sayfadır, mesleki faaliyetlerinde belirli bir beceri düzeyine ulaşmış herhangi bir uzmanın kişisel web sitesinin veya blogunun önemli bir unsurudur.
Portfolyo sayfası, okuyuculara ve site / blog ziyaretçilerine, fotoğraf, makale, yayın olsun, en başarılı tamamlanmış çalışmalardan oluşan bir dizi net bir şekilde 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, bir an önce düzeltilmesi gereken talihsiz bir ihmal, şu anda üzerinde çalışıyorum.
Küresel ağın geniş alanlarında, bir portföy düzenlemek için çok sayıda hazır sayfa şablonu bulabilirsiniz ve bu tür sayfaların çeşitliliği gerçekten etkileyicidir. Dolayısıyla, web tasarımı ve geliştirmenin tüm inceliklerini önemseyen herkes her zaman kendisi için uygun bir seçenek bulabilecektir. Web sitesi oluşturma konusunda bilgi sahibi olanlar için, tamamlanan çalışmaların kategoriye göre filtrelendiği, üzerinde yapılan, çekici bir geçiş efektiyle seyreltilmiş, animasyon öğeleriyle basit bir portföy sayfası olan uyarlanabilir düzen örneğini analiz etmeyi öneriyorum.

Sayfanın düzeni, çalıştırılabilir javascript ve bazı tasarım öğeleri, harika bir web tasarımcısı ve geliştiricisi olan Kevin Liew'e (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 internette gezinmek için çeşitli mobil cihazların kullanımının giderek artan popülaritesi göz önüne alındığında, uyarlanabilirlik 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 kullanıcı arayüzü öğesinden, gönderilen çalışmanın kategorilerini filtrelemek için sekmeli gezinmeden ve fareyle üzerine gelme başlığı efektli küçük resim ızgarasından oluşur.
Yeni başlayanlar için, her şeyin eninde sonunda çalışabilmesi için jQuery'nin 1.7.0 veya daha yüksek bir sürümü gerekli olacaktır. Henüz bağlamadıysanız etiketin önüne aşağıdaki satırı ekleyin:

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

$(function () ( var filterList = ( init: function () ( $("#portfoliolist").mixitup(( targetSelector: ".portfolio", filterSelector: ".filter", efektler: ["fade"], kolaylaştırma : "snap", // onMixEnd'de vurgulu efektini çağırın: filterList.hoverEffect() )); ), hoverEffect: function () ( $("#portfoliolist .portfolio").hover(function () ( $(this). find(".label").stop().animate((bottom: 0), 200, "easeOutQuad"); $(this).find("img").stop().animate((top: -30) ), 500, "easeOutQuad"); ), function () ( $(this).find(".label").stop().animate((bottom: -40), 200, "easeInQuad"); $( this).find("img").stop().animate((top: 0), 300, "easeOutQuad"); )); ) ); filterList.init(); ));

Tüm eklenti seçeneklerini ayrı ayrı değerlendirmenin bir anlamı yok, varsayılan en iyi seçenektir. Peki, eğer herhangi biri parametrelerle deneylere tabi tutulursa, lütfen her şey sizin gücünüzdedir.

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

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

• Tüm
• Uygulamalar
• kartvizitler
• Simgeler
• Logo
• Web tasarımı

Gezinme panelinde, eserler listesinin tamamını kategorilere ayrılmış olarak yerleştiriyoruz. Her portföy kategorisini, data-cat özelliği aracılığıyla, data-filter özelliğindeki değere uygun olarak bir veya başka bir gezinme çubuğu öğesine bağlamamız gerekir. Data-filtre değerleri data-cat ile eşleştirildiğinde portföy öğeleri kategoriye göre filtrelenecektir.
Şimdilik gizli olan küçük resme ek olarak, yalnızca görselin üzerine geldiğinizde açılan, eserin adını ve kategori başlığını içeren küçük bir panel ekleyeceğiz. Ve tüm bu yapının görünümünü CSS'de oluşturmayı kolaylaştırmak için, karşılık gelen sınıfları öğelere yazacağız:

Barındırma Beget.Ru Logo.........

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

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

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

İkinci bölümde ise aynı stil sayfasında çeşitli medya sorgularının yardımıyla alternatif CSS bölümleri oluşturacağız. Sayfamızın düzeninin çeşitli mobil cihazların ekranlarında doğru görüntülenmesi 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 belirlenen kuralları kolayca geçersiz kılıyor ve çok istenen uyarlanabilirliği elde ediyoruz.

/* Tablet */ yalnızca @media ekranı ve (min-width: 768px) ve (max-width: 959px) ( .container ( width: 768px; ) ) /* Mobil - Not: 320px genişlik için tasarım*/ yalnızca @media 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 tasarlanmıştır */ @media yalnızca ekran ve (min-width: 480px) ve (max-width: 767px) ( .container ( width: 70%; ))

Bu kadar. Geniş "Portföy" adı altındaki harika sayfamız hazır, geriye sadece onu daha az harika ve seçkin çalışmalarınızla doldurmak ve tüm dünya için sergilemek kalıyor. Hala sessizce, mütevazı bir şekilde kendinle gurur duyabilirsin. Önemli olan bu konuda aşırıya kaçmamak.
Örneği tekrar görün ve gerekirse kaynak kodunu alın, boş zamanınızda, sessiz bir ev ortamında bu çalışmayı mükemmel hale getirebilirsiniz.

Dersi oluştururken kullanılan materyal şuydu: . Orijinal, tertemiz, yazarın kaleminden çıkan portfolyo sayfası orada yer alıyor.

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

Şu anda 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 atlıkarınca kaydırıcıları da her 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 kullanılır. E-ticaret siteleri, birden fazla fotoğrafı ayrı yazılarda veya sayfalarda sergilemek için bir atlıkarınca kaydırıcısını kullanır. Kaydırma kodunun kullanımı ücretsizdir ve ihtiyaçlarınıza göre değiştirilebilir.

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

Slick, geliştiricilerinin çözümlerinin tüm kaydırıcı gereksinimlerinizi 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.

Solmaya geçiş efekti, ilginç bir "merkezde mod" özelliği, otomatik kaydırma ile görüntülerin yavaş yüklenmesini içerir. Güncellenen işlevsellik, slayt eklemeyi ve slayt filtresini içerir. Eklentiyi ihtiyaçlarınıza göre özelleştirmeniz için her şey.

Demo modu | İndirmek

Bu eklenti hem yeni başlayanlar hem de deneyimli geliştiriciler için uygun geniş bir özellik kümesine sahiptir. Bu atlıkarınca kaydırıcısının güncellenmiş bir sürümüdür. Selefinin adı da aynıydı.

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

Eklentinin mobil cihazlarda daha rahat kullanılması için sürükle ve bırak desteği 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

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

Örnekler | İndirmek

Ultra kompakt jQuery kaydırıcısı, normal bir kaydırıcıdan çok daha fazla işlevselliğe sahip bir atlıkarıncadır. Tek bir görüntü önizlemesi, çok görüntülü bir atlıkarınca ekranı ve başlığa dayalı bir kaydırıcı içerirler.

Örnekler | İndirmek

Baykuş atlıkarınca, HTML koduna kolayca gömülebilen, dokunmatik özellikli bir sürükle ve bırak kaydırıcısıdır. Eklenti, özel olarak hazırlanmış herhangi bir işaretleme olmadan güzel atlıkarıncalar oluşturmanıza olanak tanıyan en iyi kaydırıcılardan biridir.

Örnekler | İndirmek

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

Örnekler | İndirmek

Muhteşem 3D atlıkarınca. Hala 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

Yeni web siteniz için tam uygun önyükleme teknolojisini kullanan duyarlı atlıkarınca kaydırıcısı.

Örnekler | İndirmek

Portföy ve iş web sitelerinde en çok arananlar. Benzer türde bir kaydırıcı - atlıkarınca genellikle her türden sitede bulunur.

Örnekler | İndirmek

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 tipteki diğer kaydırıcılara alternatif olarak sunulmaktadır. IOS ve Android işletim sistemleri için yerleşik destek mevcuttur.

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 uygulanmıştır.

Örnekler | İndirmek

Güçlü, uyarlanabilir, atlıkarınca tipi kaydırıcı, modern bir site için mükemmeldir. Her cihazda doğru şekilde çalışır. Yatay ve dikey modları vardır. Boyutu yalnızca 1 KB'a indirilmiştir. Ultra kompakt eklentinin mükemmel yumuşak geçişleri vardır.

Örnekler | İndirmek

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

Örnekler | İndirmek

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 sergiler.

Örnekler | İndirmek

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

Örnekler | İndirmek

Scrollbox, kaydırıcı - atlıkarınca veya metin akış çizgisi oluşturmaya yönelik kompakt bir eklentidir. Temel özellikler arasında fareyle üzerine gelindiğinde duraklama ile dikey ve yatay kaydırma efekti bulunur.

Örnekler | İndirmek

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'in yaratıcıları, eski tarz jCarousel eklentisinden ilham alarak, mobil ve tablet cihazlarda kaydırıcının doğru çalışmasına odaklanan bir kopyasını oluşturdular.

Flexisel'in mobil cihazlarda çalışırken duyarlı düzeni, tarayıcı penceresinin boyut odaklı düzeninden farklıdır. Flexisel, hem düşük hem de yüksek çözünürlüklü ekranlarda çalışmaya mükemmel şekilde uyarlanmıştır.

Örnekler | İndirmek

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 galerilerine sahip bir atlıkarınca kaydırıcısı olarak iyi çalışır.

Örnek | İndirmek

Woothemes'ten ücretsiz kaydırıcı. Haklı olarak en iyi yanıt veren kaydırıcılardan biri olarak kabul edilir. Eklenti birkaç şablon içerir ve hem acemi kullanıcılar hem de uzmanlar için faydalı olacaktır.

Örnek | İndirmek

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 Android ve IOS ile işletim sistemlerinin masaüstü sürümlerini de uyumluluk sorunu olmadan destekler. Yerleşik muhteşem atlıkarınca şablonları kaydırıcıyı dikey, yatay ve dairesel modlarda kullanmanıza olanak tanır.

Örnekler | İndirmek

Bu eğitimde jQuery, CSS3 ve Timeline eklentisini kullanarak güzel bir portföy yazacağız. Timeline, olayların zaman çizelgesini görüntüleme konusunda uzmanlaşmış bir jquery eklentisidir. Bu portföye farklı medya türlerini ekleyebilir: tweet'ler, videolar, haritalar, resimler, gönderiler ve ardından bunları tarihe göre düzenleyebilirsiniz. Tasarım üzerinde çalışırsanız ilgi alanlarınızı ve çalışmalarınızı yansıtacak güzel bir portföy elde edeceksiniz.

Varsayılan olarak Zaman Çizelgesi eklentisi açık renk şeması içerir. Bu çoğu durumda çok kullanışlı ve gereklidir. Ancak portföyümüz için koyu renk tasarım daha zariftir. Bu nedenle onu istediğimiz gibi optimize ediyoruz.

Öncelikle sayfanın temel HTML işaretlemesine bakalım:

indeks. HTML

Zaman Çizelgesi Portföyü | Tutorialzine Demosu

Head kısmında tasarım seçeneklerimizi içerecek olan timeline.css ve Styles.css eklenti stillerine sahibiz. Sayfanın sonuna jQuery kütüphanesini, timeline eklentisini ve eklentiyi başlatacak scripts.js’yi ekliyoruz.

Eklentiyi çağırdığımızda ID=timeline olan bir DIV bloğu buluyor. Bloğun içine html işaretlemesini yerleştirir ve ardından sayfa aşağıdaki gibi olur:

Johnny b goode

Tasarımcı ve Geliştirici

Bu videoda doğanın en güzel hali.

Bazı CSS stili değişiklikleri yapacağımız için yukarıdaki kod, portföyün nasıl yapılandırıldığına dair daha iyi bir fikir veriyor. Eklentinin varsayılan stillerini değiştirmeyeceğimizi, yalnızca kendi css dosyamızdaki bazı özelliklerin üzerine yazacağımızı unutmayın. Bu bize gelecekteki portföy tasarımı değişikliklerinde avantaj sağlıyor.

CSS yazmayı detaylı olarak tartışacağız, ancak biraz sonra. Tek şey, tüm talimatları mevcut olanların üzerine yeniden yazmamız gerekecek, ancak bununla daha sonra ilgileneceğiz.

Eklentiyi başlatmak için VMM.Timeline() yöntemini çağırmamız gerekir:

$(function()( var timeline = new VMM.Timeline(); timeline.init("data.json"); ));

İnit yöntemi basit bir argümanı, yani bir veri kaynağını alır. Yukarıdaki koddaki gibi bir json dosyası veya bir Google e-tablosu olabilir.

Nasıl çalıştığı hakkında daha fazla bilgi edinmek içinveri.json, ders kaynaklarını indirin. Burada karmaşık bir şey yok, bu dosyanın yapısını anlatmaya gerek yok.

Firebug HTML Inspector ile bir HTML öğesi için timeline.css'de tanımlanan seçicileri tanımlayabilirsiniz. Bundan sonra aynı seçicileri kullanarak stillerinizi stilleri.css dosyasına atayabilirsiniz. Bazı durumlarda kullandım! kendi tarzlarına öncelik vermek önemlidir.

Aşağıda göreceğiniz tüm değişiklikler CSS stilleri kullanılarak manuel olarak eklenmiştir. Stil öğelerinin geri kalanı varsayılan olarak eklenti tarafından ayarlanır.

Öncelikle sayfayı genel olarak şekillendirdikten sonra portföyün arka planını değiştireceğiz:

#timeline( arka plan: yok; ) /* Kaydırıcıdaki bireysel olaylar */ .slider .slider-container-mask .slider-container( arka plan: yok; ) /* Özel bir arka plan resmi ayarlama */ #timeline div.navigation ( arka plan: url("../img/timeline_bg.jpg") tekrarla; border-top:none; )

3D efekti oluşturmak için gezinme kutusunda kullanmamız gerekecek. :after öğesi koyu üst kısımdır ve ona 3 boyutlu bir efekt vermek için doğrusal bir degrade kullanır.

#timeline div.navigation:before( konum:mutlak; içerik:""; yükseklik:40px; genişlik:100%; sol:0; üst:-40px; arka plan: url("../img/timeline_bg.jpg") tekrarla; ) #zaman çizelgesi div.navigation:sonra( konum:mutlak; içerik:""; yükseklik:10 piksel; genişlik:%100; sol:0; üst:-40 piksel; arka plan:tekrar-x; arka plan görüntüsü: doğrusal- degrade(alt, #434446 %0, #363839 %100); arka plan görüntüsü: -o-linear-gradient(alt, #434446 %0, #363839 %100); arka plan görüntüsü: -moz-linear-gradient( alt, #434446 %0, #363839 %100); arka plan görüntüsü: -webkit-linear-gradient(alt, #434446 %0, #363839 %100); arka plan görüntüsü: -ms-linear-gradient(alt, #434446 %0, #363839 %100); )

#timeline div.timenav-background( arka plan rengi:rgba(0,0,0,0.4) !important; ) #timeline .navigation .timenav-background .timenav-interval-background( arka plan:none; ) #timeline .top -highlight( arka plan rengi:şeffaf !önemli; )

Araç çubuğundaki yakınlaştırma ve uzaklaştırma düğmelerinin şekillendirilmesi:

#timeline .toolbar( border:none !important; arka plan rengi: #202222 !important; ) #timeline .toolbar div( border:none !important; )

Alttaki ölçek stili:

#timeline .navigation .timenav .time .time-interval-minor .minor( kenar boşluğu-sol:-1px; ) #timeline .navigation .timenav .time .time-interval div( color: #CCCCCC; )

Önceki ve sonraki olaya ait oklar:

Slider .nav-önceki .icon ( arka plan: url("timeline.png") tekrarlanmayan kaydırma 0 -293px şeffaf; ) .slider .nav-önceki,.slider .nav-next( font-family:"Segoe UI" ,sans-serif; ) .slider .nav-next .icon ( arka plan: url("timeline.png") tekrarlanmayan kaydırma 72px -221px şeffaf; genişlik: 70px !important; ) .slider .nav-next:hover . icon( konum:göreceli; sağ:-5px; ) .slider .nav-önceki:hover, .slider .nav-sonraki:hover ( color: #666; imleç: işaretçi; ) #timeline .thumbnail ( border: orta yok; )

Arka planı yükle:

#timeline .feedback ( arka plan rengi: #222222; kutu gölgesi: 0 0 30px rgba(0, 0, 0, 0,2) iç metin; kenarlık: yok; ) #timeline .feedback div( color: #AAAAAA; yazı tipi boyutu : 14 piksel !önemli; yazı tipi ağırlığı: normal; )

#timeline .slider-item h2, #timeline .slider-item h3( font-family:"Antic Slab","Segoe UI",sans-serif; ) #timeline .slider-item h2( color:#fff; ) # timeline .slider-item p( font-family:"Segoe UI",sans-serif; ) #timeline .slider-item img, #timeline .slider-item iframe( border:none; )

Sonunda kapağı değiştireceğiz. n'inci çocuğu(1) yalnızca portföyün başlığını ve açıklamasını içeren ilk slayda (kapak) bağlantı vermek için kullandım. Bu veriler bir JSON dosyasında saklanır.

/* İlk slaytı özelleştirme - kapak */ #timeline .slider-item:nth-child(1) h2( font:normal 70px/1 "Antic Slab", "Segoe UI",sans-serif; arka plan:rgba( 0,0,0,0.3); boşluk: nowrap; dolgu:10px 5px 5px 20px; konum:göreceli; sağ:-60px; z-index:10; ) #timeline .slider-item:nth-child(1 ) p i( font:normal normal 40px "Dans Komut Dosyası", "Segoe UI",sans-serif; arka plan:rgba(0,0,0,0.3); beyaz boşluk: nowrap; dolgu:5px 20px; konum:relative; right:-60px; z-index:10; ) #timeline .slider-item:nth-child(1) p .c1( color:#1bdff0; ) #timeline .slider-item:nth-child(1) p . c2( color:#c92fe6; ) #timeline .slider-item:nth-child(1) .media-container ( left: -30px; konum: göreceli; z-index: 1; ) #timeline .slider-item:nth -child(1).credit( text-align: center; )

Geriye yalnızca eklenti dosyasına eklenen timeline.psd dosyasını açmak ve bazı simgelerin rengini değiştirmek kalıyor. Bu eğitim için gerekli tüm dosyaları kaynaklara ekledim. Bu, CSS3 stiline sahip bir jQuery portföyünün oluşturulmasını tamamlar!

Bu portföyü yalnızca en son projelerinizi sergilemek için değil, aynı zamanda kariyerinizin önemli anlarını da sergilemek için kullanabilirsiniz. Hayatının mini bir günlüğü gibi! Umarım bu eğitimi beğenmişsinizdir. Düşüncelerinizi aşağıdaki yorumlarda paylaşın.

jQuery portföy eklentileri, portföyünüzü zarif bir tarzda görüntülemenize olanak tanır ve müşterilerinizi daha fazla görünürlük ve iş fırsatları elde etmeleri için etkilemenize yardımcı olur.

Hizmet sağlayan bir sektörde çalışıyorsanız bir portföyün gücünü küçümseyemezsiniz. Portfolyolar yalnızca çalışmalarınızı sergilemekle kalmaz, aynı zamanda müşterinize çalışma deneyiminiz hakkında bir fikir verir ve bu da daha fazla anlaşma ve iş ile sonuçlanır.

Aşağıda, çizimlerinizi çevrimiçi olarak sergilemek için en iyi jQuery portföy eklentilerinden bazılarını bulacaksınız. Başka bir eklenti biliyorsanız lütfen bize bildirin, listeyi güncellemekten memnuniyet duyarız.

Lunar – Photography Portfolio, güzel fotoğraf albümleri oluşturmanıza yardımcı olan çok temiz ve basit bir jQuery Eklentisi. Eklentinin güçlü noktalarından bazıları şunlardır: tamamen duyarlı ızgara, yüksek performans, modern görünüm ve his, temiz ve ferah tasarım.

Medya Kutuları Portföyü, her türlü içeriği son derece güçlü bir ızgarada görüntülemenize olanak tanıyan özellikli bir jQuery ızgara eklentisidir. Blog gönderileri, görüntülü medya, müşteriler, portföyler, alışveriş sepetleri, galeriler ve hayal edebileceğiniz her şey için kullanın.

Colio – jQuery Portföy İçerik Genişletici Eklentisi'nin fikri, portföy öğelerinizle ilgili ayrıntıları, portföy ızgaranızın üstünde, altında veya içinde görüntülenebilecek genişletilebilir görünüm biçiminde aynı sayfada görüntülemektir. Colio, hızlı başlangıç ​​için siyah beyaz tema içerir ve mevcut portföye kolayca entegre edilebilir. Ayrıca izotop ve bataklık gibi popüler filtreleme eklentileriyle de uyumludur ve tabletlerde ve mobil cihazlarda çalışır.
Demo ve İndirme

DZS ZoomFolio, yaratıcı portföyünüzü müşterilerinize sergilemek için mükemmel bir eklentidir ve hepsi bu değil. Blogunuzdaki veya tatilinizdeki bir galerideki son gönderileri göstermek için bunu kullanabilirsiniz.
Demo ve İndirme

Metro - jQuery Grid Portföy, portföyünüzü etkileşimli bir şekilde gösteren çok temiz ve basit bir jQuery Eklentisi. Eklentinin güçlü noktalarından bazıları şunlardır: tamamen duyarlı ızgara, kurulumu kolay, yüksek performans, modern görünüm ve his, temiz ve ferah tasarım.

Bu öğe, 40'ın üzerinde süper özelleştirilebilir düzen ve aralarından seçim yapabileceğiniz 19 vurgulu stil ile birlikte gelir. Tonlarca kullanıma hazır seçenek, kenarlıklar, arka planlar, farklı meta stiller vb. eklemeyi çok kolaylaştırır. Bu kadar kullanıma hazır işlevsellik sayesinde her türlü portföy veya galeri listesini kolayca oluşturabilirsiniz.
Demo ve İndirme

bootFolio, css3 animasyonuna sahip en hafif portföy filtreleme komut dosyasıdır. önyükleme için son derece optimize edilmiştir ve kullanımı çok kolaydır. Bootfolio, 76'dan fazla portföy öğesi düzeni, 14 değiştirme animasyonu, 167'den fazla öğe üzerine gelme efekti, hafif, son derece özelleştirilebilir ve çok daha fazlasıyla birlikte gelir.
Demo ve İndirme

Tonik Galeri, bazı güzel efektler ve esnek özelleştirme ayarlarıyla çok kolay bir portföy galerisi oluşturmanıza olanak tanıyan bir galeridir. Bu eklenti, sayfalandırma, kategori filtresi, veri yönetimi, ışık kutusu önizlemesi ve esnek yapılandırma gibi çok sayıda seçenek içerir.

Alfred, web geliştiricilerinin en iyi portföyleri ve en güzel galerileri oluşturmalarına yardımcı olur. Tüm süreci önemli ölçüde basitleştirir ve size çok çeşitli özellikler ve seçenekler sunar.

Bu, her galerinin bir veya daha fazla alt galeriye sahip olabileceği anlamına gelir. Portföy galerisi için son derece uygundur. Tamamen duyarlıdır ve navigasyon, galeriler vb. gibi diğer amaçlar için de kullanılabilir. Bu eklenti duyarlı tasarıma, 5 düzene, tarayıcı uyumluluğa, metro ve iOS7'den ilham aldı.