Vytváříme super snadnou slideshow (prolínačku) nejen pro Drupal

Na Maxiorlovi momentálně žádnou slideshow sice nenajdete, to však neznamená, že bych byl vyloženě proti nim. V řadě případů může střídání nějakých obrázků nebo textových informací na domovské stránce návštěvníka zaujmout. Nesmí se to ale přehánět.

Slideshow ve své nejjednodušší podobě, kdy se v ní mění jen sada obrázků a jejich přepínání probíhá automaticky bez nějakých ovládacích prvků, je přitom velmi jednoduchá na zhotovení. Nepotřebujete k tomu nic jiného, než sadu zmíněných obrázků, které si v HTML umístíte do nějakého DIVu či odstavce s předem specifikovanou třídou. Poté stačí do stránky napojit jednu javascriptovou knihovnu a napsat kousek kódu, který DIV s obrázky na slideshow promění.

Následující postup využijete i pro Drupal. Volně dostupná témata vzhledu často již nějakou slideshow obsahují. Většinou jde o blikačky umístěné v té části stránky, kde vám to nejméně pasuje. Zapomeňte na ně, následující postup můžete použít i pro vytvoření prolínačky třeba přímo uprostřed libovolného článku.

Jak na slideshow obecně v HTML

Na stránce, kde chcete mít slideshow umístěnu si připravte DIV, do kterého dáte sadu značek IMG pro obrázky. Tedy něco takového:

<div class=“slideshow“>
  <img src=“cesta/obrazek1.png“ alt=“Obrázek 1“ />
  <img src=“cesta/obrazek2.png“ alt=“Obrázek 2“ />
  <img src=“cesta/obrazek3.png“ alt=“Obrázek 3“ />
</div>

Jak vidíte, není to nic složitého, jde o naprostý základ práce s HTML a určitě to dovedete naklikat i v nějakém vizuálním HTML editoru. Co je důležité, je označení třídy obalovacího DIVu, v tomto případě jsem zvolil název třídy slideshow. Můžete použít libovolný název, jen s ním pak musíte pracovat i v další části.

Do hlavičky HTML stránky, tedy před značku </head> vložte tyto dva řádky. První z nich doplní do stránky knihovnu jQuery (pokud už máte, řádek vynechejte), druhý pak plugin jQuery Cycle.

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

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

Plugin jQuery Cycle doporučuji stáhnout z jeho domovské stránky a nakopírovat do vašeho webového projektu. Co se týče knihovny jQuery jako takové, můžete ji nechat načítat ze serverů Google. Nejenom, že jsou rychlé a geograficky rozdělené tak, aby se obsah načítal pro uživatele z nejbližšího serveru, ale pokud návštěvník projde více webů, kde mají jQuery takto napojeno, prohlížeč to pozná, jQuery si uchovává v cache u sebe a nemusí ji znovu načítat. O to rychlejší je pak zobrazení stránky.

Nyní zbývá ještě webu říci, z čeho má vytvořit prolínačku. Tedy ze všech elementů s třídou slideshow, které na stránce najde (ano, můžete jich mít tedy na jedné stránce několik). Před značku </head> tedy doplňte poslední kousek kódu:

<script type="text/javascript">
$(document).ready(function() {
  $('.slideshow').cycle({
    fx: 'fade'
  });
});
</script>

Pokud jste použili jiný název třídy, pak samozřejmě vyměňte .slideshow za .vas-nazev-tridy. Tím je slideshow na vašem webu zprovozněna a můžete ji vyzkoušet.

Jak na slideshow v Drupalu

Výše popsaný postup by samozřejmě šel aplikovat i v Drupalu, když byste zeditovali soubor page.tpl.php (Drupal 6) nebo html.tpl.php (Drupal 7) ve svém tématu vzhledu. Ukážeme si ale trochu jednodušší a hlavně čistější způsob implementace tohoto řešení do Drupalu.

Pokud v tématu vzhledu nemáte soubor script.js, pak do souboru *.info doplňte řádek

scripts[] = script.js

Dále přímo do složky s tématem vzhledu nakopírujte jQuery Cycle plugin jako soubor jquery.cycle.all.js a do souboru *.info doplňte ještě tento řádek:

scripts[] = jquery.cycle.all.js

Napojení jQuery řešit nemusíte, to je již obsaženo přímo v Drupalu. Do souboru script.js v tématu vzhledu (kdyžtak si jej vytvořte) doplňte následující:

(function ($) {

function Slideshow(){

  $('.slideshow').cycle({

    fx: 'fade'

  });

}

$(document).ready(function () {

  Slideshow();

});

}(jQuery));

V podstatě jde o stejný kód, jako je uveden o něco výše, jen je zabalený do jQuery zápisu tak, aby fungoval dobře i v Drupalu 7. Je v něm umístěna definice funkce Slideshow(), která vytváří prolínačku ze všech elementů s třídou slideshow a následně je v kódu řečeno, že se tato funkce má aplikovat v momentě, kdy je stránka načtena.

V praxi je pak úplně jedno, jestli si dáte někam na titulku a natvrdo do souboru page.tpl.php kousek HTML pro prolínačku, nebo zda si DIV s třídou slideshow a nějakými obrázky naklikáte třeba přes TinyMCE či CKeditor v nějakém článku.

Nastavení vzhledu a chování prolínačky

Samozřejmě, plugin jQuery Cycle umožňuje ještě řadu nastavení, kterými ovlivníte, jak může prolínačka fungovat. Na jeho domovské stránce si najdete ukázku celé řady efektů, které doprovázejí střídání obrázků, stejně tak v sekci Options Reference najdete přehled dalších parametrů, které lze dát do kódu pro nastavení prolínačky. Například slideshow s nastaveným intervalem na 4 sekundy a padajícím efektem by vypadala takto:

$('.slideshow').cycle({ 
    fx:     'scrollDown', 
    easing: 'easeOutBounce', 
    delay:  -4000 
});

Vyzkoušejte i jinou podobu slideshow. Obrázky zkuste obalit odkazy, případně do hlavního DIVu dát třeba několik dalších, které budou tvořit jednotlivé snímky prolínačky.