Deshihk ´s Blog ?

Jak na Highslide JS (2. díl)

Po pár nocích strávených s Highslide (samozřejmě ve vší počestnosti) jsem přišel na další možnosti tohoto scriptu a zde vám je přináším. Tento článek je pouhým pokračováním minulého článku ve kterém jsem vysvětlil vše podstatné, ale jestli budete mít nějaký dotaz, tak není problém se ozvat přes sekci kontakt a já vám poradím jestli budu vědět.

V minulém díle jsme si probrali tzv. Highslide with Galerry a dnes si popíšeme Highslide JS core, která má trochu jiné funkce a jiný javascriptový kód (názvy pro nás nejsou důležité, pro nás je důležité výsledek co to dělá). Také si povíme něco o odstranění odkazu na Highslide.com při otevření každé fotky .

Nejlepší bude před započetím úprav (například pro vypínací tlačítko které je zmíněno níže apod.) zkopírovat zdrojové obrázky ze složky Graphics, která se nachází v složce highslide a umístit ho do vaší složky images. Poté musíte upravit cesty k souborům ve vašem css nebo zkopírovat toto upravené css. Samozřejmě jestli jste do svého css předtím už kopírovali Highslide css kód, tak ho tímto “novým” přepište.

Možnost přidat k fotce popisek

Tuto funkci lze jednoduše zprovoznit umístěním do hlavičky vašeho zdrojového kódu script, který naleznete pod tímto textem a nahradíte jím stávajícího highslide kód z minulého článku (samozřejmě nahradíte ho pouze v případě jestliže jste ho tam kdy měli). Případně script můžete zkopírovat zde.

<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">
hs.registerOverlay({
overlayId: 'closebutton',
position: 'top right',
fade: 2 // fading the semi-transparent overlay looks bad in IE
});
hs.graphicsDir = 'images/';
hs.wrapperClassName = 'borderless';
</script>

A dále musíte pod zdrojový kód každé vaší fotky u které se bude zobrazovat váš popisek (jež lze stylovat pomocí úprav v css) vložit následující kód:

<div class="highslide-caption">
Zde napíšete svůj popisek
</div>

Přidání zavíracího buttonu k fotce

Zavírací tlačítko ke každé fotce přidáte pomocí kousku kódu, který se nachází pod tímto textem nebo zde do kódu vaší stránky nejlépe ke kódu Highslide pro lepší přehlednost (stačí do jedné stránky vložit pouze jednou). Výsledkem by mělo být zobrazení zavíracího tlačítka v pravém horním rohu každé zvětšení fotky.

<div id="closebutton" class="highslide-overlay closebutton" onclick="return hs.close(this)" title="Close"></div>

Odkaz vedoucí na Highslide.com

Při otevření každé fotky se v levém horním rohu nachází odkaz na hlavní stránku webu Highslide.com. Pokud vám tento odkaz vadí, můžete ho odstranit (je to legálně dovoleno, neporušujete tím žádné ustanovení) jednoduše pomocí vložení zvýrazněného kódu (který se nachází pod tímto textem) do kódu javascriptu do zdrojovém kódu vaší stránky (tento "přídavek" musíte vložit mezi tagy <script type="text/javascript"> a </script>

hs.showCredits = false;

Na konec musím zmínit že jsem aktualizoval a editoval minulý článek o Highslide JS.



Můj nový web najdete na OndřejMartinek.cz.

Spolupracuji na Pravopisně.cz - online diktáty tak, jak je neznáte.

Komentáře



Autor:

Email:

Nadpis:

Text:


Ano jsem člověk