jQuery仿淘宝评论图片查看插件

所属分类:媒体-图片展示

 30268  330  查看评论 (5)
分享到微信朋友圈
X
jQuery仿淘宝评论图片查看插件 ie兼容7

一、引入jQuery和该插件<

<scriptt src="http://www.jq22.com/jquery/jquery-1.10.2.js"></scriptt> 
<scriptt src="js/commentImg.js"></scriptt></code>

二、html

<div class="tm-m-photos">
  	<ul class="tm-m-photos-thumb">
    	<li data-src="img/01.png"> <img src="img/01.png"> <b class="tm-photos-arrow"></b> </li>
    	<li data-src="img/02.png"> <img src="img/02.png"> <b class="tm-photos-arrow"></b> </li>
    	<li data-src="img/03.png"> <img src="img/03.png"> <b class="tm-photos-arrow"></b> </li>
    	<li data-src="img/04.png"> <img src="img/04.png"> <b class="tm-photos-arrow"></b> </li>
  	</ul>
  	<div class="tm-m-photo-viewer"> 
	  	<img src="img/01.png"> 
		<a class="tm-m-photo-viewer-navleft"><i></i></a> 
		<a class="tm-m-photo-viewer-navright"><i></i></a> 
	</div>
</div>

三、js

$(".tm-m-photos").commentImg({
    activeClass: 'tm-current', //缩略图当前状态class,默认'current'     
    nextButton: '.tm-m-photo-viewer-navright', //向后翻页按钮,默认'.next'    
    prevButton: '.tm-m-photo-viewer-navleft', //向前翻页按钮,默认'.prev'    
    imgNavBox: '.tm-m-photos-thumb', //缩略图容器,默认'.photos-thumb'    
    imgViewBox: '.tm-m-photo-viewer' //浏览图容器,默认'.photo-viewer' 
});
相关插件-图片展示

HTML5-CSS3图片过滤归类应用

通过点击不同类型图片按钮,可以选择展示不同类型的图片,共有三种展现方式,可以对不同图片进行归类
  图片展示
 33104  345

jQuery鼠标滚轮放大缩小查看图片(原创)

使用jquery实现点击放大图片之后,使用鼠标滚轮放大缩小图片,点击遮罩关闭图片
  图片展示
 58331  378

原生js图片查看插件(原创)

原生js实现点击图片放大预览
  图片展示
 31702  346

jQuery图片放大插件

jQuery点击图片放大,适应移动端和PC端
  图片展示
 49257  343

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    as87330 0
    2019/7/13 15:35:28
    有开源的代码吗 回复
    メ阿い╃→康 0
    2019/1/8 10:33:43
    慕玲 0
    2019/1/4 11:08:28
    有一个问题,Safari下切换着图片可以正常放大图片,但是如果只是点击同一张图片,只能第一次展示,因为commentImg.js代码里面的的img的src没有变,就没法触发onload方法,所以要把img.onload前面声明img的代码,放到onload的方法里面。也不知道我这样描述是否正确,凑合着看看吧!-- 小白 回复
    - 0
    2018/7/4 15:30:01
    数据动态加载后,初始化插件,为什么有时候查看图片显示正常,有时候不执行呢 回复
    殊途同归。 0
    2018/3/31 17:01:49
    哇 刚想要这种 就找到了 谢谢!! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复