PC-politika.cz - Novinky: JavaScript: Rolující obrázky a text PC-politika

JavaScript: Rolující obrázky a text

Před několika měsící jsme měli zde na serveru v pravém sloupci upoutávku na některé články ve formě rolujících/měnících se obrázků s krátkým textem. Šlo o JavaScript, který nyní dáváme k veřejnému použití.

Jde o Ajax Ticker script na který má open-source práva - © Dynamic Drive Dynamicdrive.com. Tento skript jsem upravil na konkrétní podmínky běžného webu HTML. Přizpůsobil jsem ho i pro webu (Panel), který jede na platformě PHP-Fusion (PHPF) v. 6/7xx.

Scrolling Ticker

Tento Javacsript, který dokáže rolovat obrázky i s textem jsem nazval Scroling Ticker. Ke svému provozu potřebuje tento JavaScript nejprve zařadit do DTD hlavičky vašeho webu, do sekce HEAD tento zápis:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />
<script type="text/javascript" src="featuredcontentglider.js">

Dále budete potřebovat JavaScriptový soubor ajaxticker.js
Dále budete potřebovat klasický textový soubor, např. v Notepadu tickercontent.txt. Do tohoto souboru zadejte konkrétní URL adresy odkazů (prezentace, článků) na které budete směrovat a zároveň cestu k obrázkům, týkající se adresy (prezentace, článků).
Dále budete potřebovat CSS soubor featuredcontentglider.css
Poslední JS soubor - featuredcontentglider.js
Pro vytvoření "okna" s rolujícími obrázky budete potřebovat následující základní HTML kód s JavaScriptem, který si uložte na místo www stránky, kam chcete, aby byl umístěn:

scroling_ticker.html

<div align="center">
<script type="text/javascript">
var xmlfile="tickercontent.txt"
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500], "fade")
</script>
</div>

sroling_ticker (pro PHPF do Panelu)

openside("TOP články");
?>
<div align="center">
<script type="text/javascript">
var xmlfile="tickercontent.txt"
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500], "fade")
</script>
</div>
<?php
closeside();

Všechny soubory jsou obsaženy v jednom balíčku, který si stáhněte zde: scroling_ticker.zip

Resumé

Tento sroling je jistě poměrně jednoduchý, jeho instalace, třeba v PHPF do Panelu, zabere pár minut. Stačí jen v tickercontent.txt zadat potřebné odkaz/cesty na svém webu a samozřejmě nezapomenout na deklarování JavaScriptu v DTD hlavičce, v sekci HEAD.

Autor: Květoslav (Kvido) Vícha