jquery - How to pass the image src to the bootstrap modal with javascript? - Stack Overflow

admin管理员组

文章数量:1395019

I have a while loop of images from my database. I get the src of the images using javascript. On click a modal must open with the image being clicked. My problem is that I can't pass the src of images to the modal to show the right image. As a matter of fact, I can't show any image at all. Here is my code. Thanks for the help.

<script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>

<?php
    $sql = "SELECT * FROM portfolio";
    $query = mysqli_query ($conn, $sql);
?>

<div class="col-md-12">
    <h1>Portfolio</h1>

    <table class="table">

        <?php while ($row = mysqli_fetch_assoc($query)) { ?>

            <tr>
                <td>
                    <br>
                        <a data-toggle="modal" data-target="#myModal1">
                            <img src="<?php echo $row ['pic']; ?>" width="200" height="150" class="getSrc">
                        </a>
                    <br><br>
                </td>
                <td>
                    <h4><a href="<?php echo $row ['link']; ?>" target="_blank"><?php echo $row ['projectName']; ?></a></h4>
                    <?php echo $row ['description']; ?><br><br>

                    <strong class="text-warning"><?php echo $row ['note']; ?></strong>
                </td>
            </tr>

        <?php } ?>

    </table>

</div>

<script type="text/javascript">
     $('.getSrc').click(function() {
        var src =$(this).attr('src');

        $('.showPic').attr('src') = src;
     });
</script>

<!-- MODAL --> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="col-md-12">

                <img src="" class="showPic">
            </div>
        </div> 
    </div>
</div>

I have a while loop of images from my database. I get the src of the images using javascript. On click a modal must open with the image being clicked. My problem is that I can't pass the src of images to the modal to show the right image. As a matter of fact, I can't show any image at all. Here is my code. Thanks for the help.

<script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>

<?php
    $sql = "SELECT * FROM portfolio";
    $query = mysqli_query ($conn, $sql);
?>

<div class="col-md-12">
    <h1>Portfolio</h1>

    <table class="table">

        <?php while ($row = mysqli_fetch_assoc($query)) { ?>

            <tr>
                <td>
                    <br>
                        <a data-toggle="modal" data-target="#myModal1">
                            <img src="<?php echo $row ['pic']; ?>" width="200" height="150" class="getSrc">
                        </a>
                    <br><br>
                </td>
                <td>
                    <h4><a href="<?php echo $row ['link']; ?>" target="_blank"><?php echo $row ['projectName']; ?></a></h4>
                    <?php echo $row ['description']; ?><br><br>

                    <strong class="text-warning"><?php echo $row ['note']; ?></strong>
                </td>
            </tr>

        <?php } ?>

    </table>

</div>

<script type="text/javascript">
     $('.getSrc').click(function() {
        var src =$(this).attr('src');

        $('.showPic').attr('src') = src;
     });
</script>

<!-- MODAL --> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="col-md-12">

                <img src="" class="showPic">
            </div>
        </div> 
    </div>
</div>

• javascript
• jquery
• html
• image
• twitter-bootstrap

Share Improve this question Follow edited Jun 27, 2014 at 4:29 dadalicious asked Jun 26, 2014 at 12:59 dadaliciousdadalicious 2111 silver badge33 bronze badges 1

• 2 Looks like you're calling the showPic() function, but I don't see where it is defined? – ryentzer Commented Jun 26, 2014 at 13:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The problem is on this line:

$('.showPic').attr('src') = src;

You can set the src like this:

$('.showPic').attr('src', src);

Here is a fiddle of how it should be: http://jsfiddle/ZU3xx/2/

This may help :

<table class="table">

<?php  $dynamic_id=""; 
       $temp_i = 1;  ?>

   <?php while ($row = mysqli_fetch_assoc($query)) {

    $dynamic_id = "#myModal" + $temp_i;

             ?>

      <tr>
        <td>
        <br>
        <a data-toggle="modal" data-target="<?php echo $dynamic_id; ?>">
                            <img src="<?php echo $row ['pic']; ?>" width="200" height="150" class="getSrc">
                        </a>
                    <br><br>
                </td>
                <td>
                    <h4><a href="<?php echo $row ['link']; ?>" target="_blank"><?php echo $row ['projectName']; ?></a></h4>
                    <?php echo $row ['description']; ?><br><br>

                    <strong class="text-warning"><?php echo $row ['note']; ?></strong>
                </td>
            </tr>

        <?php } ?>

    </table>

</div>



 <?php while ($row = mysqli_fetch_assoc($query)) {

              $dynamic_id = "#myModal" + $temp_i;

             ?>

<!-- <?php echo $dynamic_id ?>  --> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="<?php echo $dynamic_id ?>">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="col-md-12">
                <img src="<?php echo $row ['pic']; ?>" class="showPic">
            </div>
        </div> 
    </div>
</div>


<?php } ?>

本文标签： jqueryHow to pass the image src to the bootstrap modal with javascriptStack Overflow