jquery portföy galerisi. Portföy oluşturmak için eklenti. “Proje önerin” sayfasının uygulanması

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

Yazan: Andy – The Coffeescripter
JQuery için son derece özelleştirilebilir bir galeri/vitrin eklentisi.

tarafından Trent
Galleriffic, bant genişliğinden tasarruf ederken yüksek hacimli fotoğrafları işlemek için optimize edilmiş, zengin, geri gönderme ücretsiz bir deneyim sağlayan bir jQuery eklentisidir.

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

Aino tarafından
Galleria, jQuery kütüphanesinin üzerine kurulmuş bir JavaScript resim galerisi çerçevesidir. Amaç, web ve mobil cihazlar için profesyonel resim galerileri oluşturma sürecini basitleştirmektir.

tarafından CatchMyFame
Geçen gün jQuery'yi kullanarak sayfadaki bir dizi resim arasında geçiş yapmanın basit bir yolunu aramaya başladım. Böylece bir kodlayıcı olarak kendi eklentimi oluşturmaya başladım.

kaydeden Thomas Kahn
Smooth Div Scroll, içeriği yatay olarak sola veya sağa kaydıran bir jQuery eklentisidir. JQuery için yazılan diğer birçok kaydırma eklentisinin dışında, Smooth Div Scroll, kaydırmayı farklı adımlarla sınırlamaz.

Yazan: Victor Zambrano – frwrd.net
Minishowcase, AJAX tarafından desteklenen, karmaşık veritabanları veya kodlama olmadan, birkaç dakika içinde çalışır durumda bir galeriye sahip olmanıza olanak tanıyan, görsellerinizi çevrimiçi olarak kolayca göstermenize olanak tanıyan, küçük ve basit bir php/javascript çevrimiçi fotoğraf galerisidir.

kaydeden Caspar David Friedrich
EOGallery, jQuery ile hazırlanmış 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.

kaydeden Arnault Pachot
jQuery için çok formatlı bir atlıkarınca, birden fazla medyayı destekleyen rahatsız edici olmayan ve erişilebilir portföy: fotoğraflar, video (flv), ses (mp3). JQuery için bu eklenti, her ortamın uzantısını otomatik olarak algılayacak ve uyarlanan oynatıcıyı uygulayacaktır.

Duvar – Medya Galerisi – jQuery destekli | 5$

kaydeden Stefan Petre
Uzay efektli başka bir resim galerisi eklentisi, çok hafif ve basit bir eklenti.

kaydeden Moreno Di Domenico
jmFullWall, etkileyici bir portföy oluşturmaya yönelik bir jQuery eklentisidir.

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

Cody tarafından
Aşağıdaki jQuery eklentisi, bir dizi görüntüyü çeşitli seçeneklere sahip küçük bir galeriye dönüştürür. Mikro Resim Galerisi, resimlerin küçük resimler halinde ön izlemesini gösteren bir tablo görünümü ile yalnızca bir resmi gösteren tek bir görünüm arasında geçiş yapılmasına olanak tanır.

VION – jQuery Resim Galerisi Eklentisi | 7$

tarafından Malihu
jQuery çerçevesi ve bazı basit CSS ile oluşturulmuş basit ama zarif bir tam ekran resim galerisi.

Yetkin bir şekilde oluşturulmuş ve görsel olarak tasarlanmış, bizim durumumuzda bu ayrı bir sayfadır, mesleki faaliyetinde belirli bir beceri düzeyine ulaşmış herhangi bir uzmanın kişisel web sitesinin veya blogunun önemli bir unsurudur.
Portfolyo sayfası, web sitenizin/blogunuzun okuyucularına ve ziyaretçilerine, fotoğraflar, makaleler, yayınlar, tasarım öğeleri gibi en başarılı tamamlanmış çalışmalardan oluşan bir diziyi açıkça gösterebileceğiniz bir tür rapor veya görsel özettir. , vesaire.
Böyle bir sayfam yok ve benim açımdan bu, mümkün olan en kısa sürede düzeltilmesi gereken can sıkıcı bir ihmal, şu anda aslında üzerinde çalıştığım şey bu.
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 inceliklerine dalmayı umursamayanlar her zaman kendileri için uygun bir seçenek bulabilecekler. Web sitesi oluşturma konusunda bilgisi olmayanlar için, tamamlanmış çalışmaların kategoriye göre filtrelendiği, çekici bir geçiş efektiyle seyreltilmiş, animasyon öğeleriyle seyreltilmiş basit bir portföy sayfası olan uyarlanabilir düzen örneğine bakmayı öneriyorum.

