Galería de imágenes con preview de Thumbnails

[jawir]

Y el CSS

Código:

*{
	margin:0;
	padding:0;
}
body{
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	text-transform:uppercase;
	text-shadow: 1px 1px 2px #ccc;
	font-size:14px;
	background:#333;
	color:#333;
}
h1{
	font-size:32px;
	padding:20px;
	color:#fff;
	z-index:999;
	position:relative;
	font-weight:normal;
}
.loader{
	width:70px;
	height:70px;
	position:fixed;
	top:50%;
	left:50%;
	margin:-35px 0px 0px -35px;
	opacity:0.7;
	z-index:1000;
	background:#fff url(../images/loader.gif) no-repeat center center;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	-moz-box-shadow:0px 0px 5px #999;
	-webkit-box-shadow:0px 0px 5px #999;
	box-shadow:0px 0px 5px #999;
}
.bg_image img{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	z-index:0;
}
.footer{
	position:fixed;
	top:10px;
	right:10px;
	z-index:999999;
}
.footer a{
	color:#888;
	text-decoration:none;
	text-shadow:1px 1px 1px #fff;
	font-size:12px;
	padding-right:20px;

}
.footer a:hover{
	color:#000;
}

/* Preview Slider Gallery Style */
.ps_container{
	display:none;
	width:680px;
	height:500px;
	margin:20px auto 0px auto;
	position:relative;
}
.ps_image_wrapper{
	width:680px;
	height:450px;
	overflow:hidden;
	position:relative;
	margin:0 auto;
	-moz-box-shadow:0px 0px 5px #999;
	-webkit-box-shadow:0px 0px 5px #999;
	box-shadow:0px 0px 5px #999;
}
.ps_image_wrapper img{
	position:absolute;
	left:0px;
	top:0px;
}
.ps_prev,
.ps_next{
	width:30px;
	height:59px;
	position:absolute;
	top:50%;
	margin-top:-40px;
	cursor:pointer;
	opacity:0.5;
}
.ps_prev{
	background:transparent url(../images/prev.png) no-repeat top center;
	left:-50px;
}
.ps_next{
	background:transparent url(../images/next.png) no-repeat top center;
	right:-50px;
}
.ps_prev:hover,
.ps_next:hover{
	opacity:0.9;
}
ul.ps_nav{
	list-style:none;
	margin:0;
	padding:0;
	width:170px;
	margin:20px auto;
	position:relative;
}
ul.ps_nav li{
	float:left;
}
ul.ps_nav li a{
	display:block;
	text-indent:-9000px;
	width:11px;
	height:11px;
	outline:none;
	padding:0px 3px;
	background:transparent url(../images/dot.png) no-repeat top center;
}
ul.ps_nav li a:hover,ul.ps_nav li.selected a{
	background-position:50% -11px;
}
ul.ps_nav li.ps_preview{
	display:none;
	width:85px;
	height:91px;
	top:-95px;
	left:-34.5px; /*First item, next ones is leftDot - 0.5*wThis + 0.5*wDot, i.e. second one is (16 - 42.5 + 8) = -18.5 */
	position:absolute;
}
ul.ps_nav li.ps_preview span{
	background:transparent url(../images/triangle.png) no-repeat top center;
	width:15px;
	height:6px;
	position:absolute;
	top:85px;
	left:35px;
}
.ps_preview_wrapper{
	width:75px;
	height:75px;
	border:5px solid #fff;
	overflow:hidden;
	position:relative;
	-moz-box-shadow:0px 0px 5px #999;
	-webkit-box-shadow:0px 0px 5px #999;
	box-shadow:0px 0px 5px #999;
}
.ps_preview_wrapper img{
	position:absolute;
	top:0px;
	left:0px;
}