当单击图像时，如何制作图像以在CodeIgniter视图中的Bootstrap中放大

Question

<h5>
<a href="<?php echo base_url(); ?>/vendor/home/projects" >Back to Projects</a>
<h5>
<div>
<div class="container">
<div class="row">
<?php
foreach ($projects as $value) {
?>
<?php                                                  
$project_images =  json_decode($value['project_gallery'],true);
$i=0; 
foreach ($project_images as $project_image_value) {
$i++;
?> 
<div class="col-md-2">
<img src="<?= base_url() ?>assets/uploads/projects/<?=$project_image_value['fname']?>" onclick="openModal(<?= $i?>)"   class="img-thumbnail img-responsive " />
<div><?=$project_image_value['title']?></div>
</div>                                                                                               <?php
}
?>
<?php
}
?>
</div>
</div>

这是我的CodeIgniter视图显示图像。我该如何应用灯箱，以便在单击图像时，仅应将图像缩放

Answer 1

有很多易于使用的jQuery插件可用于图像缩放功能。使用以下任何一个：

那里的使用很简单：

$(document).ready(function(){
  $('a.photo').zoom({url: 'photo-big.jpg'});
});

参考

更多参考：

https://i-like-robots.github.io/easyzoom/

http://www.jqueryscript.net/tags.php?/image zoom/

http://www.jqueryscript.net/demo/simple-jquery-magnifying-glass-image-image-image-image-image-plugin-magnify-js/