Sayfa düzeni, çalıştırılabilir javascript ve bazı tasarım öğeleri harika web tasarımcısı ve geliştiricisi Kevin Liew (queness.com) tarafından oluşturuldu. En uygun çözümü seçerken benim için uygulamasının kolay olması, jQuery eklentisinin işlevselliği, tüm modern tarayıcılarda doğru çalışması ve internette gezinmek için çeşitli mobil cihazların kullanımının artan popülaritesi göz önüne alındığında, eklentinin uyarlanabilirliği önemliydi. gelecekteki sayfanın tasarımı. Süslü, tasarımcı çanları ve ıslıkları veya 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 sekmede gezinmeden ve başlığın ortaya çıkması için fareyle üzerine gelme efektli küçük resim ızgarasından oluşur.
Başlangıçta her şeyin işe yaraması için jQuery 1.7.0 veya daha yüksek bir sürüme ihtiyacınız olacak. Henüz bağlamadıysanız, etiketin önüne aşağıdaki satırı ekleyin:

MixItUp eklentisini başlatın, bu kodu yukarıdaki dosyalardan sonra ekleyin:

< script type= "text/javascript" >$(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(( alt: 0 ) , 200 , "easeOutQuad" ) ; $(this) .find("img" ) .stop() .animate(( üst: - 30 ) , 500 , "easeOutQuad" ) ; ) , function () ( $(this) . find(".label" ) . stop() . animate(( Bottom: - 40 ) , 200 , "easeInQuad" ) ; $( this ) .find("img" ) .stop() .animate((top: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ) ; filterList.init() ; ) ) ;

