要在页面需要加载的JS文件:

<script src="../js/libs/weui.min.js"></script>

可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/

要先给图片创建一个节点:

var imgDom = $("<img class='weui-jiaj-img' />");

因为接口中取到的图片会是很多,因此,在循环图片数据的时候,要给每个图片添加一个动态的class

for(var i = 0; i < data.length; i++){
imgDom.addClass('img-' + i);
.....
}

给每个节点的src属性添加获致到的img地址

imgDom.attr('src', problem_img);

最后把这个节点添加到页面的某个div下面

seePanel.find('.answer-img').append(imgDom);

点击图片时,需要先找到这个图片的节点,使用weui.gallery(img地址),弹出图片并预览

var imgDiv = seePanel.find('.answer-img');
imgDiv.find('.img-' + i).on('click',function(){
weui.gallery(problem_img);
$('.weui-gallery__del').remove();
})

如果你认为此时,预览图片OK的话,就太早了,

weui.gallery(imgUrl);

weui.gallery()方法在预览图片时,会把当前imgUrl地址写入span内部,必须要清除span内部的这个url才算完。
最后应该要加上这句:
//点击图片预览这是我写的,这个不要动
$('.js_container').on('click','.weui-jiaj-doctor-img',function(){
//取item属性出来
var item = $(this).attr('img-item');
if(item) item = JSON.parse(item); var imgUrl = item.imgUrl;
weui.gallery(imgUrl);
$('.weui-gallery__del').remove();
//去掉span中的字符串,要加上这句
$('.weui-gallery span').html('');
})
 

巧用weui.gallery(),点击图片后预览图片的更多相关文章

  1. JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  2. html选择图片后预览,保存并上传

    html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...

  3. js实现FileUpload选择图片后预览功能

    当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...

  4. input file选择图片后 预览

    很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...

  5. file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度

    /** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...

  6. type="file" 选择图片后预览

    function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...

  7. Android:UI 沉浸式体验,适合第一屏的引导图片、预览图片。

    链接:http://www.cnblogs.com/liushilin/p/5799381.html

  8. 微信小程序:点击预览图片

    在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...

  9. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

随机推荐

  1. DynamicResource与StaticResource的区别

    原文:DynamicResource与StaticResource的区别 2008-06-20 12:16:12 静态资源在第一次编译后即确定其对象或值,之后不能对其进行修改.动态资源则是在运行时决定 ...

  2. 造出最好的 CMS 轮子

    zerojs! 造出最好的 CMS 轮子 zerojs是一个基于nodejs.angularjs.git的CMS.在它之上可以继续开发出博客.论坛.wiki等类似的内容管理型系统. 拥抱开发者和社区 ...

  3. 项目管理和版本跟踪——Redmine和SVN的结合

    项目管理和版本跟踪——Redmine和SVN的结合 分类: Redmine2009-06-01 10:38 565人阅读 评论(0) 收藏 举报 svn项目管理tortoisesvn数据库railsr ...

  4. Javascript多线程引擎(五)

    Javascript多线程引擎(五)之异常处理 C语言没有提供一个像Java一样的异常处理机制, 这就带来了一个问题, 对于一个子函数中发生异常后, 需要在父函数调用子函数的位置进行Check, 如果 ...

  5. MVC 在控制器中获取某个视图动态的HTML代码

    ASP.NET MVC 在控制器中获取某个视图动态的HTML代码   如果我们需要动态的用AJAX从服务器端获取HTML代码,拼接字符串是一种不好的方式,所以我们将HTML代码写在cshtml文件中, ...

  6. cvs vss svn和git比较

    cvs vss svn和git比较 特征 CVS Git Mercurial Subversion 是否原子提交 CVS: 没有. CVS提交不是原子的 Git: 是的. 提交都是原子的 Mercur ...

  7. [置顶] Hibernate从入门到精通(十)多对多单向关联映射

    上一篇文章Hibernate从入门到精通(九)一对多双向关联映射中我们讲解了一下关于一对多关联映射的相关内容,这次我们继续多对多单向关联映射. 多对多单向关联映射 在讲解多对多单向关联映射之前,首先看 ...

  8. 【译】Objectively Speaking 2: A Crash Course in Objective-C for iOS 6

    In this Objective-C tutorial, you will create a simple movie quotes quiz app. Along the way, you’ll ...

  9. [Usaco2008 Dec]Hay For Sale 购买干草[01背包水题]

    Description     约翰遭受了重大的损失:蟑螂吃掉了他所有的干草,留下一群饥饿的牛.他乘着容量为C(1≤C≤50000)个单位的马车,去顿因家买一些干草.  顿因有H(1≤H≤5000)包 ...

  10. Moq & RhinoMocks

    Moq & RhinoMocks 使用Mock对象进行测试一般都会有以下三个关键步骤: 使用接口来描述需要测试的对象 为实际的产品代码实现这个接口 以测试为目的,在Mock对象中实现这个接口 ...