Články
Implementace P-Gallery do webu
Nedávný článek představil P-Gallery jako hotový produkt, zde je návod, jak je možné ji využít ve stránce.
Jde vlastně o využití funkcí knihovny jQuery pro prezentace snímků, které jsou v textu na webu. První článek představil P-Gallery jako finální aplikaci, která je okamžitě použitelná. Proto doporučuji ji nejdříve vyzkoušet, a poté se vrhnout na složitější použití.
Z článku Jednoduchá P-Gallery si stáhněte celou galerii, která je v ZIPu. Po rozbalení umístěte složku jscript do kořenového adresáře a do vaší stránky vložte do části head cesty k javascriptovým souborům.
<!--jQuery-->
<script type="text/javascript" src="../jscript/jquery.js"></script>
<!--Gallery-->
<script type="text/javascript" src="../jscript/pgallery.js"></script>
Dalším krokem je použití kaskádových stylů. Zde máte dvě možnosti. Buď přidáte níže uvedený kód do vašeho souboru s CSS, nebo jej umístíte celý do části head. Já používám první přístup, ale ukázka obsahuje CSS přímo v záhlaví stránky, což poznáte ze zdrojového kódu. Na funkčnost nemá použitý způsob vliv, ale v případě Doctype XHTML by se měl připojovat externí soubor. Předpokládám, že formátování stránky neprobíhá zápisem do tagů (pokud ano, dál ani nemusíte číst), ale opravdu použitím CSS.
#closePic {background:transparent; opacity: 0.6; margin: 2px; position: absolute; top: 15%; left: 13%; width: auto; height: auto; z-index: 120; cursor: pointer; cursor: hand; padding-left: 36px; padding-top: 13px; font-size: 120%; color: #000; font-weight: bold;}
#spacePic {background:#fff; margin: 0 auto; position: absolute; top: 15%; left: 13%; width: auto; height: auto; z-index: 110; cursor: pointer; cursor: hand;}
#largePic {position: absolute; background: #999; width: auto; height: auto; z-index: 115; padding: 35px; border: 1px solid #333;}
Nyní stačí vkládat obrázky do vaší stránky tam, kde je náhled plánován. Po kliknutí se otevře nový box, který se zavře opětovným kliknutím na náhled nebo do obrázku.
<a href="../images/obrazek1.jpg"><img src="../images/obrazek1.jpg" alt="Obrázek" width="120" height="90" /></a>
A to je všechno, je to velmi jednoduché. Jak je vidět, metoda se dá úspěšně použít i při vkládání obrázků do souvislých textů.
>>>>>
12-06-2009