CSS/XMLTimeline

CSS/XML Timeline is a simple, yet powerful HTML5 tool for generating interactive timelines from CSS and dynamic XML data. Create XML events then pass them to this tool to generate a timeline. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.)

CSS - lightbox screen

 

The lightbox screen is displayed by clicking an event to show additional event information (click the event to center it first, then click it again to display the lightbox).

In the free version of CSS/XML Timeline, clicking a centered event displays a registration alert instead of executing the event's action (lightbox, URL link, Javascript, etc.).

To set the appearance of the lightbox screen, edit the stylesheet's CSS under the following selectors:

 

 

Examples
/* lightbox screen =================================== */

#lightbox_background {
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(50, 50, 50, 1);
	z-index: 1000;
}

#lightbox_title {
	position: absolute;
	top: 0;
	width: 100%;
	font-size: .6cm;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 1);
}

#lightbox_image {
	position: absolute;
	left: 10%;
	top: 10%;
	height: 80%;
	width: 80%;
	
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#lightbox_video {
	position: absolute;
	left: 20%;
	top: 20%;
	width: 60%;
	height: 60%;
	text-align: center;
}

#lightbox_credit {
	position: absolute;
	bottom: 0;
	width: 100%;
	font-size: .3cm;
	color: rgba(255, 255, 255, .5);
	margin: .2cm;
}

#lightbox_exit {
	display: block;
	position: absolute;
	right: .5cm;
	top: .4cm;
	width: 1.5cm;
	height: 1.5cm;
	border-radius: 50%;
	border: .07cm solid black;
	opacity: .75;
	
	background: rgba(255, 255, 255, 1);
	background-image: url('../images/button_x.png');
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
}


 

See the Gallery section for additional examples. Click Show Source below each gallery example to view its code.

 

blank

blank

Copyright © 2015-2017, Maani.us.

blank