I want To Display Front/Side View of a Product in modal form, to do this I have a foreign key in my table. This is my code that I try from now.My problem is on how to display foreign key which is Prod_Dim_Image column at class = 'product_gallery' :
<?php
include('connection.php');
$posts = array();
$res = $conn->query("SELECT product.Product_ID,product_name,product_image,product_description,Quantity,Price,prod_dimension_image.Dim_ID,Prod_Dim_Image from product INNER JOIN
prod_dimension_image ON product.Product_ID=prod_dimension_image.Product_ID ");
while($row = $res->fetch_assoc())
{
$prod_id = $row['Product_ID'];
?>
<div class="col-sm-4 col-xs-9">
<form action="cus_order.php" method="POST">
<div class="panel panel-primary text-center">
<div class="panel-heading">
<h4><?php echo $row['product_name']; ?></h4>
</div>
<div class="panel-body">
<div>
<a data-toggle="modal" href="#updateimage<?php echo $row['Product_ID']; ?>">
<img src="../img/products/mouse/<?php echo $row['product_image']; ?>" class="img-rounded" alt="<?php echo $row['product_name']; ?>" width="230" height="200"/>
</a>
</div>
<h4>₱ <?php echo $row['Price']; ?></h4>
<button type="submit" name="orderproduct" class="btn btn-warning">Add to Cart</button>
</div>
</div>
</form>
</div>
<div class="modal fade" id="updateimage<?php echo $row['Product_ID'];?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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 pull-left"><?php echo $row['product_name']; ?></h4>
</div>
<div class="modal-body">
<section>
<div class="row">
<div class="col-sm-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="" class="active"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="../img/products/mouse/<?php echo $row['product_image']; ?>" class="img-rounded" alt="<?php echo $row['product_name']; ?>" width="550" height="450"/>
</div>
</div>
</div>
<div class="product_gallery">
<ul class="list-inline">
<li>
<a data-target="#img1" data-toggle="carousel-indicators">
<img src="../img/products/mouse/<?php echo $row['Prod_Dim_Image']; ?>" alt="..." class="img-rounded" alt="Cinque Terre" width="70" height="100" />
</a>
</li>
</ul>
</div>
</div><!-- col-sm-6 -->
<div class="col-sm-6 ">
<h2><?php echo $row['product_name']; ?></h2>
<p><?php echo $row['product_description']; ?></p> <br>
<br />
<div class="">
<div class="product_price">
<h1 class="price">₱ <?php echo $row['Price']; ?></h1>
</div>
</div>
<div class="">
<button type="submit" name="orderproduct" class="btn btn-warning btn-lg">Add to Cart</button>
<button type="submit" name="wishproduct" class="btn btn-warning btn-lg">Add to Wishlist</button>
</div>
</div>
</div>
</section>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
}
?>
