How to pass image,title and description to Bootstrap Modal popup?

Question

How i can pass image,title and description to bootstrap modal? when one image link click the modal open with that image title and description. my code is:

<?php                     
$result = mysql_query("SELECT * FROM project");

           $file_path = 'admin1\projectimages/';


while($post=mysql_fetch_array($result)){    
$id=$post['id'];
$ptitle=$post['Title'];
$image=$post['Image'];
$des=$post ['Description'];

$src = $file_path . $post['Image'];
echo'<li class="col-md-4 col-sm-6"><a href="#modal" class="fa" data-toggle="modal"  data-placement="right"><h4 class="project_heading">'.$ptitle.'</h4></a>
                    <a href="#modal" class="fa ok " data-toggle="modal"  data-target="#modal" data-placement="right"><img src='.$src.' style="width:250px; border:1px solid red;"></a></li>';}
?>

Modal Code:

<div class=" modal fade bs-example-modal-lg"  role="dialog"  id="modal" aria-hidden="true" data-keyboard="true" data-backdrop="static" tabindex="-1">
    <a href="#modal" class="fa fa-times cls-pop" data-dismiss="modal" id="thanks" ></a>
    <div class="modal-dialog modal-lg clearfix">
      <div class="modal-content pop-up">
<h3 >Title</h3>
               <div class="clearfix">
            <div>
              <img src="   "   style="width:99%; border:1px solid red;">
              <p></p><p ></p>
<p></p></div>

        </div>


      </div>
    </div>
  </div>

Answer 1

You can pass data from PHP to HTML by using echo .

So here: <h3 >Title</h3>

you would put: <h3><?PHP echo $ptitle; ?></h3> <h3><?PHP echo $ptitle; ?></h3>

The shorter notation for this is <?= $ptitle; ?> <?= $ptitle; ?>

It will work just fine as long as 1) your HTML is working and 2) your variables are getting populated.

Answer 2

Set image src in tag

<li>
 <a href="#modal" class="fa open_model" data-toggle="modal"  data-placement="right"><h4 class="project_heading" data-imgsrc="'.$src.'" data-desc="'.$ptitle.'">'.$ptitle.'</h4>
</a>
<a href="#modal" class="fa ok open_model" data-toggle="modal"  data-target="#modal" data-placement="right" data-imgsrc="'.$src.'" data-desc="'.$ptitle.'">

In your model html

<div class="modal-content pop-up">
 <h3>Title</h3>
 <div class="clearfix">
 <div>
  <img id="model_img" src="" style="width:99%; border:1px solid red;">
  <p></p><p ></p><p></p>
 </div>

When you click on the link set the image src and description to model set in your js file

$(document).on("click", ".open_model", function () {
     var imgSrc = $(this).data('imgsrc');
     var desc = $(this).data('desc');
     $(".modal-content #model_img").attr('src',imgSrc);
});

If you set it well than it will works