Příklad fotogalerie
Moje hlavní stránky oplývají větším množstvím fotogalerií, u kterých jsem chtěla zajistit elegantnější otevírání obrázků z náhledů, než pouhé otevření do úplně nového okna. Klasické okno, byť uzpůsobené velikosti otevíraného obrázku, se mi nelíbilo nejen z důvodu existence horní výrazné lišty. I jala jsem se pátrat po návodu na skript, který by mi umožnil otevírat zvětšeniny pohodlně v dosahu náhledů.
Jak jsem převedla svou vizi do kódu, znázorňuje ukázková fotogalerie níže. Je složena ze zvoleného počtu náhledů uspořádaných do matice. Kliknutím na libovolný náhled se v konkrétním místě ukáže jeho zvětšenina a každé další kliknutí na jiný malý obrázek vyvolá její vizuální přepsání. Překáží velký obrázek při výběru další miniatury? Není nic jednoduššího než jej kliknutím zavřít.
Po prvotním vložení skriptu do hlavičky jsem dostávala hlášení "var kam is null", po umístění skriptu k patičce protesty konzoly ustaly.
Zájemce o zdrojový kód se může kouknout »sem« . Elegantnější vyvedení zdrojového kódu s využitím tříd pro zobrazování a skrytí velkého obrázku »tady« spočívá v tom, že celkový vzhled velkého obrázku je uložen v CSS třídě .uprav, která je mimo vlastní skript. To znamená snadnou pozdější úpravu.
Zdrojový kód fotogalerie (1)
<div id="galerie">
<div class= "pic"><a href="/obrazky/1.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/1th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/2.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/2th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/3.jpg" title="Kliknutím zvětšíte">
<img src="//obrazky/3th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/4.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/4th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/5.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/5th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/6.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/6th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/7.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/7th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/8.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/8th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/9.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/9th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/10.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/10th.jpg" width="120" height="90"></a></div>
</div>
<!--rodic pro vytvoreny prvek IMG, kam se oteviraji zvetseniny,
plovouci umisteni je dulezite kvuli správnému pozicovani-->
<div id="umisteni" style="float: left;"></div>
<script language="JavaScript" type="text/javascript"><!--
//do neho se otevira zvetsenina
var snimek = document.createElement("img");
//rodic pro var snimek
var kam = document.getElementById("umisteni");
kam.appendChild(snimek);
//aby IE a Opera nevkládaly ctverecek pro imaginarni IMG
snimek.style.display = "none";
var nahled = document.getElementById("galerie").getElementsByTagName("a");
//nahled.length = pocet nahledu
for (var i=0; i<nahled.length; i++)
{
nahled[i].onclick = function()
{
snimek.src = this.href;
//bez blokové deklarace se neotevře po zavření další náhled
snimek.style.display = "block";
snimek.style.position = "absolute";
snimek.style.marginLeft = "-546px";
snimek.style.marginTop = "50px";
snimek.style.padding = "6px";
snimek.style.backgroundColor = "#ffffaa";
snimek.style.border = "2px solid green";
return false;
}
}
//zavřeni velkého obrázku onclickem
snimek.onclick = function()
{
snimek.style.display = "none";
snimek.style.padding = 0;
snimek.style.border = 0;
}
//-->
</script>
Zdrojový kód fotogalerie (2)
<style type="text/css">
.uprav {display: block; position: absolute; margin-left: -546px;
margin-top: -24px; padding: 6px; background-color: #ffa;
border: 2px solid green;}
.skryj {display: none;}
</style>
<div id="galerie">
<div class="pic"><a href="/obrazky/1.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/1th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/2.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/2th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/3.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/3th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/4.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/4th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/5.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/5th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/6.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/6th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/7.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/7th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/8.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/8th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/9.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/9th.jpg" width="120" height="90"></a></div>
<div class="pic"><a href="/obrazky/10.jpg" title="Kliknutím zvětšíte">
<img src="/obrazky/10th.jpg" width="120" height="90"></a></div>
</div>
<!--rodic pro vytvoreny prvek IMG, kam se oteviraji zvetseniny,
plovouci umisteni je dulezite kvuli správnému pozicovani-->
<div id="umisteni" style="float: left;"></div>
<script language="JavaScript" type="text/javascript"><!--
//do neho se otevira zvetsenina
var snimek = document.createElement("img");
//rodic pro var snimek
var kam = document.getElementById("umisteni");
kam.appendChild(snimek);
//aby IE a Opera nevkládaly ctverecek pro imaginarni IMG
snimek.className = "skryj";
var nahled = document.getElementById("galerie").getElementsByTagName("a");
//nahled.length = pocet nahledu
for (var i=0; i<nahled.length; i++)
{
nahled[i].onclick = function()
{
snimek.src = this.href;
//bez blokové deklarace se neotevře po zavření další náhled
snimek.className = "uprav";
return false;
}
}
snimek.onclick = function() //zavření velkého obrázku
{
snimek.className = "skryj";
}
//-->
</script>
