title: Bootstrap 3 open an Image in a modal?
body: <p>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 <a href="https://stackoverflow.com/questions/25023199/bootstrap-open-image-in-modal">Bootstrap open image in modal</a> because we have the same case, and on JSFiddle, his code works fine, but to me, it doesnt work, My code is like this:</p>
  
  <pre><code>&lt;div class="box"&gt;
                              &lt;div class="box-header"&gt;
                                  &lt;h3 class="box-title"&gt;Products Table&lt;/h3&gt;                                    
                              &lt;/div&gt;&lt;!-- /.box-header --&gt;
                              &lt;div class="box-body table-responsive"&gt;
                                  &lt;table id="example1" class="table table-bordered table-striped"&gt;
                                      &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Name&lt;/th&gt;
                                      &lt;th&gt;Brand Name&lt;/th&gt;
                                      &lt;th&gt;Description&lt;/th&gt;
                                      &lt;th&gt;Amount&lt;/th&gt;
                                      &lt;th&gt;Stocks&lt;/th&gt;
                                      &lt;th&gt;Expiry Date&lt;/th&gt;
                                      &lt;th&gt;Image&lt;/th&gt;
                                      &lt;th&gt;Action&lt;/th&gt;
                                  &lt;/tr&gt;
                                      &lt;/thead&gt;
  
                                      &lt;tbody&gt;
                                  &lt;?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'];
                                      ?&gt;
                                      &lt;tr class="warning"&gt;
                                          &lt;td&gt;&lt;?php echo $row['product_name']; ?&gt;&lt;/td&gt; 
                                          &lt;td&gt;&lt;?php echo $row['product_brand_name']; ?&gt;&lt;/td&gt; 
                                          &lt;td&gt;&lt;?php echo $row['product_description']; ?&gt;&lt;/td&gt; 
                                          &lt;td&gt;&lt;?php echo $row['product_price']; ?&gt;&lt;/td&gt; 
                                          &lt;td&gt;&lt;?php echo $row['product_stock']; ?&gt;&lt;/td&gt; 
                                          &lt;td&gt;&lt;?php echo   $row['product_exdate']; ?&gt;&lt;/td&gt; 
                                          &lt;td&gt;&lt;a href="#" id="pop"&gt;
   &lt;img id="imageresource" src="&lt;?php echo $row['prod_image']; ?&gt;" style="width: 400px; height: 264px;"&gt;
   Click to Enlarge  &lt;/a&gt;
  </code></pre>
  
  <p>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?:</p>
  
  <pre><code>&lt;div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; View&lt;/h4&gt;
                  &lt;/div&gt;
  
  
  
                      &lt;div class="modal-body"&gt;
  
                          &lt;img src="" id="imagepreview" style="width: 400px; height: 264px;" &gt;
  
  
                      &lt;/div&gt;
                      &lt;div class="modal-footer clearfix"&gt;
  
                          &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt; Discard&lt;/button&gt;
  
  
                      &lt;/div&gt;
  
                      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
          &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;
   &lt;script&gt;
   $("#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 &lt;img src=""  id="imagepreview" style="width: 400px; height: 264px;" &gt;
   });
    &lt;/script&gt;
  </code></pre>