Instalace

Na této stránce se dozvíte, jak nasadit Ligon Reader do vašich stránek. Toto nasazení je velice jednoduché, ale doporučuji mít alespoň základní povědomí o věcech jako je HTML, jQuery, apod..

UPOZORNĚNÍ: Pro používání databáze Ligon na svých stránkách potřebujete souhlas jejího provozovatele, viz kontakt.

Nasazení

Pokud není součástí vašeho webu knihovna jQuery, přidejte do vaši stránek (mezi tagy <head> a </head>) následující kód pro její načtení:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Přidejte následující kód do vašich stránek, mezi tagy <head> a </head>. Dbejte na to, aby předchozí knihovna jQuery byla načtena jako první:

<script type="text/javascript" src="http://www.ligon.cz/reader/js/latest.js"></script>

Vytvořte odkazy, které budou mít parametr data-ligon-isbn, jehož hodnota bude platné ISBN 13 pro knihu, pro kterou chcete ukázky zobrazit:

<!-- Hodnotu 978-80-7462-539-8 vyměňte za ISBN 13 požadované knihy -->
<a href="#" data-ligon-isbn="978-80-7462-539-8" class="ligon-button">Prolistovat knihu</a>

Nasaďte Ligon na vytvořené odkazy pomocí jQuery:

<script type="text/javascript">
$(document).ready(function() {
   $('a[data-ligon-isbn]').ligon();
});
</script>

Pokud se kniha nachází v databázi Ligon, tak se zobrazí aktivní tlačítko:

Prolistovat knihu

Pokud kniha v databázi není, zůstává tlačítko neaktivní:

Prolistovat knihu

DŮLEŽITÉ: Ve výchozím nastavení je tlačítko šedivé a neaktivní. Až poté, co je kniha nalezena v databázi Ligon, se tlačítku automaticky přidá CSS třída active a napojí se na galerii náhledů. Tím se tlačítko stává fialovým a aktivním.

Přizpůsobení

Elementem pro tlačítko nemusí být tag A, ale jakýkoliv tag, který chcete, například BUTTON. Musíte k tomu samozřejmě upravit i selektor v jQuery:

<button data-ligon-isbn="978-80-7462-539-8">Ukázka</button>

<script type="text/javascript">
$(document).ready(function() {
   $('button[data-ligon-isbn]').ligon();
});
</script>

Můžete si nastavit CSS podle svých představ, například měnit barvu textu:

.moje-tlacitko
{
   color: red;
}
/* Třída active se automaticky přidá HTML elementu, pokud je kniha nalezena v DB Ligonu. */
.moje-tlacitko.active
{
   color: green;
}

Pokud si například přejete, aby tlačítko (tag A) nebylo vidět, pokud není kniha v databázi, můžete nastavit classy takto:

a.ligon-button
{
   display: none;
}
a.ligon-button.active
{
   display: inline;
}

Když to nefunguje

Nasazení databáze Ligon je velice jednoduché, pokud by se ale přesto objevil problém, zkuste následující tipy:

Zkontrolujte, jestli máte správně načtené knihovny jQuery a Ligon.
Zkontrolujte správné pořadí při načítání knihoven. Nejprve jQuery, pak Ligon.
Zkontrolujte, jestli není na stránce JavaScriptová chyba. Běžné webové prohlížeče mají debugger na JavaScript, který lze většinou spustit klávesou F12.
Zkontrolujte správnou definici tlačítka. Musí se jednat o HTML tag, který musí mít parametr data-ligon-isbn, jehož hodnota musí být platné ISBN 13.
Zkontrolujte správnost selektoru v jQuery.
Pokud je tlačítko stále neaktivní, ujistěte se na těchto stránkách, že je kniha v databázi Ligon.
Pokud se snažíte přepsat CSS třídy a.ligon-button a/nebo a.ligon-button.active, ujistěte se, že vaše definice je až po načtení knihovny Ligon.