超级好用的图片插件viewer.js的简单应用(实现图片预览) - jQuery版本

欢迎访问的个人博客：

示例博客

新版博客

下载地址

 

1、引入js、css 

<link rel="stylesheet" type="text/css" href="/static/viewerjs-master/dist/viewer.min.css">
<script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/static/viewerjs-master/dist/viewer.min.js"></script>
<script type="text/javascript" src="/static/jquery-viewer-master/dist/jquery-viewer.min.js"></script>

2、html

<ul id="images">
        <!--多图模式 置顶设计-->
        <li>
            {% for blog in blog_list %}
                <h3 class="blogtitle"><span style="color: #ff585b;">【精】</span><a href="/Blog/article/{{ blog.id}}" target="_blank">{{ blog.title }}</a></h3><span class="bplist"><a><img class="firstimg" src="/media/images/blog{{ blog.id }}pic1.jpg" alt=""></a><a><img src="/media/images/blog{{ blog.id }}pic2.jpg" alt=""></a><a><img src="/media/images/blog{{ blog.id }}pic3.jpg" alt=""> </a><a><img src="/media/images/blog{{ blog.id }}pic4.jpg" alt=""> </a></span>
                <p class="blogtext">{{ blog.body|slice:"150"|safe }}...</p><p class="bloginfo"><i class="avatar"><img src="/static/images/myhead.jpg"></i><span>{{ blog.authorname }}</span><span>{{ blog.timestamp }}</span><span>【<a href="/Blog/article/{{ blog.id}}" target="_blank">{{ blog.all_comments.count }}评论</a>】</span><span>{{ blog.views }}阅读</span><span>{{ blog.greats }}赞</span></p>
                <br></br>
                <script type="text/javascript">
		            $(document).ready(function () {
    	            	$('.bplist').viewer({
                    		navbar: false,
                    		button: true,
                    		toolbar: true,
                    		title: false
    	            	});
		            });
	            </script>
            {% endfor %}
        </li>
</ul>

 这里图片用了

class = 'blist'

toolbar开启

toolbar:true

效果如下：