Už jsem to tu opakoval mnohokrát. Web, který dnes nemá slider nebo jinou střídačku obrázků, aby pohledal. Redakční systémy na to mají nejrůznější vychytávky v administraci, na webu se válí spousta skriptů, které umožní střídat celé části webu, včetně textů.
Někdy ale potřebujete jen jednoduchou výměnu obrázků na pozadí. Bude vám prostě stačit, když si do nějaké složky v rámci webu nahrajete sadu obrázků a budete chtít, aby je web střídal v nějakém intervalu na pozadí stránky nebo třeba na pozadí nějakého prvku v hlavičce stránky.
Právě pro takovou situaci jsem připravil dnešní krátký návod. Ukážeme si, jak střídat obrázky na pozadí elementu DIV. Celý příklad jsem zasadil do fiktivní stránky, jejíž layout je tvořen frameworkem Twitter Boostrap, obrázky na pozadí jsem si půjčil od výborného webu GraphicsFuel.
Příprava webové stránky
Začněte tedy s tím, že si připravíte běžnou kostru webové stránky. V mém příkladu je to soubor index.php. Napojte do ní jQuery, odkažte na soubor se svými styly a pomocí PHP funkce include() připojte soubor slider.php. Ten si posléze vytvořte ve stejné složce jako index.php.
<head>
<meta charset="utf-8">
<title>Ukázka automatické výměny pozadí</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Jan Polzer">
<link href="css/styles.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<?php include('slider.php'); ?>
</head>
Někde do těla stránky umístěte značku DIV s atributem ID nastaveným na hodnotu slider. Do tohoto prvku vložte libovolný textový obsah, který se nebude měnit.
<div id="slider"> <h1>Ukázka slideru</h1> <p class="lead">Tento text se nemění, mění se jen obrázek na pozadí</p> </div>
Ve stylech pak tomuto prvku nastavte nějaký výchozí obrázek na pozadí.
#slider {
background: url("../img/pozadi/pozadi1.jpg");
color: #fff;
padding: 10px;
}
Získání názvů souborů ve zvolené složce
Nyní nás bude zajímat soubor slider.php. Nejprve si v něm připravíme funkci, která bude zjišťovat seznam obrázků ve zvolené složce. Následně tento seznam zpracujeme a předáme JavaScriptu, který zařídí střídání těchto obrázků na pozadí prvku #slider.
Jádrem funkce pro zjišťování seznamu obrázků je PHP funkce glob(). Nejprve si určíme cestu ke složce, která nás zajímá. Funkci glob() předáme tuto cestu spolu s maskou souborů, jejichž seznam chceme získat. V tomto případě nás zajímají obrázky JPG. Funkce glob() vrací pole se seznamem odpovídajících souborů, takže je pouze předáme na výstup z naší funkce ziskej_pozadi().
function ziskej_pozadi(){
$directory = "img/pozadi/";
$pics = glob($directory . "*.jpg");
return $pics;
}
Střídání obrázků na pozadí pomocí jQuery
Zjišťování seznamu souborů v zadaném umístění máme připraveno, nyní tyto soubory už jen připravíme pro střídání na pozadí. Do proměnné $pozadi si vložíme výstup funkce ziskej_pozadi(). Následně obsah této proměnné (tohoto pole) přetransformujeme do JavaScriptového pole $js_array pomocí PHP funkce json_encode().
Zbývá sestrojit kousek JavaScriptu, který s využitím jQuery bude soubory nyní uložení v poli $js_array() střídat na pozadí prvku #slider.
Připravte si proměnnou, která bude udržovat informaci o aktuálním obrázku, tedy o pořadí v poli $js_array(), které budeme v intervalu procházet. Začnete-li od nuly, bude první výměna slajdu trvat dvojnásobný čas, neboť vlastně interval vloží znovu stejný obrázek, který máme nastaven ve stylech. Chcete-li hned po spuštění intervalu provést výměnu, nastavte počitadlu jedničku (což tedy ukáže na druhý obrázek v pořadí).
Do proměnné images vložte rozpojením řetězce s JavaScriptem připravenou proměnnou $js_array. Konstrukcí jQuery připravte volání intervalu po načtení stránky. Interval v ukázce je pětisekundový, chcete-li jej změnit, přepište výchozí počet milisekund, který je v příkladu 5000. Prvku #slider nastavte CSS vlastnost background-image na obrázek získaný z odpovídajícího pořadí v poli images. Následně si počitadlo navýšíme o jeden bod. Pokud je již na konci, musíme jej samozřejmě nastavit na začátek, aby se střídání obrázků neustále opakovalo.
Celý takto připravený JavaScript vypíšeme PHP funkcí echo do těla stránky. Slider.php jsme includovali do hlavičky stránky, tam se také tento JavaScript objeví.
$pozadi = ziskej_pozadi();
$js_array = json_encode($pozadi);
echo '<script>
var cur_img = 1;
var images = '.$js_array.';
jQuery(document).ready(function(){
setInterval(function(){
jQuery("#slider").css("background-image","url("+images[cur_img]+")");
if (cur_img < images.length - 1){
cur_img = cur_img + 1;
}
else{
cur_img = 0;
}
},5000);
});
</script>';
Kompletní příklad
V příloze pod tímto článkem najdete kompletní příklad výše uvedeného střídače obrázků. V hlavičce stránky v souboru index.php je uvedeno ještě pár dalších souborů, které stránku připraví pro použití s frameworkem Twitter Boostrap. V těle stránky jsou pak různé prvky s třídami, které zajištují zformátování stránky do responsivního designu s minimem práce.
| Příloha | Velikost |
|---|---|
| Ukázka střídání obrázků v hlavičce | 1.82 MB |
Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.
Podobné články
Komentáře k článku
Možná nefunguje načtení jQuery z adresy //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js Stáhněte si ji a dejte jako soubor k projektu, pak upravte ve zdrojáku cestu a mělo by to šlapat.
Děkuji, tam chyba nebyla. Po prohednutí kódu ve firebugu, jsem si všiml zakomentovaného include a došlo mi, že po přeinstalaci PC jsem ještě neinstaloval Apache ani PHP :-( Takže kód šlape.
Dobrý den, vše z příkladu funguje, ale když tam změním odkaz z relativní adresy na absolutní, tak to nechce fungovat. Nevíte prosím proč?
Kde? V CSS nebo v té PHP funkci?
Dobrý den, je možné k této funkci přidat i možnost prolínání jednotlivých, střídajících se obrázků?
Pokud bych řešil prolínání, nedával bych to jako střídání obrázků na pozadí, ale klasicky s tímto http://jquery.malsup.com/cycle/
Dobrý den,
je možné dát do scriptu nějaký efekt?
Jestli ano je možné napsat nějakou ukázku přechodu mezi obrázky.
Prosím o doplnění scriptu
Děkuji
<?php
function ziskej_pozadi(){
$directory = "files/slider/";
$pics = glob($directory . "*.jpg");
return $pics;
}
$pozadi = ziskej_pozadi();
$js_array = json_encode($pozadi);
echo '
var cur_img = 1;
var images = '.$js_array.';
jQuery(document).ready(function(){
setInterval(function(){
jQuery("#hlavicka").css("background-image","url("+images[cur_img]+")");
if (cur_img < images.length - 1){
cur_img = cur_img + 1;
}
else{
cur_img = 0;
}
},5000);
});
';
?>
Dobrý den, zkuste třeba toto:
jQuery("#hlavicka").css("background-image","url("+images[cur_img]+")").animate({opacity: 1});
zdravím, něco dělám špatně, ale nejede mi ani originál stažená ukázka ve ff, ie, opera ..