单击图像时如何使图像在codeigniter视图中放大引导程序？

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

Reference

更多参考：

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

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

http://www.jqueryscript.net/demo/Simple-jQuery-Magnifying-Glass-Image-Zoom-Plugin-magnify-js/