Question

            <div class="row mt-xlg">
            <h5 class="text-semibold text-uppercase mt-lg">Timeline Photos</h5>
            <?php 
             $query1="SELECT * FROM user_photos_offline  WHERE ssmid='$ssmid' AND status='1' ORDER BY date_uploaded DESC";
             $sql=mysql_query($query1); 
             $count=mysql_num_rows($sql);   
             $results=array();
             while($row=mysql_fetch_assoc($sql)){
            // $results[]=$row['image'];
            ?>
        <div class="col-md-3">


            <img src="upload_images/<?php echo $row['image']?>" class="img-responsive" id='image' alt="" style='height:200px;' data-toggle="modal" data-target="#largeModal">
            <!--Here i am got all images from the database-->
            <!--For example i got total 10 images from database-->
            <!--For example i am clicking the 3rd image of the tatal 10 images-->


            <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true" style="display: none;">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="largeModalLabel">Original Image</h4>
                        </div>
                        <div class="modal-body">
                            <img src="img/girl.png" class="img-responsive" id='image' alt="" style='height:400px;width:100%'>
                                <!--From here i want show only 3rd image of the tatal 10 images-->
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <?php
    }
?>
</div>

我从10张图片中获取数据库，如果我点击第3张图片意味着，我只想显示第三张图片，我不知道这个问题的代码，任何人都知道的意思是告诉我的朋友

Answer 1

您必须在页面末尾添加1个模态（for循环的一侧）并添加列表中的每个图像而不使用模态：

<img src="upload_images/<?php echo $row['image']?>" class="img-responsive"  alt="" onclick="showImg('upload_images/<?php echo $row['image']?>')">

然后你需要一个java脚本剪辑代码：

function showImg(url)
{
   //load your image
   $('.modal-body img').attr('src',url);
   //show modal
   $('#largeModal').modal();
}

我希望这可以帮到你

如何以模态显示一个图像

1 个答案: