Ventana emergente al pinchar imagen Estoy levantando un sitio centro cultural y de investigación quienes publican una revista mensual, la cual queremos publicar en el sitio.
Mi idea es utilizar un widget con una imagen de la portada que al presionarlo despliegue una ventana con las opciones de visualización (pdf, ver las notas individualmente, números anteriores, etc), he revisado varios plugins pero no terminan de convencerme, por lo que he hecho esta ventana emergente con la ayuda de una herramienta online (Bootstrap + Codelab).
Ya habilite la zona de widget donde ira y ya esta la imagen de la portada, pero por ahora solo la linkeo a una nueva pagina (que no es lo que quiero, pues lo veo poco atractivo).
Dejo el código de esto y una imagen.
Lo que tengo en mente es muy similar a lo que hacen en este sitio: elciudadano.cl en la sección edición impresa. (el único sitio donde encontré algo como lo que quiero)
El tema es que no se como hacer que "conversen" ambas cosas,
como hago que al presionar la imagen despliegue esta ventana?
(SI alguien conoce un plugin que haga esto de forma mas amigable con wordpress acepto todas las sugerencias)
PS: imagen y títulos referenciales
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Publicacion Periodico</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Titulo de Publicación</h4>
</div>
<div class="modal-body">
<TABLE >
<TR>
<TD>
<img class="alignleft size-full" src="http://estaticos.elperiodico.com/resources/jpg/9/4/1338757142249.jpg" alt="portada" width="250" height="300" />
</TD>
<TD>
Sub titulo o descripcion principal
<p class="text-warning">
<small>Bajada de titulo o descripción extensa de la publicación</small></p>
</TD>
</TR>
</TABLE>
</div>
<div class="modal-footer">
<a href="http://www.google.cl"> <button type="button" class="btn btn-primary">Papel Digital</button></a>
<a href="http://www.google.cl"> <button type="button" class="btn btn-primary">Ver PDF</button></a>
<a href="http://www.google.cl"> <button type="button" class="btn btn-primary">Articulos en Linea</button></a>
<a href="http://www.google.cl"> <button type="button" class="btn btn-danger">Numeros Anteriores</button></a>
</div>
</div>
</div>
</div>
</body>
</html>
