Question

我有小图片的图库，当用户点击图像缩略图打开模态时。我将图像存储在两个文件夹/uploads/中，其中是实际尺寸的图像，thumb是小图像。当模态打开时应该加载大图像而不是现在加载小图像。它们具有相同的名称，但在不同的页面中。这就是我加载图库的方式

<div class="container">
    <div class="row">

    <?php                            
    error_reporting(E_ALL); 
    ini_set('display_errors', 1);
    $pdo = Database::connect();
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    foreach($pdo->query("SELECT * FROM images ORDER BY image_id") as $row) {
        echo '<div class="col-lg-3 col-sm-4 col-6">
                <a href="#" title="Image 1">
                    <img src="uploads/thumb/'.$row['image_name'].'" class="thumbnail img-   responsive">
                </a>
              </div>';
    }                                      
    Database::disconnect();
    ?>       
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content"></div>
        </div>
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
                <h3 class="modal-title">Heading</h3>

        </div>
        <div class="modal-body"></div>
        <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
    </div>
    </div>
</div>
</div>

和javascript部分

$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});

Answer 1

$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);  
  //get the source of thumb image
    var image = $(this).attr("src");
    //remove thumb directory from image 
    var image = image.replace("thumb/","");

    // create html for modal body
    var html ='<img src="'+image+'" />';
    // add to the modal body.
    $('.modal-body').html(html);
$('#myModal').modal({show:true});
});

您没有在模态中提供真正的大图像路径。我希望这段代码可以帮到你。

在bootstrap模态窗口中加载不同的图像

1 个答案: