galéria portfólia jquery. Plugin na vytváranie portfólia. Implementácia stránky „Navrhnúť projekt“.

od Dmitrija Semenova
je galéria obrázkov a posúvač obsahu jQuery. Je úplne citlivý, priateľský k dotyku a má modulárnu architektúru, ktorá vám umožňuje zahrnúť iba funkcie, ktoré potrebujete na optimalizáciu veľkosti súboru a výkonu.

od Andyho – The Coffeescripter
Vysoko prispôsobiteľný doplnok galérie/výstavy pre jQuery.

od Trenta
Galleriffic je doplnok jQuery, ktorý poskytuje bohaté možnosti spätného odoslania, ktoré sú optimalizované na spracovanie veľkého množstva fotografií pri zachovaní šírky pásma.

Galéria Tonic - Galéria portfólia XML jQuery | 6 dolárov

od Aino
Galleria je rámec galérie obrázkov v jazyku JavaScript postavený na knižnici jQuery. Cieľom je zjednodušiť proces vytvárania profesionálnych galérií obrázkov pre web a mobilné zariadenia.

od CatchMyFame
Minule som hľadal jednoduchý spôsob, ako pomocou jQuery miznúť medzi súborom obrázkov na stránke. Ako kodér som sa teda rozhodol vytvoriť si vlastný plugin.

od Thomasa Kahna
Smooth Div Scroll je doplnok jQuery, ktorý posúva obsah vodorovne doľava alebo doprava. Okrem mnohých ďalších doplnkov na posúvanie, ktoré boli napísané pre jQuery, Smooth Div Scroll neobmedzuje posúvanie na jednotlivé kroky.

od Victora Zambrana – frwrd.net
Minishowcase je malá a jednoduchá php/javascriptová online fotogaléria, poháňaná technológiou AJAX, ktorá vám umožňuje jednoducho zobrazovať vaše obrázky online, bez zložitých databáz alebo kódovania, čo umožňuje mať funkčnú galériu za pár minút.

od Caspara Davida Friedricha
EOGallery je webová animovaná galéria prezentácií vytvorená pomocou jQuery. Na zobrazenie väčších obrázkov používa iba základné funkcie jQuery a Thickbox Cody Lindley.

od Arnaulta Pachota
Viacformátový kolotoč pre jQuery, nenápadné a dostupné portfólio podporujúce viaceré médiá: fotografie, video (flv), zvuk (mp3). Tento doplnok pre jQuery automaticky zistí rozšírenie každého média a použije prispôsobený prehrávač.

The Wall – Galéria médií – poháňané jQuery | 5 dolárov

od Štefana Petreho
Ďalší doplnok galérie obrázkov s priestorovým efektom, veľmi ľahký a jednoduchý plugin.

od Morena Di Domenica
jmFullWall je doplnok jQuery na vytvorenie pôsobivého portfólia.

od Fabrizia Calderana
Mosaiqy je doplnok jQuery na prezeranie a približovanie fotografií fungujúci v prehliadačoch Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome a IE7+. Fotografie sa získavajú z dátovej štruktúry JSON/JSONP a náhodne sa presúvajú do mriežky. Všetky drahé animácie preberá váš GPU v najnovších prehliadačoch pomocou prechodov CSS3, čím sa minimalizuje réžia CPU.

od Codyho
Nasledujúci doplnok jQuery transformuje sadu obrázkov na malú galériu s niekoľkými možnosťami. Galéria mikro obrázkov umožňuje prepínať medzi zobrazením mriežky, ktorá zobrazuje náhľad obrázkov ako miniatúry, a jedným zobrazením zobrazujúcim iba jeden obrázok.

VION – plugin jQuery Image Gallery | 7 dolárov

od Malihu
Jednoduchá, ale elegantná galéria obrázkov na celú obrazovku vytvorená pomocou rámca jQuery a jednoduchého CSS.

