Návštevníkom svojej www stránky prajete len to najlepšie. Poskytujete im kvalitný obsah, kvalitné informácie a materiály. Možno máte videá, s ktorými sa chcete podeliť. Dnešná doba, keď webdesign je minimalistický, účelový, moderný a vaša stránka nezaostáva, je dôležitý spôsob prezentácie médií, či už audia alebo videa. Dnes ponúkam tutoriál pre webdesignérov aj majiteľov webstránok, kde sa naučíme, ako skombinovať dva moderné a aktuálne najpoužívanejšie možnosti zobrazovania videa a modálneho obsahu - sú nimi jquery poháňané pluginy Fancybox a Flowplayer. 

Pozrite si demo

Tak poďme na to. Mal by to zvládnuť aj váš pes.

1. Pripravte si videá vo formáte FLV 

Nahrajte ich do koreňového adresára /videos

2. Pripravte si súbory pluginov Fancybox a Flowplayer

a nahrajte ich do adresárov /css a /js

• Fancybox - plugin pre jquery na zobrazovanie obrázkov, videí či externého obsahu z iných webstránok v modálnom okne
• Flowplayer - prehrávač na zobrazenie flash videí

3. Vložte zdrojové kódy do hlavičky svojej webstránky

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />

<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script>

4. Na svoje www stránke nájdite miesto, kde vložíte link k videu

A pridajte zázračné kódy...

<div style="width:665px; height:480px; display:none;" id="player1"></div>

<a id="play-flv-video1" href="#player1">KLIKNITE A POZRITE VIDEO</a>

<script>
$(document).ready(function() {
     $("a#play-flv-video1").fancybox({
         'scrolling': false,
         'titleShow': false,
         'padding'  : 0,
         'showCloseButton'  : true,  
         'onStart'  : function() {
             $("#player1").show();
             $f("player1",
                     "/js/flowplayer-3.2.7.swf",
                     "/videos/MOJE VIDEO.flv");
         },
         'onClosed'  : function() {
             $("#player1").hide();
             $f().unload();
         }
     });
 });
</script>

Ak vám to náhodou nefunguje, nezabudnite si skontrolovať CESTY k súborom - v tomto príklade sú (z koreňového adresára) súbory CSS uložené v css adresári, súbory JS a SWF v js adresári a videá v adresári videos. V prípade ďalších potiaží si pozrite zdrojový kód dema.