Matematické Fórum
Nevíte-li si rady s jakýmkoliv matematickým problémem, toto místo je pro vás jako dělané.
Nástěnka
❗22. 8. 2021 (L) Přecházíme zpět na doménu forum.matweb.cz!
❗04.11.2016 (Jel.) Čtete, prosím, před vložení dotazu, děkuji!
❗23.10.2013 (Jel.) Zkuste před zadáním dotazu použít některý z online-nástrojů, konzultovat použití můžete v sekci CAS.
Nejste přihlášen(a). Přihlásit
#1 05. 10. 2011 19:18
Lightbox a obrázky
Zdravim , potřebovala bych pomoct s funkcí lightbox na samostatné vyskakování obrázků , vůbec si s tím nevím rady .. Chtěla bych poprosit , jestli by mi někdo mohl ukázat script jak udělat to že mám složku , v ní obrázek a na ten když kliknu tak aby vyskočil a byl u něho popis , děkuji
Offline
#4 08. 10. 2011 20:15
Re: Lightbox a obrázky
Tak první musíš vědět co to ten lightbox vlastně je.
Není to nic jiného než HTML kod, zobrazený pomocí javascriptu, který je posunutý po Zkové souřadnici blíže k uživateli, takže překryje stránku.
Takže potřebuješ clonu. Černou, bílou..jakou chceš. V CSS jí nastavíš průhlednost a to že má být nad obsahem.
Na clonu se taky hodí dát tlačítko zavřít, případně dalš/předchozí
Zároveň si vytvoříš i třídu pro obrázek, které nastavíš že má být ještě nad tou clonou.
Po tom už potřebuješ jen udělat JS kod, který po kliknutí na obrázek tu clonu vytvoří, na ni vytvoří obrázek a nastaví SRC na obrázek toho na který uživatel klikl.
Takže potřebuješ jen funkce createElement, getAttribute, setAttribute a removeChild. Zbytek je HTML a CSS. (pokud nepoužíváš žádnou knihovnu jako třeba jQuery)
Offline
#6 09. 10. 2011 23:25 — Editoval jindra (09. 10. 2011 23:27)
Re: Lightbox a obrázky
Něco jsem narychlo sepsal. Pochopitelně tam nejsou veškeré funkce, které by to mohlo umět. A není to dokonale napozicované v CSS. Ale pro představu to stačí.
Stačí uložit jako html soubor a spustit.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Jednoduchá galerie</title>
<style type="text/css">
.obr {height: 100px; width: 100px;}
.clona {height: 100%; width: 100%; background-color: grey; z-index: 99; position: absolute; left: 0px; top: 0px; opacity: 0.7;}
.clona img {z-index: 100; position: relative; left: 50%; top: 50%; opacity: 0.7;}
</style>
<script type="text/javascript">
function lightBoxHide()
{
var ele = document.getElementById("clona");
var body = document.getElementsByTagName('body')[0];
body.removeChild(ele);
}
function lightBoxShow(ele)
{
var body = document.getElementsByTagName('body')[0];
var clona = document.createElement('div');
clona.setAttribute("class","clona");
clona.setAttribute("id","clona");
body.appendChild(clona);
var obrazek = document.createElement('img');
obrazek.setAttribute("src",ele.getAttribute("src"));
clona.appendChild(obrazek);
var obrazekDva = document.createElement('img');
obrazekDva.setAttribute("src"," http://png.findicons.com/files/icons/986/aeon/256/close.png");
obrazekDva.addEventListener('click',lightBoxHide);
clona.appendChild(obrazekDva);
}
</script>
</head>
<body>
<img class="obr" alt="šmoulinka" src="http://www.omlazeni.cz/shared_files/uploaded_new/17/175075/1945770_1_o.jpg" onClick="lightBoxShow(this);">
<img class="obr" alt="Taťka šmoula" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/41802_42024636649_4451165_n.jpg" onClick="lightBoxShow(this);">
</body>
</html>Offline
