在自舉模態窗口中加載不同的圖像

我有一個小圖像的畫廊，當用戶點擊縮略圖打開模式的圖像。我有圖像存儲在兩個文件夾/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}); 
});

來源

2015-03-13 Select

$('.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}); 
});

您還沒有給出該模式真正的大圖片的路徑。我希望這段代碼能幫助你。

來源

2015-03-13 15:22:21 siddhesh

嗨，謝謝你的回答，併爲我的延誤感到抱歉。我對'js'不太好，不知道把你的代碼放在哪裏。你可以幫我嗎？ – Select 2015-03-16 06:14:58

在JavaScript文件中的縮略圖點擊事件使用此代碼 – siddhesh 2015-03-16 15:29:41

但是，我需要刪除我的現有的這是在我的問題上面..或替換一些線？ – Select 2015-03-17 07:09:34

在自舉模態窗口中加載不同的圖像

回答

相關問題