图片预览插件

效果预览图

引入JS CSS

 <link rel="stylesheet" th:href="@{plugins/PreviewUrl/photo.css}">
<!--图片预览-->
<script type="text/javascript" th:src="@{/plugins/PreviewUrl/jquery.rotate.min.js}"></script>
<script type="text/javascript" th:src="@{/plugins/PreviewUrl/photo.js}"></script>

JS代码

#在图片加载完之后，调用此方法即可
viewPic()
//图片预览
function viewPic() {
    $('[data-magnify]').Magnify({
        Toolbar: [
            'prev',
            'next',
            'rotateLeft',
            'rotateRight',
            'zoomIn',
            'actualSize',
            'zoomOut'
        ],
        keyboard: true,
        draggable: true,
        movable: true,
        modalSize: [100, 500]
    });
}