phpフォームのデータを軽量ブートストラップモデルでクリックしながら軽く表示する方法

Question

データベースからデータ（テキストと画像）を取得するPHPとHTMLコードがあります。私はそれで完璧です。今、イメージをクリックすると、モデル（ブートストラップ・ライトボックス）でさらに詳細を開いて開く必要があります。ここに私のPHPコードがあります：

<div class="row menu-container"> 
     <?php 
      $categoryId = 1; 
      $sql = "SELECT * FROM `products_table` where `cat_id` = '$categoryId' ORDER BY `id` "; 
      $result = mysql_query($sql) or die('couln not select query'); 
      $i=1; 
      while($row= mysql_fetch_array($result)){ 
      $pro_id=$row['id'];   
     ?> 
       <form id="form1<?=$pro_id?>" action ="#" method="post"> 
          <div class="col-xs-12 col-sm-6 col-md-4 catBox <?php echo " ". 'right-side-border-'.$i;?> " > 
           <a href="#" class="mainCatName" style="border:none;" data-featherlight="#my-model"> 
            <div id="imgProDetail" class="img-responsive imgProDetail" style="display:block;"> 
             <div class="proImg;"> 
              <img src="img/product/<?=$row['imgurl']?>" class="img-responsive cat-img;" style="margin:0 auto;" title="<?=$row['id']?>" >  
             </div> 
             <div class="proName"> 
              <h3 style="text-align:center; border:none" class="sub-cat-name"><?=strtoupper($row['name'])?> </h3> 
             </div>        
            </div> 
           </a>      
          </div>      
       </form> 
      <?php $i++;?> 
     <?php }; ?> 
     </div> 

私のモデルは以下のとおりです。

<style> .lightbox { display: none; } </style> 

<div id="my-model" class="col-md-12 col-sm-12 col-xs-12 lightbox" width="500px" height="400px" > 
     <div class="col-md-6 col-sm-6 col-xs-12 pro_name"> product name goes here </div> 
     <div class="col-md-6 col-sm-6 col-xs-12 pro_des"> Description here </div> 
     <div class="col-md-6 col-sm-6 col-xs-12 pro_price"> price goes here </div> 
     <div class="col-md-6 col-sm-6 col-xs-12 pro_img"> Image goes here </div> 
</div> 

ここをクリックすると、このモデルですべての画像/データの詳細を開きます。例えば、image1をクリックしてから、image1のみの詳細を取得し、それをこのモードで表示するなどします。

Answer 1

diffメソッドでこれを実現できます。それらの1つは次のとおりです。

<a class="link" href="javascript:void(0)" custom_attr1="val1" custom_attr2="val2"><img src="....."/> 

イメージに関連付けられた値を保持するために2つのカスタム属性が使用されています。必要な数だけ使用することができます。これらの値を取得してポップアップに表示すると、次のように表示されます。

$('.link').click(function(){ 
    var val1 = $(this).attr('custom_attr1'); 
    var val2 = $(this).attr('custom_attr2'); 

    // now use it as per your requirement 
});