我一直坚持简洁的原则，代码越少越好，一行解决的绝不用两行
但没有这方面的知识，只能百度，然后多个方案比较，在实现功能的前提下，选择代码简洁明了能看懂的。

页面的宽度有限制，所以有些大的图片就会被缩小，图片上面的字就看不清，默认情况下，你能看清下面图上的字吗？
zoomin.png

所以就需要放大的功能了。我们的需求是：那么遵循简洁的原则，图片默认是不带链接的（带链接的意义是什么？），内容中的图片有大有小，需要实现没有被缩小的图片不管，被缩小的图片则可以点击放大。就是这个简单的功能，百度了一圈，看了各种lightbox的实现方法，都是太复杂，需要图片被链接，图片里还要加data-xxxxx属性，都不能满足要求，所以想直接通过jquery完成缩放的，但是不会写，弄了半天就是写成这样的：

$(document).ready(function(){
    $('img').each(function(){
        var screenImage = $(this);
        var theImage = new Image();
        theImage.src = screenImage.attr('src');
        var imageWidth = theImage.width;
        var imageHeight = theImage.height;
        if($(this).width() < imageWidth ){
            $(this).click(function(){
                $(this).toggleClass('min');
            });
        }
    });
});

功能可以实现了，就是判断图片如果比本身实际尺寸小，就点击增加class min，然后通过css控制图片显示位置和大小，但是有问题，图片原来占的位置就没了，页面就变了。
继续搜索其他插件，就找到了这个插件：

/**
* Zoomify
* A jQuery plugin for simple lightboxes with zoom effect.
* http://indrimuska.github.io/zoomify
*
* (c) 2015 Indri Muska - MIT
*/

js代码5K，css只有1K，不是嫌文件大，是代码少，我还能看懂就是最好。
载入js，css，修改上面的js代码，效果满意，只需三步：
1.载入js文件，这是我的文件，你可以换成自己的。

<script src="https://static.wenshi.tech/assets/js/zoomify.js"></script>

2.加入配置文件，我这里设置的选择器是img，所有的<img src="都会被加入判断，根据需要修改，也可以把这段加入上面的js文件内。

$(document).ready(function(){
    $('img').each(function(){
        var screenImage = $(this);
        var theImage = new Image();
        theImage.src = screenImage.attr('src');
        var imageWidth = theImage.width;
        var imageHeight = theImage.height;
        if($(this).width() < imageWidth ){
                $(this).zoomify();
        }
    });
});

3.加入css样式

.zoomify { cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in; }
.zoomify.zoomed { cursor: -webkit-zoom-out; cursor: zoom-out; padding: 0; margin: 0; border: none; border-radius: 0; box-shadow: none; position: relative; z-index: 1501; }
.zoomify-shadow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; z-index: 1500; background: rgba(0, 0, 0 , .3); opacity: 0; }
.zoomify-shadow.zoomed { opacity: 1; cursor: pointer; cursor: -webkit-zoom-out; cursor: zoom-out; }

4.大功告成。

感谢http://www.jq22.com/jquery-info9102 提供插件信息