$(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 seçenek oldukça optimaldir. Birisi parametrelerle deneme yapmak isterse, lütfen gücünüzün yettiği her şeyi yapın.

Öğelerin sayfa düzenini ve görünümünü oluşturmak için birkaç dosyayı belgeye bağlayın. , biri temel stiller için, örneğin onu düzen.css olarak adlandıralım ve öğelerin standart tasarımında daha iyi tarayıcı tutarlılığı sağlamak için başka bir küçük CSS dosyası normalize.css:

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

Şimdi her şeye sırayla, mümkünse gereksiz su olmadan, erişilebilir ve anlaşılır bir şekilde, ana, kadim dilimizde bakalım.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Tüm< 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ı

• 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 öğesiyle ilişkilendirmemiz gerekir. data-filtre değerlerinin data-cat ile eşleştirilmesiyle portföy öğeleri kategoriye göre filtrelenecektir.
Ayrıca, şimdilik gizli olan küçük resme, yalnızca resmin üzerine geldiğinizde açılan, eserin adı ve kategori başlığının yer aldığı 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, ilgili sınıfları öğelere atayalım:

< 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" >Ev sahipliği yapın. Ru< span class = "text-category" >Logo< div class = "label-bg" > .........

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

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 en ilginç kısma, portföy sayfamızın kullanıcı arayüzünün genel stillerinin ve uyarlanabilir versiyonunun CSS'de oluşturulmasına 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; tüm bunlar, ihtiyaç duyanlar için demoda görülebilir veya kaynak koduyla birlikte arşivde bulunabilir. .

.container ( konum : göreceli ; genişlik : 960 piksel ; kenar boşluğu : 0 auto ; /* Tarayıcı penceresini yeniden boyutlandırırken geçiş zincirini görebileceksiniz */ -webkit-transition: all 1s easy; -moz-transition: all 1'lerin hareket hızı; -o -transition: tüm 1'lerin hareket hızı; geçiş: tüm 1'lerin 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 : yok ; color : #666 ; /* metne biraz gölge ekleyin */ text-shadow : 1px 1px #FFFFFF ; imleç : pointer ; ) /* değiştir fareyle üzerine gelindiğinde kategori arka planı */ # filtreler li span: vurgulu ( arka plan : #34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) /* etkin kategori öğesinin arka planı */ #filters li span. aktif ( arka plan : rgb (62 , 151 , 221 ); text-shadow : 0 0 2px #004B7D ; color : #fff ; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-kutusu-boyutlandırma: kenarlık-kutusu; -o-kutu-boyutlandırma: kenarlık kutusu; genişlik: %23; marj: %1; görüntü yok; şamandıra: sol; taşma: gizli; ) .portfolio-wrapper ( overflow : gizli ; konum : göreceli !önemli; arka plan : #666 ; imleç : işaretçi ; ) .portfolio img ( max-width : 100% ; konum : göreceli ; ) /* imzalar varsayılan olarak gizlidir * / .portfolio .label ( konum: mutlak; genişlik: %100; yükseklik: 40 piksel; alt: -40 piksel;) .portfolio .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 ( 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ı penceresini yeniden boyutlandırırken geçiş zincirini görebileceksiniz */ -webkit-transition: tümü 1'ler kolaylığı; -moz-transition: tümü 1'ler kolaylık; -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 ( float:left; ) #filters li span ( display: blok; padding:5px 20px; text-decoration:none; color:#666; /* metne küçük bir gölge ekleyin */ text-shadow: 1px 1px #FFFFFF; Cursor: pointer; ) /* metni değiştir fareyle üzerine gelindiğinde kategori arka planı */ #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 : kenarlık kutusu; -o-kutu- 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; ) /* imzalar 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, aynı stil sayfasında, çeşitli medya sorgularını kullanarak alternatif CSS bölümleri oluşturacağız. Sayfa düzenimizin çeşitli mobil cihazların ekranlarında doğru görüntülenmesini sağlamak için bu bölümlere farklı ekranlar için alternatif CSS kuralları da ekleyeceğiz. Böylece, normal tarayıcılar için CSS tablomuzda önceden belirlenen kuralları kolayca geçersiz kılabilir ve o çok arzu edilen uyarlanabilirliği elde edebiliriz.

/* Tablet */ yalnızca @media ekranı ve (min-width : 768px ) ve (max-width : 959px ) ( .container ( width : 768px ; )) /* Mobile - 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 tasarım */ @media yalnızca ekran ve (minimum genişlik: 480 piksel) ve (maks-genişlik: 767 piksel) (.container (genişlik: %70;))

/* 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 (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 tasarım */ @media yalnızca ekran ve (min-width: 480px) ve (max-width: 767px) ( .container ( width: 70%; ))

Bu kadar. Geniş “Portfolyo” başlığı altındaki harika sayfamız hazır, geriye sadece onu aynı derecede harika ve seçkin çalışmalarınızla doldurup tüm dünyanın görmesi için sergilemek kalıyor. Hala sessizce, mütevazı bir şekilde kendinle gurur duyabilirsin. Önemli olan bu konuda aşırıya kaçmamak.
Örneğe tekrar bakın ve gerekirse kaynak kodunu alın; boş zamanlarınızda, sessiz bir ev ortamında bu çalışmayı mükemmel hale getirebilirsiniz.

Dersi oluştururken aşağıdaki materyal kullanıldı: . Orijinal, tertemiz, yazarın kaleminden yeni çıkan portfolyo sayfası orada yer alıyor.

Herkese iyi şanslar ve kısa yazın geri kalanının tadını çıkarın!

1. jQuery galerisini kullanarak portföy uygulama

Fare imlecini sol sütunda hareket ettirdiğinizde proje küçük resimleri kayar. İçerik alanında proje adı, açıklama ve kullanılan teknolojilerin listesiyle birlikte daha büyük bir resim görüntülenir. Küçük resimler arasında geçiş yaptığınızda proje bilgileri çarpıcı bir animasyon efektiyle birbirine değişir. Açıklama sayfasında bir görsele tıkladığınızda jQuery animasyonu kullanılarak büyütülür. Ayrıca tüm portföy sayfasının çarpıcı zarif görünümüne de dikkat çekmek isterim. Demoyu izleyin.

2. CSS ve jQuery kullanarak bir portföy sitesinin süper uygulanması

Bir fotoğrafçının portföy web sitesinin mükemmel uygulaması. Bir menü öğesine tıkladığınızda, ekrana dağılmış karelerden sabit yükseklik ve genişlikte içeriğe sahip bir alan oluşturulur. Sabit bir alana daha fazla bilgi sığdırmak için içerik kaydırılabilir. Portföydeki çalışmaların görüntülenmesi alışılmadık bir uygulamadır: Küçük resme tıkladığınızda, fotoğraf, tarayıcı penceresi boyutu değiştirildiğinde otomatik olarak ölçeklenen bir arka plan görüntüsü olarak görüntülenir.

3. jQuery ile portföy duvarı

Çevrimiçi bir portföy oluşturmak için orijinal bir çözüm. Proje blokları (küçük resimler ve bağlantı içeren kısa bir açıklama) arka arkaya birkaç kez görüntülenir; tarayıcı penceresini değiştirdiğinizde bloklar, animasyonlu bir efektle sayfada eşit olarak yeniden dağıtılır. Her projede, aralarında geçiş oklar kullanılarak gerçekleştirilen birkaç küçük resim bulunabilir. Bağlantıya tıklamak, metnin kaydırılarak sabit yükseklikte yarı şeffaf bir blok üzerine yerleştirildiği tam açıklamayı içeren bir sayfa açar. Sayfa arka planı olarak projenin ölçeklenebilir bir görüntüsü kullanılır. Harika görünüyor; demoyu izleyin.

4. Sorunsuz jQuery sayfası kaydırma

Dikey ve yatay kaydırmanın uygulanması.

5. jQuery eklentisi “Sürüklenebilir Görüntü Kutuları Izgarası”

İçerik blokları ve görüntülerden oluşan sürüklenebilir bir ızgara. Izgara, fare kullanılarak sürüklenebilir (herhangi bir fare düğmesine basın ve istediğiniz yönde sürükleyin). Küçük resme tıkladığınızda ana resim ekranın tam genişliğine genişler. Metin içeren koyu renkli bir bloğa tıkladığınızda daha ayrıntılı açıklamanın bulunduğu bir alan açılır.

6. Tek sayfalık portföy web sitesi

Animasyonlu içerik değişikliklerine sahip tek sayfalık web sitesi. Efekti görmek için demo sayfasında menü sekmelerinde gezinin.

7. Blok görüntüleme tipini jQuery olarak değiştirmek

Bu jQuery "Ekran Seçeneklerini Değiştir" eklentisini kullanarak, sayfada ziyaretçinin tablo şeklinde bilgi gösteriminden blokların açıklamasını içeren tam görünüme geçeceği bir geçiş uygulayabilirsiniz. Portföy uygulaması için mükemmeldir.

8. jQuery galerisi ve Google haritası içeren bir restoran web sitesi şablonu

Bir kafe web sitesi için oluşturulmuş orijinal bir jQuery çözümü. Şablon, menüdeki yemekleri görüntülemek için ilginç bir jQuery galerisi uygular. Galerideki görseller tarayıcı penceresinin boyutuna göre ölçeklendirilir. İlk olarak, galeride yemeklerin adı ve kısa açıklamasıyla birlikte küçük resimler görüntülenirken, tam boyutlu fotoğraf arka planda karartılmış olarak görünüyor. Okları veya fare tekerleğini kullanarak mevcut fotoğraflar arasında gezinin. Galeri modunda fareye tıklamak, açıklamaları olan küçük resimleri kaldıracak ve pencerenin tüm genişliğine yayılmış orijinal büyük resimleri görüntülemenize olanak tanıyacaktır. Galeriden site menüsüne dönmek için sağ üst köşedeki linke tıklayın. Şık jQuery galerisine ek olarak, Google'dan bir harita da şablona çok etkili bir şekilde entegre edilmiştir.

9. Plazma Duvar eklentisi

Fare kullanılarak sabit bir alan içinde ekran boyunca sürüklenebilen fotoğraflardan veya HTML bloklarından benzersiz "duvarlar" oluşturmak.

10. Bir daire içindeki elemanları görüntülemek için eklenti

Belirli bir çaptaki bir daire boyunca sayfadaki çeşitli öğeleri görüntüler.

11. Yer tutucu sayfası “Site geliştirilme aşamasındadır”

Sayfa, veritabanına kayıtlı ve sitenin açılışına ilişkin bildirimin gönderilebileceği bir e-posta adresi gönderme özelliğine sahiptir. Sayfa aynı zamanda jQuery eklentisi Nivo Slider v'i temel alan küçük bir slayt gösterisiyle de dekore edilmiştir. 2.3.

12. QuickFlip 2 eklentisi

Onun yardımıyla, bir bağlantıya tıkladığınızda kartvizitin dönmesi gibi ilginç bir etki yaratabilirsiniz.

13. JQuery tıklama haritası

Buradaki fikir, kullanıcı tıklamalarını izlemektir. Eklentiyi demo sayfasında çalışırken görmek için fareye tıklayın ve ardından “Analiz Et” düğmesine tıklayın. Ve fare ile tıkladığınız noktalar yarı saydam bir arka planda görüntülenecektir.

Güzel bir ekran klavyesinin uygulanması. Asla bilemezsin, bir şeye faydası olacak.

15. jQuery Yapışkan Notları

Not sayfalarının uygulanması. Metin düzenlenebilir ve notların kendisi silinebilir veya ekranda taşınabilir. Bir örnek görmek için demo sayfasındaki “Demo” sekmesine gidin.

16. jQuery derecelendirmesi 17. HoverAttribute

İlginç bağlantı tasarımı: Bir bağlantının üzerine geldiğinizde bağlantı noktası değişir. Havalı görünüyor.

18. Kayıt formu için jQuery Fancy captcha

Kayıt formu için captcha'nın uygulanması. Eklenti, sürükleyerek artan sırada ayarlanması gereken bir dizi sayıdır. Kaydın bir robot tarafından değil, gerçek bir kişi tarafından gerçekleştirildiğini doğrulamanın oldukça ilginç bir yolu.

Ekranın alt kısmında sayfayı yukarı veya aşağı doğru kaydırmak için kullanabileceğiniz düğmeler bulunmaktadır.

20. Çevirmen. jQuery eklentisi "jTextTranslate"

Eklenti, Google Dil API'sini kullanır ve metni Google tarafından sağlanan herhangi bir dile çevirebilir. Çeviri yapmak için paragrafın yanındaki simgeye tıklamanız ve açılır listeden çeviri yapmak istediğiniz dili seçmeniz gerekir.

21. Sayfada gezinme için jQuery eklentisi

Sayfada gezinme için kaydırma bağlantılarının mükemmel uygulanması. jQuery kullanılarak uygulandı.

22. jQuery eklentisi “Notlar”

Bu jQuery eklentisi, web sitenize "kağıt" notlar uygulamanıza olanak tanır.

23. jQuery eklentisi “Catch404” 24. jQuery eklentisi jBreadCrumb

Animasyonlu kırıntı gezinme zinciri oluşturmak için eklenti

25. “Reel” eklentisi 26. jQuery “Dans Pisti” eklentisi

Bir ürün sayfasını uygulamak için jQuery eklentisi. Bir ürün resmine tıkladığınızda açıklaması görünür.

27. jQuery eklentisi “3D etiket bulutu” 28. Hacimsel CSS düğmeleri 29. Animasyonlu yatay sayfa kaydırma

Dikey sayfa kaydırmanın jQuery etkisi. Tek sayfalık web sitelerini ve portföy web sitelerini uygulamak için mükemmeldir. Efekti görüntülemek için demo sayfasındaki menü öğesine tıklayın.

30. jQuery eklentisi “Derecelendirme Sistemi”

Bir şeyin değerlendirmesini uygulamak için jQuery etkisi. Dairelerin rengi ve altındaki metin, fare imlecinin hangisinin üzerine geldiğine bağlı olarak değişir.

31. jQuery Panel Sihri

Sitede gezinmeyi uygulayan bir eklenti. Bu durumda siteniz, aralarında ilginç bir jQuery efektiyle geçiş yapılan bir belge ızgarası olarak sunulur.

Küçük web siteleri ve web uygulamaları oluşturmak için bu eklentiyi kolaylıkla kullanabilirsiniz. Ayrıca portföy web sitelerinde de iyi görünecektir.

32. Mootools'ta yükleme göstergesi, “MoogressBar” eklentisi

Etkili yükleme göstergesi.

33. Mootools eklentisi “CwComplete”

Bir alanı doldururken eklenti, Ajax kullanarak doldurmaya yönelik olası seçenekleri önerecek, yalnızca alana girilmiş olan metni karşılayan seçenekleri filtreleyip gösterecektir.

34. jQuery ve CSS3 kullanarak harika ajax sohbeti

Bir sohbete başlamadan önce ziyaretçinin takma adını ve e-posta adresini girmesi gerekir. Sağdaki sütun sohbete kaç kişinin giriş yaptığını gösterir. Kullanılan teknolojiler: PHP, MySQL, jQuery, CSS.

35. “Proje önerin” sayfasının uygulanması

Ziyaretçiler yeni bir teklif ekleyebilir veya mevcut bir teklife oy verebilir. Hedef kitlesinin site hakkında ne düşündüğünü öğrenmek isteyenler için mükemmel bir çözüm. Bu sayfayı projenizin daha da geliştirilmesi için yeni fikirler toplamak için de kullanabilirsiniz. Kullanılan teknolojiler: PHP, MySQL, jQuery, CSS

36. PHP ve jQuery kullanarak oylama/anket uygulaması 37. Ajax “TinyEditor” kullanarak oylama

Sitedeki anketlerin doğru şekilde uygulanması. Kullanılan teknolojiler: JQuery, Ajax, PHP ve MySQL.

Bir web sitesinde oylamayı uygulamak için çok ilginç bir çözüm. Blokları yukarı aşağı sürükleyip fareyle görüntüleri yakalayarak bunları sayfada istediğiniz sırayla düzenleyebilirsiniz. Bloğu ne kadar yukarıda bırakırsanız o kadar iyi puan vermiş olursunuz ve buna göre blok en altta yer alıyorsa bu onu en az beğendiğiniz anlamına gelir. Blokları istediğiniz sıraya yerleştirdikten sonra oyların dikkate alınması için “Anketi gönder” butonuna basmalısınız. Sonuçlar sayfasında oylama sonuçları ve oy veren ziyaretçi sayısı görüntülenir. Kullanılan teknolojiler: CSS, PHP, MySQL, jQuery.

Girilen bilgilerin doğruluğunun doğrulandığı basit bir Ajax yorum sistemi. Yorumlar bir veritabanında saklanır. Kullanılarak uygulandı: PHP, MySQL, CSS, jQuery.

40. İndirilen dosya sayısının sayacı 41. PHP kullanılarak sayfaya ilişkin notlar

Kullanılan teknolojiler: PHP, jQuery, CSS.

Menü öğeleri arasında gezindiğinizde içerik, sayfa yeniden yüklenmeden yüklenir. Kullanılan teknolojiler: PHP, jQuery, CSS.

43. Google'ın teknolojisini kullanan jQuery site araması

Google AJAX Arama API'sini kullanarak site aramasının uygulanması. Ziyaretçiye hem sitenizde hem de internette arama yapma olanağı sağlayabilirsiniz. Bu durumda arama yalnızca site sayfalarına göre değil, görsellere ve multimedya dosyalarına göre de yapılabilir.

44. Bir resmin üzerine açıklama yerleştirmenin jQuery etkisi

Bir portföyün uygulanmasında kullanılabilecek çok ilginç bir etki. Bir resme tıkladığınızda yarı saydam bir arka planla kararır ve nelere dikkat etmeniz gerektiğini açıklayan bir başlık görünür.

45. jQuery Kullanarak Soru-Cevap Sayfası Uygulamak

Sitedeki SSS sayfasının jQuery uygulaması. Sayfanın üst kısmında bir soru listesi görüntülenir. Bir soruyu tıkladığınızda sayfa, seçtiğiniz soruya sorunsuz bir şekilde kayar ve etkin soru, cevabıyla birlikte farklı bir renkle vurgulanır. Aktif cevap alanında soru listesine geri dönmek için bir bağlantı da görünür.

46. ​​​​Ajax'ta web sitesi. İçerik, sayfayı yeniden yüklemeden yükleniyor 47. jQuery kullanarak arka plan ve metin renklerini değiştirme

Fareyi üzerine getirdiğinizde renk değişir. Renk değişimini rastgele yapabilirsiniz.

48. jQuery Kullanarak Site Rehberi

Bu ilginç eklentiyi kullanarak, ziyaretçiye sitenizi ilk kez ziyaret ediyorsa sitenizin ana işlevlerini tanıtabilirsiniz. Sayfa yüklendiğinde sağ üst köşede siteyi gezmenizi isteyen bir blok belirir. Bir ziyaretçi sitenizi ilk kez ziyaret ediyorsa, ana işlevlere alışmak için kısa bir rehberden yararlanabilir. Bu durumda sayfa karartılır ve her adımda gerekli bloklar işaretlenir. Ziyaretçi sitenizi daha önce ziyaret etmişse, site turu sunan pencereyi kapatması yeterlidir.

49. Joyride Kit web sitesinde sanal tur

Bu eklentiyi kullanarak ziyaretçiye sayfanın ana işlevlerini tanıtabilirsiniz. Bu, öğelerin sıralı bir açılır açıklaması şeklinde yapılır. Ziyaretçi, İleri butonuna tıklayarak tüm ipuçlarını görebilir veya çarpı işaretini kullanarak çevrimiçi turu kapatabilir (eğer bu sayfaya ilk kez gelmiyorsa).