Estoy creando una galería de imágenes con una plantilla. Trato de centrar en la pagina los div con imágenes sin éxito. Por otro lado no encuentro la manera de aumentar el tamaño de la galería que se muestra al pinchar en una de las imágenes, que es una especie de televisión donde se van mostrando todas las imágenes. En el ejemplo no se muestra el marco y ni panel de instrumentos pues los iconos están en un archivo local. No se si con el código que muestro pueden ayudarme a centrar en pantalla el bloque de imágenes y a aumentar el tamaño de la galería que se muestra al pinchar una de las imágenes. Gracias.
var $VisualLightBoxParams$ = {autoPlay:true,borderSize:21,enableSlideshow:true,overlayOpacity:0.4,startZoom:true};
// jquery //
#vlightbox { width:680px;height:355px; }
#vlightbox span{ display:block; }
#vlightbox a{ display:block; float:left;width:310px; height:155px; margin:3px 1px; padding:6px; border:solid 1px #b8b8b8;
background-color:#f4f5f5;opacity:0.87; }
#vlightbox a img{ display:block; border:none; margin:0px; }
#vlightbox a:hover{ opacity:1; }
#vlightbox a.vlightbox_hidden{ display:none; }
#vlightbox a img { border:medium none; margin:0 auto;width:310px; height:155px; }
/* otro archivo script*/
#overlay{
position:absolute;
top:0;
left:0;
z-index:1090;
width:100%;
height:auto;
background-color:#131313;
}
#lightbox{
position:absolute;
top:20px;
left:0;
width:100%;
z-index:1100;
text-align:center;
color:white;
line-height:0;
}
#lightbox a, #lightbox a:hover {
border-bottom:none;
color:white;
text-decoration:underline;
}
#lightbox a img{ border:none; }
#outerImageContainer{
width:auto;
height:auto; /* without this line error in IE8 detected */
margin:0 auto;
position:relative;
}
#lightboxImage{
width:100%;
height:100%;
}
#imageContainer{
width:50px;
height:50px;
margin:0 auto;
overflow:hidden;
position:relative;
font-size:0;
}
#loading{
position:absolute;
top:40%;
left:0;
height:25%;
width:100%;
text-align:center;
font-size:10px;
z-index:1;
}
#loadingLink {
display:block;
margin:0 auto;
padding:0;
width:60%;
height:32px;
background:url(icons/loading.gif) center center no-repeat;
text-indent:-9999px;
}
#hoverNav{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:10;
}
#imageContainer>#hoverNav{ left:0;}
#hoverNav a{ outline:none;}
#prevLinkImg, #nextLinkImg{
width:49%;
height:100%;
background-image:url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
display:block;
text-indent:-9999px;
}
#prevLinkImg { left:0; float:left;}
#nextLinkImg { right:0; float:right;}
#prevLinkImg:hover, #prevLinkImg:visited:hover {
background:url(icons/prev.png) 5% center no-repeat;
_background-image:url(icons/prev.gif)
}
#nextLinkImg:hover, #nextLinkImg:visited:hover {
background:url(icons/next.png) 97% center no-repeat;
_background-image:url(icons/next.gif)
}
#imageDataContainer{
font:10px Verdana, Helvetica, sans-serif;
font-family:" Trebuchet MS",tahoma,verdana,arial,sans-serif;
font-size:13px;
width:100%;
}
#imageData{
overflow:hidden;
width:100%;
}
#imageDetails{ width:70%; float:left; text-align:left; padding:10px 10px 0 0;}
#caption{ font-weight:bold; display:block;}
#numberDisplay{ display:block; float:left; padding:9px 10px 0 0;}
#detailsNav{display:block; float:left; padding:0; }
#prevLinkDetails, #nextLinkDetails, #slideShowControl{ background-repeat:no-repeat; outline-style:none; display:block; float:left;}
#prevLinkDetails {
margin:2px; width:32px;height:32px; background-position:left 100%;
background-image:url(icons/navigation.png);
_background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/prev-32grey.png', sizingMethod='scale');
}
#prevLinkDetails:hover {
background-position:0 0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/prev-32color.png', sizingMethod='scale');
}
#nextLinkDetails {
margin:2px; width:32px;height:32px; background-position:right 100%;
background-image:url(icons/navigation.png);
_background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/next32-grey.png', sizingMethod='scale');
}
#nextLinkDetails:hover {
background-position:100% 0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/next32-color.png', sizingMethod='scale');
}
#slideShowControl{
display:block;
width:32px;
height:32px;
float:left;
margin:2px;
background-image:url(icons/navigation.png);
background-position:-32px 100%;
background-repeat:no-repeat;
_background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/start32grey.png', sizingMethod='scale');
}
#slideShowControl:hover{
background-position:-32px 0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/start32color.png', sizingMethod='scale');
}
#slideShowControl.started{
background-position:-64px 100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/pause32grey.png', sizingMethod='scale');
}
#slideShowControl.started:hover{
background-position:-64px 0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/pause32color.png', sizingMethod='scale');
}
#close{
padding:16px 0 0;
float:right;
}
#closeLink {
display:block;
outline-style:none;
margin:0;
padding:0;
text-decoration:none;
width:48px;
height:48px;
background:url(icons/close.png) no-repeat 0 100%;
_background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/cancel48grey.png', sizingMethod='scale');
}
#closeLink:hover{
background-position:0 0;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/cancel48color.png', sizingMethod='scale');
}
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html>body .clearfix {display:inline-block; width:100%;}
* html .clearfix {
/* Hides from IE-mac \*/
height:1%;
/* End hide from IE-mac */
}
#outerImageFrame{
height:100%;
width:100%;
position:absolute;
}
#outerImageContainer{
overflow:visible;
}
#outerImageContainer td{
text-align:center;
padding:0;
}
#lightboxFrameBody{
background:url(icons/back_info.png);
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_info.png', sizingMethod='scale');
}
#outerImageContainer td{
font-size:0;
}
/* frame style */
#outerImageContainer td.tl, #outerImageContainer td.br{
height:19px;
width:19px;
}
#outerImageContainer td.tl{
background:url(icons/back_corvers.png) 0 0;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_lt.png', sizingMethod='scale');
}
#outerImageContainer td.tc{
background:url(icons/back_tb.png) 50% 0;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_ct.png', sizingMethod='scale');
}
#outerImageContainer td.tr{
background:url(icons/back_corvers.png) 100% 0;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_rt.png', sizingMethod='scale');
}
#outerImageContainer td.ml{
background:url(icons/back_lr.png) 0 50%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_lc.png', sizingMethod='scale');
}
#outerImageContainer td.mr{
background:url(icons/back_lr.png) 100% 50%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_rc.png', sizingMethod='scale');
}
#outerImageContainer td.bl{
background:url(icons/back_corvers.png) 0 100%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_lb.png', sizingMethod='scale');
}
#outerImageContainer td.bc{
background:url(icons/back_tb.png) 50% 100%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_cb.png', sizingMethod='scale');
}
#outerImageContainer td.br{
background:url(icons/back_corvers.png) 100% 100%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_rb.png', sizingMethod='scale');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!DOCTYPE html >
<html lang="es">
<head>
<title>Galeria de imagenes de vallas</title>
<link rel="stylesheet" href="visuallightbox.css" type="text/css" />
<link rel="stylesheet" href="vlightbox.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.2.6.min.js"></script>
</head>
<body>
<div id="vlightbox">
<a id="firstImage" title="Ejemplo" href="http://i65.tinypic.com/wswjfs.jpg" class="vlightbox"><img alt="image 1" src="http://i65.tinypic.com/2uh6e7p.jpg" /></a>
<a title="Ejemplo..." href="http://i66.tinypic.com/2zf1s7k.jpg" class="vlightbox"><img alt="image 2" src="http://i66.tinypic.com/2zf1s7k.jpg" /></a>
<a title="Ejemplo...." href="http://i63.tinypic.com/1zxuu6c.jpg" class="vlightbox"><img alt="image 3" src="http://i63.tinypic.com/1zxuu6c.jpg" /></a>
<a title="Ejemplo..." href="http://i63.tinypic.com/1zxuu6c.jpg" class="vlightbox"><img alt="image 4" src="http://i63.tinypic.com/1zxuu6c.jpg" /></a>
<a title="Ejemplo...." href="http://i65.tinypic.com/20r9zi8.jpg" class="vlightbox vlightbox_hidden"><img alt="image 5" src="http://i65.tinypic.com/20r9zi8.jpg" /></a>
<a title="Combinados..." href="http://i65.tinypic.com/2uh6e7p.jpg" class="vlightbox vlightbox_hidden"><img alt="image 5" src="http://i65.tinypic.com/2uh6e7p.jpg" /></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>