Jquery to keep Height of Image / image container to same height height not working

Jquery to keep Height of Image / image container to same height height not working

Dear Sir

refer 


I want to keep the height of image part same  this webpage same

The jquery has adjusted the height of DIV (class='container1') perfectly  for all image on this page

this is because

  2. .container1 {
  3.    
  4.     height: 400px;    
  5.     overflow: hidden;
  6.     background: #fff;
  7.     margin: 10px;
  8. padding:10px;
  9.     text-align: center;
  10. vertical-align: middle;
  11.  
  12.  
  13. }

However i want name to be aligned properly ...this can happen 


html


  2. <div class="s-12 m-6 l-3" style="padding-top:10px; padding-left:20px;  padding-right:20px;"> 
  3.      
  4.                 <div class="container1" style="border:1px solid #CCC  ;" >
  5.   
  6.              <table width="70%" border="0" cellspacing="0" cellpadding="0" class="tblpart">
  7.   <tr>
  8.     <td align="center" class="imagepart" ><a href="<?php echo  $srows['bigwimage'];?>"    class="with-caption image-link"  title="<?php echo $srows['name'];?>"> <img src="<?php echo  $srows['smallwimage'];?>"  >
  9.     </a>
  10.     </td>
  11.   </tr>
  12.   <tr>
  13.     <td class="text22 namepart"><?php echo $srows['name'];?> </td>
  14.   </tr>
  15. </table>
  16.     
  17.                 
  18.       </div>
  19.        </div> 
    20.  



Jquery to keep height of container same

  1. <script type="text/javascript">
  2. $(document).ready(function() { 
  3.  
  4.  var maxHeight=0; 
  5. $('.imagepart').each(function() { 
  6.     maxHeight = Math.max(maxHeight, $(this).height()); 
  7.  
  8. }).height(maxHeight);
  9.  
  10. var maxHeight=0; 
  11. $('.namepart').each(function() { 
  12.     maxHeight = Math.max(maxHeight, $(this).height()); 
  13.  
  14. }).height(maxHeight);

  16. var maxHeight=0; 
  17. $('.tblpart').each(function() { 
  18.     maxHeight = Math.max(maxHeight, $(this).height()); 
  19.  
  20. }).height(maxHeight);

  22. var maxHeight=0; 
  23. $('.container1').each(function() { 
  24.     maxHeight = Math.max(maxHeight, $(this).height()); 
  25.  
  26. }).height(maxHeight+4);
  27. });
  28.   
  29. </script>  
I tried Developer tools : Console in chrome browser

I am getting following error

  1. product.php:1094 Uncaught TypeError: $(...).magnify is not a function