0

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>

1 respuesta 1

2

Espero esto sea lo que buscas la idea es contener a #vlightbox dentro de un div .con-galeria que va a tener todo el ancho y alto de la pantalla y para centrar al hijo usamos la propiedad display:flex.

.con-galeria {
 display:flex;
 width:100vw;//ancho completo de la pantalla
 height:100vh;//alto completo de la pantalla
 align-items: center;//centrar verticalmente
 justify-content: center;//centrar horizontalmente
}

Espero te ayude saludos.

NOTA: agrandar el ejemplo para ver la funcionalidad porque las imágenes tienen un ancho estático de width:310px y se corren hacia abajo por el float:left no quise cambiar eso porque no se si lo necesitas así por alguna razon.

var $VisualLightBoxParams$ = {autoPlay:true,borderSize:21,enableSlideshow:true,overlayOpacity:0.4,startZoom:true};
        
        // jquery //
        
        
        $("#vlightbox").find("img").click(function(){
        $(".verImagen").find("img").attr("src",$(this).attr("src"))
          $(".verImagen").fadeIn()
          
        })
        
        $(".cerrarImagen").click(function(){
          $(".verImagen").fadeOut()
        })
.verImagen{
  z-index:100;
  top:0px;
  left:0px;
  position:fixed;
  background:rgba(255, 255, 255, 0.6);
  display:none;
}

.contiene-imagen {
  display:flex;
  width:100vw;
  height:100vh;
  overflow:auto;
  align-items: center;
  justify-content: center;

}
.contiene-imagen img {
position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  }
.verImagen button {
  position: absolute;
    left: 10px;
    top: 10px;
    padding: 10px;
    background: rgb(221, 120, 77);
    color: rgb(255, 255, 255);
    border: 0px;
    outline: none;
    cursor:pointer;
}

.con-galeria {
  display:flex;
  width:100vw;
  height:100vh;
  align-items: center;
    justify-content: center;
}

#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:relative;
	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 class="verImagen">
<div class="contiene-imagen">
<button class="cerrarImagen" type="button" name="button">Cerrar</button>
<img alt="image 1" src="http://i65.tinypic.com/2uh6e7p.jpg" />
</div>
</div>
<div class="con-galeria" >
    <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>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>

3
  • Muy bien, @Luis Daniel Rovira Contreras , de manera vertical he quitado 'align-items: center;' pues tengo texto debajo y queda muy separado de las imágenes, he intentado quitar el espacio en blanco sin éxito.
    – gemita
    Commented el 22 dic. 2017 a las 19:22
  • Por otro lado, @Luis Daniel Rovira Cotreras, quería aumentar de tamaño de la galería que se muestra en pantalla pinchando en una imagen, no se ve pues un archivo js. es de una librería que no sabia poner, se llama (Obfuscated by Javascript Obfuscator 4.2 javascript-source.com VisualLightBox for jQuery v 1.7.10j VisualLightBox is a free wizard program that helps you easily generate LightBox photo galleries, in a few clicks without writing a single line of code. ) ,quiero hacerlo mas grande, casi a pantalla completa. quizá con imágenes mas grandes se haría mas grande. Muchas gracias
    – gemita
    Commented el 22 dic. 2017 a las 19:32
  • 1
    Buenas amigo ya te mejore el ejemplo espero sea lo que buscas ahora al darle click aparece la imagen saludos. si te funciona dale como aprobada para que los demas programadores con el mismo problema solucionen rapido Commented el 22 dic. 2017 a las 20:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.