MNOU LEHCE UPRAVENÝ BALÍK ========================= https://is.muni.cz/auth/el/1433/test/s_zakazky/design/js/prettyphoto/prettyphoto.zip?info 1. nakopírovat, kam je libo, například do adresáře [pages] u zakázky 2. z adresáře [images] si vybrat barevnou variantu a zbylé smazat (chcete-li) - možnosti: dark_rounded, dark_square, light_rounded, light_square (více viz nastavení dole) 3. v adresáři [js] se nachází javascripty - jeden z nich "prettyPhoto_set.js" se v originálu nenachází - vytáhl jsem takto bokem veškeré nastavení, aby se mohly dělat úpravy globálně (úpravy: počeštění, prettyPhoto_set.js, přidání jquery aktuální knihovny) - ostatní JS neřešit a nechat tak, jak jsou
- co vložit? =================== - do halvičky mezi tagy ... vložíme následující 4 řádky (jeden CSS a tři JS): ---------- ---------- ---------- ---------- - adresy si upravte dle použití - jak použít? ==================== 1. samostatný obrázek --------------------- => k obrázku přidáme rel="prettyPhoto" 2. galerie ---------- => tomu, co chceme mít v galerii (nemusí být jen obrázková), přidáme navíc libovolné slovo do [], takže výsledný parametr je například: rel="prettyPhoto[libovolne_slovo]" 3. YouTube ---------- => nic oproti obrázku se nemění 4. QuickTime ------------ => oproti obrázku se jen navíc přidá do adresy videa ?width=480&height=260 => ?width=480&height=260 určuje, jak velké video v px se má zobrazit 5. iFrame --------- IS MUNI CZ => do adresy na iframe obsah přidáme ?iframe=true&width=100%&height=100% nebo ?iframe=true&width=500&height=250, pak samozřejmě i parametr rel="prettyPhoto" => ?iframe=true povoluje použití funkce iframe => &width=500&height=250 nebo &width=100%&height=100% udává, jak velké bude okno s iframe obsahem (zadáváme buď v px nebo procentech) 6. naše FLV video ----------------- odkaz na naše video => pomocí FlashVars za cestu k přehrávači nadefinujeme, jak má být přehrávač velký (šířka videa + 2px, výška videa + 30px) => poté za klip doplníme adresu na dané video a přidáme parametr autoplay (true/false) UPOZORNĚNÍ: => cesta přehrávače se počítá od umístění HTML stránky, do které je to zakomponováno; cesta videa se počítá od umístění videopřehrávače ZÁVĚR POUŽITÍ ============= - jak je vidět, tak užití je ve své podstatě stále stejné (rel="prettyPhoto") - odkazovat můžeme jak z obrázku, tak i z prostého textu NASTAVENÍ ========= - celé nastavení se dělá přes externí soubor "prettyPhoto_set.js", jehož obsah uvádím níže: ---------- ---------- $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({ /* toto je definice slova, kterým se prettyPhoto volá; pokud změním na jiný, tak ten samý musí byt i ve stránce u každého "rel" parametru */ /* výchozí: prettyPhoto */ animationSpeed: 'normal', /* určuje rychlost animace */ /* možnosti: fast/slow/normal */ padding: 40, /* nastavení vnitřního odsazení/okraje */ /* výchozí: 40*/ opacity: 0.85, /* průhlednost efektu je mezi 0 a 1 */ /* výchozí 0.85 */ showTitle: false, /* pokud chceme použít u obrázku zobrazení titulku, dáme "true", jinak dáme "false" */ /* možnosti: flase/true */ allowresize: true, /* užitečné nechat na "true"; obrázek se nebude zvětšovat na malém monitoru více, něž je schopen malý monitor zobrazit; jinak */ /* možnosti: false/true */ counter_separator_label: '/', /* pokud používáme glaerie, tak zde můžeme nadefinovat slovo, co bude mezi pořadím v galerii, např. 1 z 5 */ theme: 'light_rounded', /* změna vzhledu efektu */ /* možnosti: light_rounded/dark_rounded/light_square/dark_square */ hideflash: false, /* pokud máme ve stránce např. animaci ve flashi, tak by nám při použití prettyPhoto zůstala v popředí */ /* možnosti: false/true (neskryje/skryje flash) */ modal: false, /* zavírání okna se dá dělat pomocí kliknutí bokem, nebo pomocí tlačítka "Zavřít" - ESC a podobně teď neřeším */ /* možnosti: false/true (zavřu čímkoliv/zavřu jen pomocí tlačítka "zavřít") */ changepicturecallback: function(){}, /* neměnit, a nic se nepokazí ;) */ /* Called everytime an item is shown/changed */ callback: function(){} /* Called when prettyPhoto is closed */ }); }); ---------- ---------- ORIGINÁLNÍ BALÍK ================ 1. smazat adresář [.git], je nanic 2. smazat v adresáři [css] layout.css 3. smazat v adresáři [images] adresáře [backgrounds], [fullscreen], [thumbnails] 4. do adresáře [js] doplnit jquery knihovnu z adresy: http://www.jquery.com/ 5. smazat "README" soubor a soubor "index.html" z rootu