Redirect page by clicking on image

Question

Redirect page by clicking on image

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am trying to create a web page and I am encountering some problem.

Through classes in php I've shown an image and a text on the main page, now I need to click on the photo to take me to another page where I can show the information but I do not know how to do it so I do not have to create a different page in each image.

<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>

So I paint the image and the text, then I have another html file where I want to paint the information. I have not done anything else because I do not know where to start doing the redirection

mysql html php

asked by HaileyThc 04.05.2017 в 12:04

source

2 answers

Detect duplicate records in MySQL Fragments with Navigation Drawer

score 0 · Answer 1

To redirect if you can occupy a modal?

To do this, since we will be on the client side simply, we will have to occupy javascript or jquery , and for practicality that gives the tool 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>

There are several ways to play with javascript or jquery on the client side.

I leave the references so you can study them if you like

Bootstrap - JQuery

NOTE:

You can call ajax if you need the image to bring more information asynchronously, that is, click, load and return the result without having to leave the page.

I leave documentation of it if you need

Ajax - Ajax-Jquery

score 0 · Answer 2

You can pass in the URL the parameter of the series of each image, for example

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

And then collect that value for $ _REQUEST ['id_serie'] and link it to your DB query. If you put it in your loop each link would have a different serial id and go to a different page without creating a file for each series, you just need a parameter to change information, and you would stay like this:

<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>