0

el problema es que tengo ese codigo y trabaja bien con etiquetas de imagen de parrafo y encabezado pero con enlace no me carga solo queda en vacio...

	.img-contenedor { 	
		 	position: fixed; 	
		 	font-family: Arial, Helvetica, sans-serif; 	
		 	top: 0; 	
		 	right: 0; 	
		 	bottom: 0; 	
		 	left: 0; 	
		 	background: rgba(0,0,0,0.8); 	
		 	z-index: 99999; 	
		 	opacity:0; 	
		 	-webkit-transition: opacity 400ms ease-in; 	
		 	-moz-transition: opacity 400ms ease-in; 	
		 	transition: opacity 400ms ease-in; 	
		 	pointer-events: none; 
		 	} 
		 	
		 	.img-contenedor:target { 	
		 	opacity:1; 	
		 	pointer-events: auto; 
		 	} 
		 	
		 	.img-contenedor > div { 	
		 	width: 90%; 
		 	heigth: auto;	
		 	position: relative; 	
		 	margin: 30% auto; 	
		 	padding: 0px; 	
		 	border-radius: 10px; 	
		 	background: #fff; 	
		 	background: -moz-linear-gradient(#fff, #999); 	
		 	background: -webkit-linear-gradient(#fff, #999); 	
		 	background: -o-linear-gradient(#fff, #999); 
		 	-webkit-transition: opacity 400ms ease-in; 
		 	-moz-transition: opacity 400ms ease-in; 
		 	transition: opacity 400ms ease-in; 
		 	}
		 	.imagenropa a {
		 	width: 100%;
		 	position: relative;
		 	-webkit-border-radius: 9px; 	
		 	-moz-border-radius: 9px; 	
		 	border-radius: 9px; 	
		 	}
		 	.close { 	
		 	background: #606061; 	
		 	color: #FFFFFF; 	
		 	line-height: 25px; 	
		 	position: absolute; 	
		 	right: -12px; 	
		 	text-align: center; 	
		 	top: -10px; 	
		 	width: 24px; 	
		 	text-decoration: none; 	
		 	font-weight: bold; 	
		 	-webkit-border-radius: 15px; 	
		 	-moz-border-radius: 15px; 	
		 	border-radius: 15px; 	
		 	-moz-box-shadow: 1px 1px 3px #000; 	
		 	-webkit-box-shadow: 1px 1px 3px #000; 	
		 	box-shadow: 1px 1px 3px #000; 
		 	} 
		 	
		 	.close:hover { 
		 	background: #00d9ff; }
<a href="#imgZoom">
			<img src="link de mi sexi botón">
			</a>
			<div id="imgZoom" class="img-contenedor"> 	
			<div>		
			<a href="#close" title="Close" class="close">X</a> 		
			<div class="imagenropa"> 
			<a href="link que quiero quese abra pero no puedo porque tengo 8 dias apenas aprendiendo html"></a>
			 </div>
			</div> </div>

2
  • Hola, me imagino que lo que tienes en tu etiqueta <a> es una imagen y no se muestra. prueba a cambiar la etiqueta <a> por <img>.
    – Csharls
    Commented el 18 oct. 2018 a las 5:27
  • Hola fran si efectivamente el link es a una img pero el problema es que es una img con un peso de 5mb y son varias img entonces tendria una pagina de unos 500mb solo en pop ups y necesito que se abran como enlace para que se cargen hasta que el usuario le de click al vista previa es para una tienda y necesito que sea li mas rapido posible. @Csharls
    – Alst Adm
    Commented el 18 oct. 2018 a las 15:45

1 respuesta 1

2

Si estás trabajando con Bootstrap puedes usar modales, veo que lo que buscas es darle velocidad a tu página mostrando primero thumbnails y no llamar la imagen original sino hasta que el usuario lo solicite.

Puedes probar con el siguiente snippet, adaptándolo a tu código y necesidad.

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

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="container">

<div class="row">

<a href="#" data-toggle="modal" data-target=".pop-up-1">
<img src="http://i.imgur.com/YZ7AGyF.jpg" width="150" class="img-responsive img-rounded center-block" alt="">
</a>

<hr>

<!-- Thumbnail link for lion image -->
<a href="#" data-toggle="modal" data-target=".pop-up-2">
<img src="http://i.imgur.com/dtaHtds.jpg" width="150" class="img-responsive img-rounded center-block" alt="">
</a>


<!--  Modal content for the mixer image example -->
  <div class="modal fade pop-up-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myLargeModalLabel-1">Mixer Board</h4>
        </div>
        <div class="modal-body">
        <img src="http://i.imgur.com/YZ7AGyF.jpg.jpg" class="img-responsive img-rounded center-block" alt="">
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal mixer image -->
 
 <!--  Modal content for the lion image example -->
  <div class="modal fade pop-up-2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-2" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myLargeModalLabel-2">Lion</h4>
        </div>
        <div class="modal-body">
        <img src="http://i.imgur.com/kzGVqbd.jpg" class="img-responsive img-rounded center-block" alt="">
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal mixer image -->
  
    
</div> <!-- /.row -->
</div> <!-- /.container -->


Fuente

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.