Kompetentne zostavená a vizuálne navrhnutá, v našom prípade ide o samostatnú stránku, je dôležitým prvkom osobnej webovej stránky alebo blogu každého odborníka, ktorý vo svojej profesionálnej činnosti dosiahol určitú úroveň zručností.
Portfóliová stránka je druh správy alebo vizuálneho súhrnu, pomocou ktorého môžete čitateľom a návštevníkom svojho webu/blogu názorne ukázať súbor najúspešnejších dokončených prác, či už ide o fotografie, články, publikácie, dizajnové prvky. , atď.
Takúto stránku nemám a z mojej strany je to nepríjemné opomenutie, ktoré treba čo najskôr opraviť, na čom momentálne práve pracujem.
V rozsiahlych oblastiach globálnej siete nájdete obrovské množstvo hotových šablón stránok na usporiadanie portfólia a rozmanitosť takýchto stránok je skutočne pôsobivá. Takže tí, ktorí sa nechcú ponoriť do všetkých zložitostí webového dizajnu a vývoja, budú vždy schopní nájsť pre seba vhodnú možnosť. Pre tých, ktorým chýbajú znalosti v oblasti tvorby webových stránok, navrhujem pozrieť sa na príklad adaptívneho rozloženia, jednoduchej stránky portfólia, s filtrovaním dokončených prác podľa kategórie, vyrobených v roku , zriedených atraktívnym prechodovým efektom s animačnými prvkami.

Rozloženie stránky, spustiteľný javascript a niektoré dizajnové prvky vytvoril úžasný webový dizajnér a vývojár Kevin Liew (queness.com). Pri výbere optimálneho riešenia bola pre mňa dôležitá jednoduchá implementácia, funkčnosť pluginu jQuery, správna obsluha vo všetkých moderných prehliadačoch a vzhľadom na rastúcu obľubu používania rôznych mobilných zariadení na surfovanie po internete aj prispôsobivosť dizajn budúcej stránky. Žiadna fantázia, dizajnové zvončeky a píšťalky alebo ťažké pluginy.

Základné rozloženie pozostáva z dvoch hlavných prvkov používateľského rozhrania, ktoré musíme zostaviť, navigácie pomocou kariet na filtrovanie kategórií odoslaných prác a samotnej mriežky miniatúr s efektom vznášania, aby sa zobrazil titulok.
Na začiatok, aby všetko nakoniec fungovalo, budete potrebovať jQuery verzie 1.7.0 alebo vyššej. Ak ho ešte nemáte pripojený, pridajte pred značku nasledujúci riadok:

Spustite doplnok MixItUp, vložte tento kód za vyššie uvedené súbory:

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) ) . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , efekty: [ "fade" ] , uvoľnenie : "snap" , // volanie efektu vznášania sa naMixEnd: filterList. hoverEffect() ; ), , hoverEffect: function () ( $("#portfoliolist .portfolio" ) . hover( function () ( $(this) . find (".label" ) . stop() . animate(( dole: 0 ), 200 , "easeOutQuad" ) ; $(this) . find("img" ) . stop() . animate(( hore: - 30 ) , 500 , "easeOutQuad" ); ), , funkcia () ( $(this) . find(".label" ) . stop() . animate(( bottom: - 40 ), 200 , "easeInQuad" ) ; $( toto ) . find("img" ) . stop() . animate(( top: 0 ), 300 , "easeOutQuad" ) ; ) ) ; ) ); filterList. init() ; ) );

