KOMPOOS.NL

lightbox css

home » css » boxen-en-borders » lightbox.html

sitemap

---

lightbox versie 1 | lightbox versie 2 | lightbox versie 3

---

uitleg lightbox procedure

Er staan een paar voorbeelden van de lightbox op deze pagina. Hier is de eerste lightbox, hier is de tweede en hier is de laatste lightbox. Om de lightbox op jouw pagina te laten werken moet je direct na de body-start-tag van de pagina een div met het id alle_inhoud_van_de_body toevoegen. Alle inhoud van de pagina komt in deze div "te staan". Tussen de "sluit-div" (van alle_inhoud_van_de_body) en de sluit-tag van de body (</body>) plaats je de code, die onder het kopje lightbox-code hieronder te vinden is. Om een lightbox aan te roepen, plaats je op de pagina een link met (als voorbeeld) <a href="#uniek_id_3">laatste lightbox</a>. Tot slot plaats je de css-code (die je hieronder onder het kopje css-code lightbox kan vinden) in de head-sectie van jouw pagina.

lightbox-code

<ul id="lightbox">
	<li id="sluiten"></li>
	<li id="uniek_id_1">
		<div class="box">
			<h1>Lightbox</h1>
			<p>
				Hier plaats je de tekst voor de lightbox.
			</p>
			<a href="#sluiten" class="sluiten" title="sluit window">x</a>
		</div>
		<!--[if IE]>
			<div class="voor_ie"></div>
		<![endif]-->
	</li>
	<li id="uniek_id_2">
		<div class="box">
			<h1>Een ander lightbox-titel</h1>
				<p>
					Plaatjes zijn natuurlijk ook mogelijk.
			</p> 
			<a href="#sluiten" class="sluiten" title="sluit window">x</a>
		</div>
		<!--[if IE]>
			<div class="voor_ie"></div>
		<![endif]-->
	</li>
	<li id="uniek_id_3">
		<div class="box">
				<h1>De laatste voorbeeld-kop</h1>
			<p>
				Laatste lightbox-tekst. 
			</p> 
			<a href="#sluiten" class="sluiten" title="sluit window">x</a>
		</div>
		<!--[if IE]>
			<div class="voor_ie"></div>
		<![endif]-->
		</li>
</ul>

css-code lightbox

<style type="text/css">
	#alle_inhoud_van_de_body{
		position:absolute;
		margin-top:-8px;
		z-index:1;
		overflow:auto}
	#lightbox p{
		margin:20px 0 0 0;
		color:#000;
		background:inherit}
	#lightbox{
		width:105%;
		height:150%;
		margin-top:-40px;
		margin-left:-55px;
		list-style-type:none;
		text-align:left;
		overflow:hidden}
	#lightbox li{
		width:100%;
		height:300%;
		position:relative;
		background-color: rgba(0, 0, 0, 0.85);}
	#lightbox .box{
		z-index:3;
		position:absolute;
		width:400px;
		height:300px;
		left:50%;
		top:50px;
		border:5px solid #808080;
		margin-left:-230px;
		background-color:#fff;
		color:inherit;
		overflow:auto;
		padding:20px}
	#lightbox a.sluiten{
		position:absolute;
		top:20px;
		right:30px;
		display:block;
		width:50px;
		line-height:60px;
		text-align:center;
		background-color:#ddd;
		text-decoration:none;
		font-weight:bold;
		color:#808080;
		font-size:2.4em}
	#lightbox a.sluiten:hover{
		background-color:#808080;
		color:#fff}
	#lightbox #sluiten{
		background-color:transparent;
		z-index:-1;}
	#lightbox{ 
		position:absolute}
</style>
<!--[if IE]>
	<style type="text/css">
		#alle_inhoud_van_de_body{
			z-index:-1;
			margin-top:0}
		#lightbox .voor_ie{
			background:#000;
			position:absolute;
			z-index:2;
			width:100%;
			height:100%;
			filter:alpha(opacity=85);
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"}
		#lightbox .box{z-index:3}
		#lightbox p{padding-top:20px}
	</style>
<![endif]-->

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.