Prezentace na webové stránce. Základní struktura našeho posuvníku. plugin jQuery "jSwitch"
Plugin pro tvorbu nejkrásnější slidery- iView. Spousta nastavení, navigace, časovač, API, podpora dotyková zařízení, vkládání videa a přizpůsobivost.
04.03.2013 1 692
Plugin pro vytvoření mikrogalerie na webu. Automatické zobrazení, možnost přidat popis ke každému obrázku a režim kruhového rolování, tzn. smyčkování.
01.02.2013 1 153
Plugin jQuery.popeye je elegantní a krásné řešení pro zobrazení galerie obrázků bez opuštění stránky. Na stránce se zobrazí pouze jedna fotografie, můžete procházet nebo zvětšovat všechny obrázky tato sada. Plugin se snadno instaluje a konfiguruje a byl vyvinut jako alternativa k běžně používaným lightbox2, fancybox nebo colorbox, které používají modální okna.
23.11.2012 7 286
Skvělý responzivní jQuery posuvník - FlexSlider. Zahrnuje možnost navigace pomocí odrážek (teček), umožňuje spolu s navigací používat miniatury, možnost vložit video jako snímek, možnost karuselu a plugin má i malé API.
12.09.2012 4 667
Mobilyslider je jednoduchý plugin jQuery vážící pouhých 5 Kb, ale vypadá minimalisticky a stylově. Je tu pár další možnosti, včetně povolení/zakázaní navigace, šipky vpřed/vzad, automatické prezentace, výběru typu přechodu atd.
07.06.2012 1 403
Vytvořme celoobrazovkovou prezentaci, jejíž hlavní myšlenkou je oříznout aktuálně otevřený snímek při přechodu na další nebo předchozí. Pomocí jQuery a CSS animace, můžeme získat jedinečné přechody mezi snímky.
09.05.2012 778
Prezentace v jQuery s hudební doprovod pomocí multiplatformní knihovny jPlayer. Snímky se v hudební skladbě mění v určených intervalech.
04.05.2012 892
Rhinoslider je poměrně flexibilní plugin pro prezentaci jQuery. Nejen, že jsou k dispozici různé efekty, ale je také možné je přidávat vlastní styly, efekty a funkce na posuvník. Na oficiální stránka Plugin má pohodlný generátor efektů - generátor - jakmile si vyberete, můžete si okamžitě stáhnout vygenerovaný funkční příklad.
03.05.2012 2 061
Slideshow plugin založený na jQuery a easing plugin. Přidána možnost procházet snímky pomocí kolečka myši. Ukázkové stránky ukazují různé možnosti pomocí posuvné navigace.
12.04.2012 1 387
Pomocí jmpress, pojďme to udělat plugin jquery Pro vytvářet prezentace se zajímavými 3D efekty pro diapozitivy.
Pravděpodobně jste již slyšeli o novém prvku HTML5 plátno. Tento speciální prvek, který umožňuje vytvářet a upravovat grafiku. Navíc jej můžeme použít jako jakýkoli jiný prvek na stránce – aplikovat animace jQuery pro něj zpracovávat události a integrovat jej do šablony.
Typicky použití prvku plátno omezeno na hry a dema konceptů. V tuto lekci Využijeme to prakticky – uděláme slideshow se skvělým přechodovým efektem, který bude fungovat ve starších prohlížečích.
S pomocí JavaScriptu Udělejme speciální filtr pro každý obrázek v prezentaci. Budeme tvořit nová verze obrázky s vyšším kontrastem a další světlé barvy a uložte jej do prvku canvas.
Když chce uživatel přejít na další snímek, prvek plátno zobrazí na obrazovce pomocí animace fadeIn, vytváření hladký efekt přechod.
HTMLZačněme vytvořením značky HTML.
html5-slideshow.htmlPrezentace založená na prvku plátna HTML5 a jQuery | Ukázka pro webovou stránku webu
Uspořádání prezentací je velmi jednoduché. Hlavní prvek div#slideshow obsahuje neuspořádaný seznam a šipky na další a předchozí snímky. Neuspořádaný seznam obsahuje snímky, které jsou definovány jako prvky li. Výše uvedený obrázek ukazuje, že prvek plátno se zde vloží upravený obrázek.
Na konci je zahrnut jQuery a náš soubor script.js, o kterém bude řeč později v této lekci.
CSSVšechny styly prezentace jsou obsaženy v souboru styly.css. Jako definici jmenného prostoru používáme id hlavního prvku #slideshow, takže tyto styly můžete jednoduše přidat do svého projektu bez rizika konfliktů pojmenování.
styly.css#slideshow( background-color:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit -box-shadow:0 0 22px #111; box-shadow:0 0 22px #111 ) #slideshow ul( height:320px; left:10px; list-style:none outside none; overflow:hidden; position:absolute; top:10px; width:620px; ) #slideshow li( pozice:absolutní; display:none; z-index:10; ) #slideshow li:first-child( display:block; z-index:1000; ) #slideshow . slideActive( z-index:1000; ) #slideshow canvas( display:none; position:absolute; z-index:100; ) #slideshow .arrow( height:86px; width:60px; position:absolute; background:url(" img/arrows.png") bez opakování; nahoře:50%; margin-top:-43px; kurzor:ukazatel; z-index:5000; ) #slideshow .previous( background-position:left top;left:0; ) #slideshow .previous:hover( background-position:left bottom;) #slideshow .next( background-position:right top;right:0;) #slideshow .next:hover( background-position:right bottom;)
Naše návštěvníky, kteří budou s prezentací pracovat, můžeme rozdělit do tří skupin:
- Ti, kteří mají vypnutý JavaScript. Takoví uživatelé uvidí pouze první snímek a nebudou moci přepnout na další snímky.
- Ti, kteří mají povolený JavaScript, ale žádný prvek nepodporují plátno. U takových návštěvníků se snímky přepnou okamžitě bez přechodového efektu.
- Ti, kteří to mají povoleno podpora JavaScriptu a prvek je podporován plátno. Tato skupina používá nejnovější verze Firefox, Safari, Chrome, Opera. Uvidí slideshow v celé své kráse.
Pravidla jsou vypracována s ohledem na první dvě skupiny. Pomocí voliče první dítě Ve výchozím nastavení se zobrazí pouze první snímek.
Základní princip slideshow jsme již probrali. Nyní se podívejme na praktické provedení.
script.js – část 1$(window).load(function())( // Používáme událost window.load, takže jsme si jisti, že // prezentace obrázků načteno bez chyb. // Zkontrolujte, zda podporuje aktuální prohlížeč element canvas: var supportCanvas = "getContext" v document.createElement("canvas"); // Manipulovat s prvek plátna jsou náročné na CPU // proto používáme setTimeout, aby byly věci asynchronní a zlepšily //dobu odezvy stránky var slides = $("#slideshow li"), current = 0, slideshow = (width:0,height:0 ); setTimeout(function())( window.console && window.console.time && console.time("Generated in:"); if(supportCanvas)( $("#slideshow img").each(function())( if (! slideshow.width)( // Získání rozměrů prvního obrázku: slideshow.width = this.width; slideshow.height = this.height; ) // Výstup upravená verze obrazy createCanvasOverlay(this); )); ) window.console && window.console.timeEnd && console.timeEnd("Generováno v:"); $("#slideshow .arrow").click(function())( var li = slides.eq(current), canvas = li.find("canvas"), nextIndex = 0; // V závislosti na tom, která šipka byla stisknuta , // výpočet indexu dalšího snímku if($(this).hasClass("next"))( nextIndex = aktuální >= snímky.délka-1 ? 0: aktuální+1; ) else ( nextIndex = aktuální
