Click the image and display in another page about it

Question

I need to click the image and link to another page based on the product that is clicked, my page always display the same product even when i click other products. Below is the code for the main page

        <?php  
    $query = "SELECT * FROM tbl_product ORDER BY id ASC"; //order by ID ascending order  
    $result = mysqli_query($connect, $query);  
    while($row = mysqli_fetch_array($result))  
    {  
    ?>
<div id="products" class="productsContainer">
    <div class="responsive">   <!-- OUTER BOX OF PRODUCT -->
        <div class="gallery"> <!-- INNER BOX FOR PRODUCT -->
                <a href="box.php?id=".$row['id']><img src="images/<?php echo $row["image"]; ?>" class="img-responsive" /></a><br /> <!-- IMAGE OF PRODUCTS -->
                <h4 class="text-info"><?php echo $row["name"]; ?></h4>  <!-- NAME OF PRODUCT -->
                <h4 class="text-danger">$ <?php echo $row["price"]; ?></h4>  <!-- PRODUCT PRICE -->
                <input type="text" name="quantity" id="quantity<?php echo $row["id"]; ?>" class="form-control" value="1" />  <!-- QUANTITY PRODUCT -->
                <input type="hidden" name="hidden_name" id="name<?php echo $row["id"]; ?>" value="<?php echo $row["name"]; ?>" />  <!-- NOT SHOWN -->
                <input type="hidden" name="hidden_price" id="price<?php echo $row["id"]; ?>" value="<?php echo $row["price"]; ?>" />  <!-- NOT SHOWN -->
                <input type="button" name="add_to_cart" id="<?php echo $row["id"]; ?>" style="margin-top:5px;" class="btn btn-warning form-control add_to_cart" value="Add to Cart" />  <!-- ADD TO CART BUTTON -->

        </div>  
    </div> 
</div>
    <?php  
        }  
    ?>

Here is another page code(when clicked into the product)

    <div class="containertype1">
                <div>
                <img id="mainImage" style="border:3px solid grey" 
     src="  images/005.jpg" height="500px" width="540x"/>
<br />

<div id="divId" onclick="changeImageOnClick(event)">
<?php

    echo "<img class='imgStyle' src='images/001.jpg' />";
    echo "<img class='imgStyle' src='images/002.jpg' />";
    echo "<img class='imgStyle' src='images/003.jpg' />";
    echo "<img class='imgStyle' src='images/004.jpg' />";
    echo "<img class='imgStyle' src='images/005.jpg' />";
?>
</div>
   <script type="text/javascript">

    var images = document.getElementById("divId")
                         .getElementsByTagName("img");

    for (var i = 0; i < images.length; i++)
    {
        images[i].onmouseover = function ()
        {
            this.style.cursor = 'hand';
            this.style.borderColor = 'red';
        }
        images[i].onmouseout = function ()
        {
            this.style.cursor = 'pointer';
            this.style.borderColor = 'grey';
        }
    }


    function changeImageOnClick(event)
    {
        event = event || window.event;
        var targetElement = event.target || event.srcElement;

        if (targetElement.tagName == "IMG")
        {
            mainImage.src = targetElement.getAttribute("src");
        }
    }

</script>
        </div>
</div>

Answer 1

The problem is that you forgot to use your opening PHP tag before attempting to write a PHP variable ($row['id']).

Consider the following:

<a href="box.php?id=".$row['id']>
    <img src="images/<?php echo $row["image"]; ?>" class="img-responsive" />
</a>

In the above, your link points to box.php?id=. You never actually open your PHP tag to reference $row['id']. When your HTML reaches the dot, it gets confused, as it is expecting an attribute for the <a> tag (like href).

To correct this, simply make sure to open (and close) the PHP tags, and echo out the $row['id'] in the following format:

<a href="box.php?id=<?php echo $row['id']; ?>">
    <img src="images/<?php echo $row["image"]; ?>" class="img-responsive" />
</a>