0

Estoy intentando crear una pagina web y me estoy encontrando con algún problema.

Mediante classes de he mostrado una imagen y un texto en la pagina principal, ahora necesito que al pinchar en la foto me lleve a otra pagina donde mostrar la información pero no se como hacerlo para no tener que crear una pagina diferente en cada imagen.

<section class="cap_anadido">
        <div> <?php foreach ($series as $serie ) { ?>
            <figure>
                <div class="imagen">
                    <a href="#"><img src="<?php echo $serie['imagen'] ?>" title="" alt=""></a>
                </div>
                <figcaption>
                    <h3><a href="#"><?php echo $serie['nombre'] ?></a></h3>
                </figcaption>
            </figure>
            <?php } ?>
            <div class="reset"></div>
        </div>
    </section>

Así pinto la imagen y el texto, luego tengo otro archivo html donde quiero pintar la información. No he hecho nada mas porque no se por donde empezar a hacer la redirección

3
  • Hola Hailey, puedes editar la pregunta para añadir el codigo html y php actual, asi como lo que has probado para redireccionar? asi sobre ese codigo podemos decirte que tienes mal o como mejorarlo ^^ Un saludo
    – lois6b
    el 4 may. 2017 a las 10:05
  • Podrias guardar las variables de la imagen en $_SESSION y pasarlas a un html donde pongas la información por medio de las variables. No me queda muy claro lo que quieres hacer, pero si es pasar información de una pagina a otra esta es una solución. el 4 may. 2017 a las 10:34
  • lo que intento hacer es una pagina para ver series, entonces lo que quiero hacer es que cuando pincho en la imagen o cuando me salen los resultados por el buscador me vaya a esa pagina donde aparece la información de esa serie
    – HaileyThc
    el 4 may. 2017 a las 10:37

2 respuestas 2

1

Puedes pasar por parámetro en la URL el id de la serie de cada imagen, por ejemplo

www.mipaginaweb.com/info.php?id_serie=1

Y luego recoger ese valor por $_REQUEST['id_serie'] y enlazarlo a tu query de BBDD. Si lo pones en tu bucle cada enlace tendría un id de serie distinto e iría a una página diferente sin crear un archivo por cada serie, solo te hace falta un parámetro para cambiar de información, y te quedaría así:

<section class="cap_anadido">
        <div> <?php foreach ($series as $serie ) { ?>
            <figure>
                <div class="imagen">
                    <a href="info.php?id_serie=<?php echo $serie['id']; ?>"><img src="<?php echo $serie['imagen'] ?>" title="" alt=""></a>
                </div>
                <figcaption>
                    <h3><a href="info.php?id_serie=<?php echo $serie['id']; ?><?php echo $serie['nombre'] ?></a></h3>
                </figcaption>
            </figure>
            <?php } ?>
            <div class="reset"></div>
        </div>
    </section>
0

Para que redireccionar si puedes ocupar un modal?

Para hacer esto, ya que estaremos por el lado del cliente simplemente, deberemos ocupar javascript o jquery, y por sentido práctico que da la herramienta bootstrap.

//Javascript
function abrirModal(objeto, detalleImg){
  $(".modal-body").html($(objeto).html() + "<br> " + $("."+detalleImg).html());
}
/*CSS*/
p{
  display: none;
}
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
	<head>
	  <title>Ejemplo</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<div class="container">
		  <h2>Ejemplo Modal</h2>

		  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal" onclick="abrirModal(this, 'detalleImg1')">
	  			<img src="https://www.w3schools.com/html/img_html5_html5.gif">
	  			<p class="detalleImg1">Este es el detalle de HTML5</p>
		  </button>

		  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal" onclick="abrirModal(this, 'detalleImg2')">
	  			<img src="https://d21ii91i3y6o6h.cloudfront.net/gallery_images/from_proof/2236/large/1413860642/javascript.png">
	  			<p class="detalleImg2">Este es el detalle de Javascript</p>
		  </button>

		  <!-- Modal -->
		  <div class="modal fade" id="miModal" role="dialog">
		    <div class="modal-dialog">
		    
		      <!-- Modal content-->
		      <div class="modal-content">
		        <div class="modal-header">
		          <button type="button" class="close" data-dismiss="modal">&times;</button>
		          <h4 class="modal-title">Detalle Imagen</h4>
		        </div>
		        <div class="modal-body">
		          
		        </div>
		        <div class="modal-footer">
		          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        </div>
		      </div>
		    </div>
		  </div>
		</div>
    
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
	</body>
</html>

Hay varias formas de jugar con javascript o jquery por el lado del cliente.

Te dejo las referencias para que puedas estudiarlas si gustas

Bootstrap - JQuery

NOTA:

Puedes hacer llamada ajax si necesitas que la imagen traiga mas información de forma asincrona, vale decir, que pinches, esta cargue y devuelva el resultado sin necesidad de que salgas de la pagina.

Dejo documentación de ello si necesitas

Ajax - Ajax-Jquery

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.