1. Vynikající jQuery Slideshow
Velká, velkolepá prezentace využívající technologie jQuery.
2. plugin jQuery „Scale Carousel“
Škálovatelná prezentace pomocí jQuery. Můžete nastavit velikosti prezentace, které vám nejlépe vyhovují.
3. plugin jQuery „slideJS“
Posuvník obrázku s textovým popisem.
4. Plugin „JSliderNews“
5. Posuvník CSS3 jQuery
Když najedete na navigační šipky, zobrazí se kruhová miniatura dalšího snímku.
6. Pěkný posuvník „Presentation Cycle“ jQuery
Posuvník jQuery s indikátorem načítání obrázku. K dispozici je automatická výměna sklíčka.
7. Plugin jQuery „Parallax Slider“
Posuvník s objemovým efektem pozadí. Vrcholem tohoto posuvníku je pohyb pozadí, které se skládá z několika vrstev, z nichž každá se posouvá jinou rychlostí. Výsledkem je imitace objemového efektu. Vypadá to moc krásně, můžete se sami přesvědčit. Efekt se zobrazuje plynuleji v prohlížečích, jako je Opera, Google Chrome,TJ.
8. Svěží, lehký posuvník jQuery „bxSlider 3.0“
Na ukázkové stránce v sekci „příklady“ naleznete odkazy na všechna možná použití tohoto pluginu.
9. Posuvník obrázků jQuery, plugin „slideJS“.
Stylový posuvník jQuery může jistě ozdobit váš projekt.
10. jQuery slideshow plugin “Easy Slides” v1.1
Snadno pomocí JQuery plugin pro vytváření prezentací.
11. Plugin jQuery Slidy
Snadný plugin jQuery v různých provedeních. K dispozici je automatická výměna sklíčka.
12. Galerie CSS jQuery s automatickým přepínáním snímků
Pokud návštěvník do určité doby neklikne na šipky „Vpřed“ nebo „Zpět“, galerie se začne automaticky posouvat.
13. Posuvník jQuery „Nivo Slider“
Velmi profesionální, vysoce kvalitní, lehký plugin s platným kódem. K dispozici je mnoho různých přechodových efektů snímků.
14. Posuvník jQuery „MobilySlider“
Čerstvý posuvník. Posuvník jQuery s různými efekty změny obrazu.
15. Plugin jQuery „Slider²“
Lehký slider s automatickým měničem diapozitivů.
16. Čerstvý javascriptový posuvník
Posuvník s automatickou změnou obrazu.
Plugin pro implementaci prezentací s automatickou výměnou snímků. Displej je možné ovládat pomocí náhledů obrázků.
Posuvník obrázků jQuery CSS pomocí pluginu NivoSlider.
19. Posuvník jQuery „jShowOff“
Plugin pro rotaci obsahu. Tři možnosti použití: bez navigace (s automatickou změnou formátu prezentace), s navigací ve formě tlačítek, s navigací ve formě náhledů obrázků.
20. Plugin “Shutter Effect Portfolio”.
Čerstvý plugin jQuery pro navrhování portfolia fotografa. Galerie má zajímavý efekt měnících se obrázků. Fotografie na sebe navazují s efektem podobným činnosti závěrky objektivu.
21. Lehký javascriptový posuvník CSS „TinySlider 2“
Implementace image slideru pomocí javascriptu a CSS.
22. Úžasný posuvník „Tinycircleslider“
Stylový kulatý posuvník. Přechod mezi obrázky se provádí tažením posuvníku ve tvaru červeného kruhu po obvodu. Dokonale zapadne do vašeho webu, pokud ve svém designu použijete oblé prvky.
23. Obrazový posuvník s jQuery
Lehký posuvník „Slider Kit“. Posuvník je k dispozici v různých provedeních: vertikální a horizontální. Jsou také implementovány různé typy navigace mezi obrázky: pomocí tlačítek „Vpřed“ a „Zpět“, pomocí kolečka myši, pomocí kliknutí myší na snímek.
24. Galerie s miniaturami „Slider Kit“
Galerie "Slider Kit". Posouvání náhledů se provádí svisle i vodorovně. Přechod mezi obrázky se provádí pomocí: kolečka myši, kliknutí myší nebo najetí kurzorem na náhled.
25. Posuvník obsahu jQuery „Slider Kit“
Vertikální a horizontální posuvník obsahu pomocí jQuery.
26. Prezentace jQuery „Slider Kit“
Prezentace s automatickou výměnou snímků.
27. Lehký profesionální javascriptový posuvník CSS3
Úhledný posuvník jQuery a CSS3 vytvořený v roce 2011.
Prezentace jQuery s miniaturami.
29. Jednoduchá prezentace jQuery
Prezentace s navigačními tlačítky.
30. Úžasná prezentace jQuery „Skitter“.
Plugin jQuery Skitter pro vytváření úžasných prezentací. Plugin podporuje 22 (!) typů různých animačních efektů při změně obrázků. Může pracovat se dvěma možnostmi navigace snímků: pomocí čísel snímků a pomocí miniatur. Určitě se podívejte na demo, velmi kvalitní nález. Použité technologie: CSS, HTML, jQuery, PHP.
31. Prezentace „Nepříjemné“
Funkční prezentace. Snímky mohou být: jednoduché obrázky, obrázky s titulky, obrázky s popisky, videa. K navigaci můžete používat šipky, číselné odkazy a levé/pravé klávesy na klávesnici. Prezentace je k dispozici v několika verzích: s miniaturami a bez nich. Chcete-li zobrazit všechny možnosti, klikněte na odkazy Demo #1 - Demo #6 umístěné v horní části stránky s ukázkou.
Velmi originální design pro posuvník obrazu, připomínající ventilátor. Animovaný přechod mezi snímky. Navigace mezi snímky se provádí pomocí šipek. Nechybí ani automatický posun, který lze zapnout a vypnout pomocí tlačítka Play/Pause umístěného na horní straně.
Animovaný posuvník jQuery. Obrázky na pozadí automaticky měřítko při změně velikosti okna prohlížeče. U každého obrázku se objeví blok s popisem.
34. Posuvník „Flux Slider“ využívající jQuery a CSS3
Nový posuvník jQuery. Několik skvělých animovaných efektů při výměně snímků.
35. Plugin jQuery „jSwitch“
Animovaná galerie jQuery.
Jednoduchá prezentace jQuery s automatickým přepínáním snímků.
37. Nová verze pluginu “SlideDeck 1.2.2”
Profesionální posuvník obsahu. Existují možnosti s automatickou změnou snímku a také možnost pomocí kolečka myši se pohybovat mezi snímky.
38. Posuvník jQuery „Sudo Slider“
Lehký jezdec obrázků pomocí jQuery. Existuje mnoho možností implementace: horizontální a vertikální změna obrázků, s odkazy na číslo snímku a bez nich, s popisky obrázků a bez nich, různé efekty změny obrázků. K dispozici je funkce automatické výměny sklíčka. Odkazy na všechny příklady implementace naleznete na stránce demo.
39. Prezentace jQuery CSS3
Prezentace s náhledy podporuje režim automatické změny snímků.
40. Posuvník jQuery „Flux Slider“
Posuvník s mnoha efekty změny obrazu.
41. Jednoduchý posuvník jQuery
Stylový posuvník obrázků pomocí jQuery.
od Dmitrije Semenova
je jQuery galerie obrázků a plugin pro posuvník obsahu. Je zcela citlivý, dotykový a má modulární architekturu, která vám umožňuje zahrnout pouze funkce, které potřebujete k optimalizaci velikosti souboru a výkonu.
od Andyho – The Coffeescripter
Vysoce přizpůsobitelný plugin galerie/výstavy pro jQuery.
od Trenta
Galleriffic je zásuvný modul jQuery, který poskytuje bohaté možnosti bez zpětného odeslání optimalizované pro zpracování velkého množství fotografií při zachování šířky pásma.
Galerie Tonic - Galerie portfolia XML jQuery | 6 $
od Aino
Galleria je framework pro galerii obrázků JavaScript postavený na knihovně jQuery. Cílem je zjednodušit proces tvorby profesionálních obrazových galerií pro web a mobilní zařízení.
od CatchMyFame
Onehdy jsem hledal jednoduchý způsob, jak pomocí jQuery prolínat mezi sadou obrázků na stránce. Jako kodér jsem se tedy rozhodl vytvořit svůj vlastní plugin.
od Thomase Kahna
Smooth Div Scroll je plugin jQuery, který posouvá obsah vodorovně doleva nebo doprava. Kromě mnoha dalších pluginů pro rolování, které byly napsány pro jQuery, neomezuje Smooth Div Scroll rolování na jednotlivé kroky.
od Victora Zambrana – frwrd.net
Minishowcase je malý a jednoduchý php/javascript online fotografie galerie, poháněná technologií AJAX, která vám umožní snadno zobrazovat vaše obrázky online, bez složitých databází nebo kódování, což vám umožní mít galerii v provozu za pár minut.
od Caspara Davida Friedricha
EOGallery je webová animovaná galerie prezentací vytvořená pomocí jQuery. K zobrazení větších obrázků používá pouze základní funkce jQuery a Thickbox Cody Lindley.
od Arnaulta Pachota
Víceformátový karusel pro jQuery, nevtíravé a dostupné portfolio podporující více médií: fotografie, video (flv), zvuk (mp3). Tento plugin pro jQuery automaticky rozpozná rozšíření každého média a použije přizpůsobený přehrávač.
The Wall – Galerie médií – poháněno jQuery | 5 $
od Stefana Petreho
Další plugin galerie obrázků s prostorovým efektem, velmi lehký a jednoduchý plugin.
od Morena Di Domenica
jmFullWall je plugin jQuery pro vytvoření působivého portfolia.
od Fabrizia Calderana
Mosaiqy je plugin jQuery pro prohlížení a přibližování fotografií pracující na Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome a IE7+. Fotografie se načítají z datové struktury JSON/JSONP a náhodně se přesouvají do mřížky. Všechny drahé animace jsou převzaty vaším GPU v nejnovějších prohlížečích pomocí přechodů CSS3, čímž se minimalizuje režie CPU.
od Codyho
Následující plugin jQuery transformuje sadu obrázků do malé galerie s několika možnostmi. Galerie mikro obrázků umožňuje přepínat mezi mřížkovým zobrazením, které zobrazuje náhled obrázků jako miniatury, a jedním zobrazením zobrazujícím pouze jeden obrázek.
VION – plugin galerie obrázků jQuery | 7 $
od Malihu
Jednoduchá, ale elegantní galerie obrázků na celou obrazovku vytvořená pomocí rámce jQuery a jednoduchých CSS.
Čas se nezastaví a s ním i pokrok. To ovlivnilo i internet. Už vidíte, jak se to mění vzhled webové stránky, responzivní design je obzvláště oblíbený. A v tomto ohledu se objevilo docela dost novinek adaptivní jquery posuvníky, galerie, karusely nebo podobné pluginy.
1. Citlivý posuvník horizontálních sloupků
Adaptivní horizontální karusel s podrobným návodem k instalaci. Je vyrobena v jednoduchém stylu, ale můžete si ji upravit podle sebe.
2. Posuvník na Glide.js
Tento posuvník je vhodný pro jakýkoli web. Používá Glide.js s open source. Barvy posuvníku lze snadno změnit.
3. Prezentace s nakloněným obsahem
Responzivní posuvník obsahu. Vrcholem tohoto posuvníku je 3D efekt obrázků, stejně jako různé animace náhodného vzhledu.
4. Posuvník pomocí plátna HTML5
Velmi krásný a působivý posuvník s interaktivními částicemi. Byl vytvořen pomocí HTML5 canvas,
5. Posuvník Morphing Image
Posuvník s efektem morfování (hladká transformace z jednoho objektu na druhý). V tomto příkladu se posuvník dobře hodí pro portfolio webového vývojáře nebo webového studia ve formě portfolia.
6. Kruhový posuvník
Posuvník v podobě kruhu s efektem převrácení obrázku.
7. Posuvník s rozostřeným pozadím
Adaptivní posuvník s přepínáním a rozostřením pozadí.
8. Responzivní módní posuvník
Jednoduchý, lehký a responzivní posuvník webových stránek.
9. Slicebox - posuvník 3D obrazu jQuery(AKTUALIZOVÁNO)
Aktualizovaná verze posuvníku Slicebox s opravami a novými funkcemi.
10. Zdarma animovaná responzivní mřížka obrázků
Plugin JQuery pro vytvoření flexibilní mřížky obrázků, která bude přepínat záběry pomocí různých animací a časování. To může vypadat dobře jako pozadí nebo dekorativní prvek na webu, protože můžeme selektivně zobrazovat nové obrázky a jejich přechody. Plugin je k dispozici v několika verzích.
11.Posuvník Flex
Univerzální bezplatný plugin pro váš web. Tento plugin je k dispozici v několika možnostech posuvníku a karuselu.
12. Fotorámeček
Fotorama- Tento univerzální plugin. Má mnoho nastavení, vše funguje rychle a snadno a snímky si můžete prohlížet na celé obrazovce. Posuvník lze použít jak v pevné velikosti, tak adaptivní, s miniaturami nebo bez nich, s kruhovým posouváním nebo bez něj a mnohem více.
P.S.Posuvník jsem nainstaloval několikrát a myslím, že je jeden z nejlepších
13. Bezplatná a adaptivní galerie 3D posuvníků s náhledy.
Posuvník experimentální galerie 3DPanelLayout s mřížkou a zajímavými animačními efekty.
14. Posuvník na css3
Adaptivní posuvník je vytvořen pomocí css3 s hladkým vzhledem obsahu a světelnou animací.
15. Posuvník WOW
Posuvník WOW je posuvník obrázků s úžasnými vizuálními efekty.
17. Elastické
Elastický posuvník s plnou odezvou a miniaturami snímků.
18. Štěrbina
Toto je posuvník reagující na celou obrazovku využívající animaci css3. Posuvník se vyrábí ve dvou verzích. Animace je udělaná dost neobvykle a krásně.
19. Adaptivní fotogalerie plus
Jednoduchý bezplatný posuvník galerie s načítáním obrázků.
20. Responzivní posuvník pro WordPress
Adaptivní volný posuvník pro WP.
21. Posuvník obsahu paralaxy
Posuvník s efektem paralaxy a ovládáním každého prvku pomocí CSS3.
22. Posuvník s hudebním odkazem
Posuvník pomocí otevřít zdrojový kód JPlayer. Tento posuvník připomíná prezentaci s hudbou.
23. Posuvník s jmpress.js
Responzivní posuvník je založen na jmpress.js, a proto vám umožní přidat do snímků některé zajímavé 3D efekty.
24. Rychlá prezentace s přechodem
Prezentace s rychlým přepínáním snímků. Snímky se přepínají při vznášení.
25. Obrazový akordeon s CSS3
Obrázek akordeon pomocí css3.
26. Plugin Optimalizovaná galerie dotykem
Toto je responzivní galerie, která je optimalizována pro dotyková zařízení.
27. 3D galerie
Galerie 3D stěn- vytvořeno pro prohlížeč Safari, kde bude viditelný 3D efekt. Pokud se na to podíváte v jiném prohlížeči, funkce bude v pořádku, ale 3D efekt nebude viditelný.
28. Posuvník se stránkováním
Responzivní posuvník se stránkováním pomocí posuvníku uživatelského rozhraní JQuery. Cílem je použít jednoduchý navigační koncept. Je možné přetáčet všechny obrázky nebo přepínat snímek po snímku.
29. Montáž obrázků pomocí jQuery
Automaticky uspořádat obrázky v závislosti na šířce obrazovky. Velmi užitečná věc při vývoji portfoliového webu.
30. 3D galerie
Jednoduchý 3D kruhový posuvník využívající css3 a jQuery.
31. Režim celé obrazovky s 3D efektem pomocí css3 a jQuery
Posuvník s možností zobrazení obrázků na celé obrazovce s krásným přechodem.
Snad každý vývojář se setkal se zakázkou na vytvoření a uspořádání portfolia. Osobně mám takové zakázky moc rád, protože zákazník chce něco originálního, a to vyžaduje fantazii a kreativní zručnost. Nevím jak vy, ale já nechci vytvářet stejné šablony pro všechny zákazníky. Musíte udělat design, přátelé, takový, abyste se za něj nestyděli. Pokud totiž váš výtvor, in v tomto případě, například vaše portfolio zákazníka ohromí, pak vás pravděpodobně doporučí svým známým. A to vám jen prospěje.
PRAMENY
V tomto tutoriálu se podíváme na velmi zajímavý způsob, jak implementovat galerii náhledů pro portfolio. Tuto galerii lze bezesporu využít nejen pro portfolio, ale pro další kreativní projekty. Takže, pojďme začít.
Krok 1. HTML
Musíme vytvořit seznam ve formuláři neuspořádaný seznam, a vše zabalit do jediného prvku Div, tento obal bude sloužit k zobrazení mřížky miniatur obrázků, styly budou vytvořeny pomocí javascriptu, takže css bude docela jednoduché. V tomto tutoriálu používám úžasné obrázky z driblovat napsal Troy Cummings:
Budeme obsahovat atributy titulků pro obrázky, následující kód je výsledkem konstrukce vygenerovaného označení pomocí JavaScriptu:
Značení jsme, doufám, v malé míře vyřešili, pojďme k dalšímu kroku.
Krok 2: CSS
Naše obrázky se budou zobrazovat v mřížce, musíme nastavit obecné parametry pro konstrukci mřížky, přidat trochu průhledný rozsah černého pozadí, stíny, také nastavíme zobrazení na žádné.
#portfolio-item ( display: none; ) #portfolio ( margin: 2em 0 1em; transform-style: zachování-3d; ) #portfolio div ( display: inline-block; position: relativní; vertical-align: top; margin: 1em; šířka: 200px; výška: 150px; box-shadow: 0px 0px 25px rgba(0,0,0,.3); ) #portfolio div span ( text-align: left; position: absolute; color: #fff; pozadí: rgba(0,0,0,0,6); šířka: 90px; odsazení: 5px 15px 7px; z-index: 1; vlevo: -10px; dole: 10px; )
Musíme přidat třídu animace, která se použije při přesunu na jinou stránku. Obrázky budeme otáčet o 360 stupňů. vzhledem k osám X a Y.
Animované ( přechod: 0,9s zmírnění; ) .flipped-horizontal-right ( transformace: rotationY(360deg); ) .flipped-horizontal-left (transformace: rotationY(-360deg); ) .flipped-vertical-top ( transformace : otočeníX(360 stupňů); ) .flipped-vertical-bottombottom ( transformace: otočeníX(-360deg); )
Krok 3: JavaScript
Nejprve musíme definovat některé navigační proměnné:
navigation.on("click", function(e) ( e.preventDefault(); navigation.removeClass("selected"); $(this).addClass("selected"); page = $(this).attr(" datová stránka"); for(var i = 0; i<= indexedItemShow; i++) { random = Math.floor(Math.random() * (3 - 0 + 1)); animation = rotation; item = itemWrapper.children("div:eq(" + i + ")"); item.addClass("animated " + animation); } });
Když kliknete na položky, dojde k animaci a výběru obrázků:
window.setTimeout(function (index) ( return function () ( indexReal = (page == 1) ? index: (index + (page - 1)) ; itemHost = indexReal + (indexedItemShow * (page - 1)); itemImage = itemList.children("li:eq(" + itemHost + ")").children("img"); itemSrc = itemImage.attr("src"); itemAlt = itemImage.attr("alt"); itemCurrent = itemWrapper.children("div:eq(" + index + ")"); itemCurrent.css("pozadí", "url(" + itemSrc + ")"); itemCurrent.children("span").text(itemAlt (i), 500);
To je vše. Připraveno!
Materiál je převzat ze zahraničí a je uveden pouze pro informační účely.
Portfolio pluginy jQuery vám umožní zobrazit vaše portfolio v elegantním stylu a pomohou vám zapůsobit na vaše klienty, aby získali větší expozici a obchodní nabídky.
Pokud pracujete v sektoru poskytování služeb, nemůžete podceňovat sílu portfolia. Portfolia nejen zobrazují vaši práci, ale dávají vašemu klientovi představu o vašich pracovních zkušenostech, což má za následek více obchodů a obchodů.
Níže naleznete některé z nejlepších pluginů portfolia jQuery pro zobrazení vašich uměleckých děl online. Pokud víte o nějakém jiném pluginu, dejte nám prosím vědět, rádi bychom seznam aktualizovali.
1. Lunární
Lunar – Photography Portfolio, velmi čistý a jednoduchý jQuery Plugin, který vám pomůže vytvářet krásná fotoalba. Některé ze silných stránek pluginu jsou: plně citlivá mřížka, vysoký výkon, moderní vzhled a dojem, čistý a prostorný design.
2. Portfolio krychle
3. Portfolio mediálních boxů
Media Boxes Portfolio je doporučený plugin mřížky jQuery, který vám umožňuje zobrazovat všechny druhy obsahu ve vysoce výkonné mřížce. Použijte jej pro blogové příspěvky, zobrazovaná média, klienty, portfolia, nákupní košíky, galerie a vše, co si dokážete představit.
4. Kolonie
Myšlenka Colio – jQuery Portfolio Content Expander Plugin je zobrazit podrobnosti o položkách vašeho portfolia na stejné stránce ve formě rozšiřitelného výřezu, který se může zobrazit nad, pod nebo uvnitř mřížky vašeho portfolia. Colio obsahuje černobílé téma pro rychlý start a lze jej snadno integrovat do stávajícího portfolia. Je také kompatibilní s oblíbenými filtrovacími pluginy, jako je izotop a pohyblivý písek, a funguje na tabletech a mobilních zařízeních.
Demo & Download
5. ZoomFolio
DZS ZoomFolio je dokonalý plugin pro zobrazení vašeho kreativního portfolia vašim klientům a to není vše. Můžete jej použít k zobrazení posledních příspěvků z vašeho blogu nebo galerie z dovolené.
Demo & Download
6. Metro
Metro – jQuery Grid Portfolio, velmi čistý a jednoduchý jQuery Plugin, který zobrazuje vaše portfolio interaktivním způsobem. Některé ze silných stránek pluginu jsou: plně citlivá mřížka, snadné nastavení, vysoký výkon, moderní vzhled a dojem, čistý a prostorný design.
7. Portfoliové mřížky
Tato položka je dodávána s více než 40 super přizpůsobitelnými rozvrženími a 19 styly vznášení, ze kterých si můžete vybrat. Spousta možností připravených k použití velmi usnadňuje přidávání okrajů, pozadí, různých meta stylů a tak dále. Díky této funkcionalitě připravené k použití můžete snadno vytvářet všechny druhy portfolií nebo seznamů galerií.
Demo & Download
8. Bootfolio
bootFolio je nejlehčí skript pro filtrování portfolia s animací css3. je vysoce optimalizovaný pro bootstrap a velmi snadno se používá. Bootfolio přichází s 76+ rozvržením položek portfolia, 14 nahrazujícími animacemi, 167+ efekty při najetí na položky, lehkými, vysoce přizpůsobitelnými a mnohem více.
Demo & Download
9. Galerie Tonic
Tonic Gallery vám umožňuje velmi snadno vytvořit galerii portfolia s některými pěknými efekty a flexibilním nastavením přizpůsobení. Tento plugin obsahuje nepřeberné množství možností, jako je stránkování, filtr kategorií, správa dat, náhled lightboxu a flexibilní konfigurace.
10. Mini
11. Alfréd
Alfred pomáhá webovým vývojářům budovat ta nejlepší portfolia a nejkrásnější galerie. Dramaticky zjednodušuje celý proces a nabízí vám širokou škálu funkcí a možností.
12. Strom galerie portfolia jQuery
To znamená, že každá galerie může mít jednu nebo více podgalerií. Dokonale se hodí pro galerii portfolia. Je plně responzivní a také použitelný pro jiné účely, jako je navigace, galerie atd. Tento plugin má responzivní design, 5 rozložení, kompatibilní s prohlížečem, inspirovaný metrem a iOS7.