Bootstrap 3 open an Image in a modal?

Question

I am making a table where a user has to click the image to view it in a modal, I am following the instructions here Bootstrap open image in modal because we have the same case, and on JSFiddle, his code works fine, but to me, it doesnt work, My code is like this:

<div class="box">
                            <div class="box-header">
                                <h3 class="box-title">Products Table</h3>                                    
                            </div><!-- /.box-header -->
                            <div class="box-body table-responsive">
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Brand Name</th>
                                    <th>Description</th>
                                    <th>Amount</th>
                                    <th>Stocks</th>
                                    <th>Expiry Date</th>
                                    <th>Image</th>
                                    <th>Action</th>
                                </tr>
                                    </thead>

                                    <tbody>
                                <?php
                                $query = mysql_query("select * from product,product_brand where product_brand.product_brand_id = product.product_brand_id") or die(mysql_error());
                                while ($row = mysql_fetch_array($query)) {
                                    $user_id = $row['product_id'];
                                    ?>
                                    <tr class="warning">
                                        <td><?php echo $row['product_name']; ?></td> 
                                        <td><?php echo $row['product_brand_name']; ?></td> 
                                        <td><?php echo $row['product_description']; ?></td> 
                                        <td><?php echo $row['product_price']; ?></td> 
                                        <td><?php echo $row['product_stock']; ?></td> 
                                        <td><?php echo   $row['product_exdate']; ?></td> 
                                        <td><a href="#" id="pop">
 <img id="imageresource" src="<?php echo $row['prod_image']; ?>" style="width: 400px; height: 264px;">
 Click to Enlarge  </a>

On the image I decided to put the modal, so when it's click, the image is inlarge in the modal, I also wanted the image to be hidden, how should i do it? now, this code is for the modal and the script,which is sad to say, it doesnt seem to appear?:

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"><i class="fa fa-plus"></i> View</h4>
                </div>



                    <div class="modal-body">

                        <img src="" id="imagepreview" style="width: 400px; height: 264px;" >


                    </div>
                    <div class="modal-footer clearfix">

                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Discard</button>


                    </div>

                    </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
 <script>
 $("#pop").on("click", function() {
 $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
 $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function <img src=""  id="imagepreview" style="width: 400px; height: 264px;" >
 });
  </script>