$(function () ( var filterList = ( init: function () ( $("#portfoliolist")).mixitup(( targetSelector: ".portfolio", filterSelector: ".filter", effects: ["fade"], easing : "snap", // volanie efektu vznášania naMixEnd: filterList.hoverEffect() )); ), hoverEffect: function () ( $("#portfoliolist .portfolio").hover(funkcia () ( $(toto). find(".label").stop().animate((dole: 0), 200, "easeOutQuad"); $(this).find("img").stop().animate((hore: -30 ), 500, "easeOutQuad"); ), funkcia () ( $(this).find(".label").stop().animate((dole: -40), 200, "easeInQuad"); $( this).find("img").stop().animate((top: 0), 300, "easeOutQuad"); )); ) ); filterList.init(); ));

Nemá zmysel zvažovať všetky možnosti doplnkov samostatne, predvolená možnosť je celkom optimálna. No, ak chce niekto experimentovať s parametrami, urobte všetko, čo je vo vašich silách.

Ak chcete vytvoriť rozloženie strany a vzhľad prvkov, pripojte k dokumentu niekoľko súborov. , jeden pre základné štýly, nazvime ho napríklad: layout.css a ďalší malý súbor CSS normalize.css, aby sa zabezpečila lepšia konzistencia prehliadača v štandardnom dizajne prvkov:

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

Teraz sa pozrime na všetko v poriadku, pokiaľ možno bez zbytočnej vody, prístupným a zrozumiteľným spôsobom, v našom rodnom, trpezlivom jazyku.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Všetky< li>< span class = "filter" data- filter= "app" >Aplikácie< li>< span class = "filter" data- filter= "card" >Vizitky< li>< span class = "filter" data- filter= "icon" >ikony< li>< span class = "filter" data- filter= "logo" >Logo< li>< span class = "filter" data- filter= "web" >vzhľad stránky

• Všetky
• Aplikácie
• Vizitky
• ikony
• Logo
• vzhľad stránky

Na navigačnom paneli umiestňujeme celý zoznam diel rozdelený do kategórií. Každú kategóriu portfólia musíme priradiť prostredníctvom atribútu data-cat k jednej alebo inej položke navigačného panela v súlade s hodnotou v atribúte data-filter. Porovnaním hodnôt data-filter s data-cat budú položky portfólia filtrované podľa kategórie.
Do miniatúry, zatiaľ skrytej, navyše pridáme malý panel s názvom diela a názvom kategórie, ktorý vyskočí až po prejdení myšou nad obrázok. A aby bolo jednoduchšie vytvoriť vzhľad celej tejto štruktúry v CSS, priraďme k prvkom zodpovedajúce triedy:

< 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" >Splodiť hosting. Ru< span class = "text-category" >Logo< div class = "label-bg" > .........

Hosting Beget.Ru Logo...........

Upozorňujeme, že môžete pridať odkazy na obrázok alebo priamo do podpisu, aby používateľ mohol úplne vidieť celú vašu prácu.

CSS

Teraz potichu prejdime k najzaujímavejšej časti, k formovaniu všeobecných štýlov používateľského rozhrania našej portfóliovej stránky a jej adaptívnej verzie v CSS. V článku uvediem len základné (predvolené) hodnoty, teda bez obrázkov na pozadí a pripojených fontov, to všetko si kto potrebuje môže pozrieť v deme, prípadne nájsť v archíve so zdrojovým kódom .

.container ( position : relativní ; width : 960px ; margin : 0 auto ; /* Reťaz prechodov budete môcť vidieť pri zmene veľkosti okna prehliadača */ -webkit-transition: all 1s easy; -moz-transition: all 1 s ľahkosť; -o -prechod: všetky 1 s ľahkosť; prechod : všetky 1 s ľahkosť; ) #filtre ( okraj : 1 % ; výplň : 0 ; štýl zoznamu : žiadny ; ) #filtre li ( plávajúce : vľavo; ) #filtre li span ( display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* pridať malý tieň pre text */ text-shadow : 1px 1px #FFFFFF ; kurzor : ukazovateľ ; ) /* zmeniť pozadie kategórie pri umiestnení kurzora myši */ # filters li span: hover ( background : #34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) /* pozadie položky aktívnej kategórie */ #filters li span. aktívne ( pozadie : rgb (62 , 151 , 221 ); tieň textu : 0 0 2px #004B7D ; farba : #fff ; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; šírka: 23 %; marža: 1 %; displej: žiadny; plavák: vľavo; prepad: skrytý; ) .portfolio-wrapper ( pretečenie : skryté ; pozícia : relatívne ! dôležité ; pozadie : #666 ; kurzor : ukazovateľ ; ) .portfolio img ( max-width : 100 % ; pozícia : relatívna ; ) /* podpisy sú predvolene skryté * / .portfolio .label ( position : absolute ; width : 100 % ; height : 40px ; bottom : -40px ; ) .portfolio .label-bg ( background : rgb (62 , 151 , 221 ) ; width : 100 % ; height 100 % ; pozícia : absolútna ; hore : 0 ; vľavo : 0 ; ) .portfolio .label-text ( farba : #fff ; pozícia : relatívna ; z-index : 500 ; padding : 5px 8px ; ) .portfolio .text-category (zobrazenie: blok; veľkosť písma: 9px;)

Kontajner ( poloha: relatívna; šírka: 960px; okraj: 0 auto; /* Pri zmene veľkosti okna prehliadača budete môcť vidieť reťazec prechodov */ -webkit-transition: všetky 1s ľahko; -moz-prechod: všetky 1s jednoduchosť; -o- prechod: jednoduchosť všetkých 1 s; prechod: jednoduchosť všetkých 1; ) #filtre ( margin:1%; padding:0; list-style:none; ) #filters li (floating:left; ) #filters li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* pridať trochu tieňa pre text */ text-shadow: 1px 1px #FFFFFF; kurzor: pointer; ) /* zmeniť pozadie kategórie pri umiestnení kurzora myši */ #filters li span:hover ( background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* pozadie položky aktívnej kategórie */ #filters li span.active ( pozadie: 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-sizing: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; ) .portfolio-wrapper ( overflow:hidden; poloha: relatívna !dôležitá; pozadie: #666; kurzor:ukazatel; ) .portfolio img ( max-width:100%; position: relatívne; ) /* podpisy sú predvolene skryté */ .portfolio .label (position: absolute; width: 100%; height:40px; bottom:-40px; ) portfólio .label-bg ( pozadie: rgb(62, 151, 221); šírka: 100 %; výška: 100 %; pozícia: absolútna; hore: 0; vľavo: 0; ) .portfolio .label-text ( farba: # fff; position: relativní; z-index:500; padding:5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )

V druhej časti, priamo v tej istej šablóne štýlov, pomocou niekoľkých mediálnych dopytov vytvoríme alternatívne sekcie CSS. Aby sa naše rozloženie stránky zobrazovalo správne na obrazovkách rôznych mobilných zariadení, pridáme do týchto sekcií aj alternatívne pravidlá CSS pre rôzne obrazovky. Môžeme teda jednoducho prepísať akékoľvek pravidlá, ktoré boli predtým nastavené v našej tabuľke CSS pre bežné prehliadače, a dosiahnuť tak veľmi požadovanú prispôsobivosť.

/* Tablet */ @media only obrazovka a (min-width: 768px ) a (max-width : 959px ) ( .container ( width : 768px ; ) ) /* Mobile - Note: Design for 320px width*/ @media only screen and (max-width : 767px ) ( .container ( width : 95 % ; ) #portfoliolist .portfolio ( width : 48 % ; margin : 1 % ; ) ) /* Mobile – Note: Design for 480px width */ @media iba obrazovka a (min-width: 480px) a (max-width: 767px) (.container (width: 70%;))

/* Tablet */ @media only obrazovka a (min-width: 768px) a (max-width: 959px) ( .container ( width: 768px; ) ) /* Mobile – Poznámka: Dizajn pre šírku 320px*/ @media only obrazovka a (max-width: 767px) ( .container (šírka: 95%; ) #portfoliolist .portfolio (šírka:48%; okraj:1%; ) ) /* Mobil - Poznámka: Dizajn pre šírku 480px */ @media iba obrazovka a (min-width: 480px) a (max-width: 767px) ( .container ( width: 70%; ) )

To je všetko. Naša nádherná stránka pod veľkorysým názvom „Portfólio“ je hotová, ostáva už len naplniť ju vašimi rovnako úžasnými a výnimočnými dielami a vystaviť ju celému svetu. Stále môžete byť ticho, skromne, hrdí na seba. Hlavnou vecou nie je preháňať to v tejto veci.
Pozrite si príklad ešte raz a ak je to potrebné, vezmite si zdrojový kód, vo voľnom čase, v tichom domácom prostredí, môžete toto dielo doviesť k dokonalosti.

Pri tvorbe lekcie bol použitý nasledujúci materiál: . Nachádza sa tam originálna, nedotknutá, čerstvá stránka z autorského pera.

Veľa šťastia všetkým a užite si zvyšok krátkeho leta!

1. Implementácia portfólia pomocou jQuery gallery

Miniatúry projektu sa posúvajú, keď pohybujete kurzorom myši v ľavom stĺpci. Oblasť obsahu zobrazuje väčší obrázok s názvom projektu, popisom a zoznamom použitých technológií. Keď sa pohybujete medzi miniatúrami, informácie o projekte sa navzájom menia s úžasným animovaným efektom. Keď kliknete na obrázok na stránke s popisom, zväčší sa pomocou animácie jQuery. Chcel by som tiež poznamenať ohromujúci elegantný vzhľad celej stránky portfólia. Pozrite si ukážku.

2. Super implementácia portfóliovej stránky pomocou CSS a jQuery

Vynikajúca implementácia webovej stránky portfólia fotografa. Keď kliknete na položku ponuky, oblasť s obsahom s pevnou výškou a šírkou sa poskladá zo štvorcov roztrúsených po obrazovke. Aby sa do pevnej oblasti zmestilo viac informácií, obsah je možné posúvať. Nezvyčajná je implementácia zobrazovania diel z portfólia: po kliknutí na miniatúru sa fotografia zobrazí ako obrázok na pozadí, ktorý sa automaticky zmení pri zmene veľkosti okna prehliadača.

3. Portfóliová stena s jQuery

Originálne riešenie pre tvorbu online portfólia. Bloky projektu (miniatúry a krátky popis s odkazom) sa zobrazujú niekoľko za sebou, pri zmene okna prehliadača sa bloky na stránke prerozdelia rovnomerne s animovaným efektom. Každý projekt môže mať niekoľko miniatúr, medzi ktorými sa prechádza pomocou šípok. Kliknutím na odkaz sa otvorí stránka s úplným popisom, na ktorej je text umiestnený na polopriehľadnom bloku pevnej výšky s rolovaním. Ako pozadie stránky sa používa škálovateľný obrázok projektu. Vyzerá skvele - pozrite si ukážku.

4. Plynulé posúvanie stránky jQuery

Implementácia vertikálneho a horizontálneho rolovania.

5. Doplnok jQuery „Preťahovateľná mriežka obrázkových polí“

Preťahovateľná mriežka pozostávajúca z blokov obsahu a obrázkov. Mriežku je možné ťahať pomocou myši (stlačte ľubovoľné tlačidlo myši a ťahajte v požadovanom smere). Keď kliknete na miniatúru, hlavný obrázok sa roztiahne na celú šírku obrazovky. Po kliknutí na tmavý blok s textom sa otvorí oblasť s podrobnejším popisom.

6. Jednostránková stránka portfólia

Jednostránkový web s animovanými zmenami obsahu. Na ukážkovej stránke prechádzajte kartami ponuky, aby ste videli efekt.

7. Prepnutie typu zobrazenia bloku na jQuery

Pomocou tohto pluginu jQuery „Switch Display Options“ môžete na stránke implementovať prepínač, pomocou ktorého sa návštevník prepne z tabuľkového zobrazenia informácií na úplné zobrazenie s popisom blokov. Ideálne pre implementáciu portfólia.

8. Šablóna pre webovú stránku reštaurácie s galériou jQuery a mapou Google

Originálne riešenie jQuery vytvorené pre webovú stránku kaviarne. Šablóna implementuje zaujímavú galériu jQuery na zobrazenie jedál z jedálneho lístka. Obrázky v galérii sú zmenšené v závislosti od veľkosti okna prehliadača. Najprv sa v galérii zobrazia miniatúrne obrázky s názvom a stručným popisom jedál, zatiaľ čo fotografia v plnej veľkosti sa zobrazí stmavená na pozadí. Prechádzajte medzi dostupnými fotografiami pomocou šípok alebo kolieska myši. Kliknutím myšou v režime galérie sa odstránia miniatúry s popismi a umožní vám zobraziť pôvodné veľké obrázky natiahnuté po celej šírke okna. Ak sa chcete vrátiť do ponuky stránok z galérie, kliknite na odkaz v pravom hornom rohu. Okrem elegantnej galérie jQuery je do šablóny veľmi efektívne integrovaná mapa od Google.

9. Plugin Plasm The Wall

Vytváranie jedinečných „stenov“ z fotografií alebo blokov HTML, ktoré je možné presúvať po obrazovke v rámci pevnej oblasti pomocou myši.

10. Plugin pre zobrazenie prvkov v kruhu

Zobrazuje rôzne prvky na stránke pozdĺž kruhu daného priemeru.

11. Zástupná stránka „Stránka vo vývoji“

Stránka má možnosť odoslať e-mailovú adresu, ktorá je zaznamenaná v databáze a na ktorú je možné zaslať upozornenie o otvorení stránky. Stránku zdobí aj malá slideshow založená na doplnku jQuery Nivo Slider v. 2.3.

12. QuickFlip 2 plugin

S jeho pomocou vytvoríte zaujímavý efekt otáčania sa vizitky po kliknutí na odkaz.

13. Klikacia mapa JQuery

Cieľom je sledovať kliknutia používateľov. Ak chcete vidieť plugin v akcii na stránke ukážky, kliknite myšou a potom kliknite na tlačidlo „Analyzovať“. A body, na ktoré ste klikli myšou, sa zobrazia na priesvitnom pozadí.

Implementácia peknej klávesnice na obrazovke. Nikdy nevieš, na niečo sa ti to bude hodiť.

15. Sticky Notes jQuery

Implementácia hárkov poznámok. Text je možné upravovať a samotné poznámky je možné mazať alebo presúvať po obrazovke. Ak chcete vidieť príklad, prejdite na kartu „Ukážka“ na stránke ukážky.

16. Hodnotenie jQuery 17. HoverAttribute

Zaujímavý dizajn odkazu: keď umiestnite kurzor myši na odkaz, jeho kotva sa zmení. Vyzerá v pohode.

18. jQuery Efektné captcha pre registračný formulár

Implementácia captcha pre registračný formulár. Doplnok je sada čísel, ktoré je potrebné nastaviť vo vzostupnom poradí ich pretiahnutím. Celkom zaujímavý spôsob, ako potvrdiť, že registráciu vykonáva skutočná osoba a nie robot.

V spodnej časti obrazovky sa nachádzajú tlačidlá, pomocou ktorých môžete plynulo posúvať stránku nahor alebo nadol.

20. Prekladateľ. plugin jQuery "jTextTranslate"

Doplnok používa rozhranie Google Language API a dokáže preložiť text do ľubovoľných jazykov poskytovaných spoločnosťou Google. Ak chcete preložiť, musíte kliknúť na ikonu vedľa odseku a z rozbaľovacieho zoznamu vybrať jazyk, do ktorého chcete preložiť.

21. jQuery plugin pre navigáciu po stránke

Vynikajúca implementácia rolovacích odkazov na navigáciu po stránke. Implementované pomocou jQuery.

22. Doplnok jQuery „Poznámky“

Tento doplnok jQuery vám umožní implementovať „papierové“ poznámky na váš web.

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

Plugin na vytváranie animovaného navigačného reťazca v strúhanke

25. Plugin “Reel” 26. Plugin jQuery “Dance Floor”.

Plugin jQuery na implementáciu stránky produktu. Po kliknutí na obrázok produktu sa zobrazí jeho popis.

27. Plugin jQuery “3D label cloud” 28. Volumetrické CSS tlačidlá 29. Animované horizontálne rolovanie stránky

jQuery efekt vertikálneho rolovania stránky. Ideálne na implementáciu jednostránkových webových stránok a portfóliových webových stránok. Ak chcete zobraziť efekt, kliknite na položku ponuky na stránke ukážky.

30. Doplnok jQuery „Hodnotiaci systém“

jQuery efekt na implementáciu hodnotenia niečoho. Farba kruhov a textu pod nimi sa mení podľa toho, nad ktorým z nich sa pohybuje kurzor myši.

31. jQuery Panel Magic

Doplnok, ktorý implementuje navigáciu na stránke. V tomto prípade je vaša stránka prezentovaná ako mriežka dokumentov, medzi ktorými sa robí prechod so zaujímavým efektom jQuery.

Tento plugin môžete jednoducho použiť na vytváranie malých webových stránok a webových aplikácií. Na portfóliových weboch to tiež nebude vyzerať zle.

32. Indikátor načítania na Mootools, plugin „MoogressBar“.

Indikátor efektívneho zaťaženia.

33. Mootools plugin “CwComplete”

Plugin pri vypĺňaní poľa navrhne možné možnosti vyplnenia pomocou Ajaxu, pričom vyfiltruje a zobrazí len tie možnosti, ktoré vyhovujú už zadanému textu v poli.

34. Skvelý ajax chat pomocou jQuery a CSS3

Pred začatím konverzácie musí návštevník zadať svoju prezývku a e-mail. Pravý stĺpec zobrazuje, koľko ľudí je prihlásených do chatu. Použité technológie: PHP, MySQL, jQuery, CSS.

35. Implementácia stránky „Navrhnúť projekt“.

Návštevníci môžu pridať nový návrh alebo hlasovať za existujúci návrh. Vynikajúce riešenie pre tých, ktorí chcú zistiť, čo si o stránke myslí ich publikum. Túto stránku môžete použiť aj na zhromažďovanie nových nápadov pre ďalší rozvoj vášho projektu. Použité technológie: PHP, MySQL, jQuery, CSS

36. Implementácia hlasovania/ankety pomocou PHP a jQuery 37. Hlasovanie pomocou Ajaxu “TinyEditor”

Presná realizácia prieskumov na mieste. Použité technológie: JQuery, Ajax, PHP a MySQL.

Veľmi zaujímavé riešenie implementácie hlasovania na webe. Potiahnutím blokov nahor a nadol a uchopením obrázkov myšou ich môžete usporiadať na stránke v ľubovoľnom poradí. Čím vyššie necháte blok, tým lepšie ho ohodnotíte, a teda, ak je blok umiestnený úplne dole, znamená to, že sa vám páčil najmenej. Po umiestnení blokov v požadovanom poradí musíte kliknúť na tlačidlo „Odoslať anketu“, aby sa hlas zohľadnil. Stránka s výsledkami zobrazuje výsledky hlasovania a počet návštevníkov, ktorí hlasovali. Použité technológie: CSS, PHP, MySQL, jQuery.

Jednoduchý pripomienkovací systém Ajax s overením správnosti zadaných informácií. Komentáre sú uložené v databáze. Implementované pomocou: PHP, MySQL, CSS, jQuery.

40. Počítadlo počtu stiahnutí súborov 41. Poznámky na stránke pomocou PHP

Použité technológie: PHP, jQuery, CSS.

Pri prechádzaní cez položky ponuky sa obsah načíta bez opätovného načítania stránky. Použité technológie: PHP, jQuery, CSS.

43. Vyhľadávanie stránok jQuery pomocou technológie od Google

Implementácia vyhľadávania na stránkach pomocou Google AJAX Search API. Návštevníkovi môžete poskytnúť možnosť vyhľadávať na svojej stránke aj na internete. V tomto prípade je možné vyhľadávanie vykonávať nielen podľa stránok lokality, ale aj podľa obrázkov a multimediálnych súborov.

44. Efekt jQuery prekrytia popisu na obrázku

Veľmi zaujímavý efekt, ktorý sa dá využiť pri implementácii portfólia. Keď kliknete na obrázok, stmavne s priesvitným pozadím a zobrazí sa popis, na čo by ste si mali dať pozor.

45. Implementácia stránky otázok a odpovedí pomocou jQuery

jQuery implementácia stránky FAQ na webe. V hornej časti stránky sa zobrazí zoznam otázok. Keď kliknete na otázku, stránka plynulo prejde na tú, ktorú ste vybrali, a aktívna otázka s odpoveďou sa zvýrazní inou farbou. V poli aktívnych odpovedí sa zobrazí aj odkaz na návrat do zoznamu otázok.

46. ​​Webová stránka na Ajaxe. Obsah sa načíta bez opätovného načítania stránky 47. Zmena farieb pozadia a textu pomocou jQuery

Keď naň prejdete myšou, farba sa zmení. Farbu môžete zmeniť náhodne.

48. Sprievodca stránkami pomocou jQuery

Pomocou tohto zaujímavého pluginu môžete návštevníka zoznámiť s hlavnými funkciami vašej stránky, ak ju navštívi prvýkrát. Po načítaní stránky sa v pravom hornom rohu zobrazí blok s výzvou na prehliadku lokality. Ak návštevník navštívi vašu stránku prvýkrát, môže sa pomocou krátkeho sprievodcu oboznámiť s hlavnými funkciami. V tomto prípade sa stránka stmaví a označia sa potrebné bloky v každom kroku. Ak návštevník už bol na vašej stránke, môže jednoducho zavrieť okno s prehliadkou stránky.

49. Virtuálna prehliadka webovej stránky Joyride Kit

Pomocou tohto pluginu môžete návštevníka zoznámiť s hlavnou funkcionalitou stránky. Robí sa to vo forme sekvenčného pop-up popisu prvkov. Návštevník si môže pozrieť všetky tipy kliknutím na tlačidlo Ďalej alebo zavrieť online prehliadku (ak na túto stránku neprišiel prvýkrát) pomocou krížika.