要在页面需要加载的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. HDU 4812 D Tree 树分区+逆+hash新位置

    意甲冠军: 特定n点树 K 以下n号码是正确的点 以下n-1行给出了树的侧. 问: 所以,如果有在正确的道路点图的路径 % mod  = K 如果输出路径的两端存在. 多条路径则输出字典序最小的一条. ...

  2. INSTEAD OF触发器

    Oracle触发器5(INSTEAD OF触发器) 前提:对于简单的视图,可以直接进行DML操作,但是对于复杂视图,不允许直接执行DML操作,当视图符合以下任何一种情况都不可以: 具有集合操作符(UN ...

  3. REST 测试工具

    两款 REST 测试工具 用CURL命令行测试REST API 无疑是低效率的,这里把最近使用的两款 Chrome 插件总结下 POSTMAN 简单易用 REST Console 功能强大 使用的话用 ...

  4. MVC为什么不再需要注册通配符(*.*)了?

    MVC为什么不再需要注册通配符(*.*)了? 文章内容 很多教程里都提到了,在部署MVC程序的时候要配置通配符映射(或者是*.mvc)到aspnet_ISPAI.dll上,在.NET4.0之前确实应该 ...

  5. 自定义MVP .net框架

      一个自定义MVP .net框架 AngleFrame   摘要:本篇是本人在完成.net平台下一个项目时,对于MVP框架引发的一些思考,以及开发了一个小型的配置型框架,名字叫作AngleFrame ...

  6. Effective C++(15) 在资源管理类中提供对原始资源的访问

      问题聚焦:     资源管理类是为了对抗资源泄露.     如果一些函数需要访问原始资源,资源管理类应该怎么做呢?        关于资源管理的概念总是显得那么的高大上,其实只是抽象一点. 下面用 ...

  7. 常用排序算法的python实现和性能分析

    常用排序算法的python实现和性能分析 一年一度的换工作高峰又到了,HR大概每天都塞几份简历过来,基本上一天安排两个面试的话,当天就只能加班干活了.趁着面试别人的机会,自己也把一些基础算法和一些面试 ...

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

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

  9. Windows Server 服务器安全配置

    Windows Server 服务器安全配置 好吧,我标题党了.我只了解一些基本的安全配置.如果你是大湿,请绕道或者给予我严厉的批评让我进步谢谢. 编辑这篇文章用的编辑器编辑的,当我单击查看的时候发现 ...

  10. Android:开发环境搭建、移植

    一:搭建Android安卓开发环境 准备文件 1.eclipse-SDK-4.2-win32.zip 2.JDK(Java Development Kit) 3.ADT,安卓开发的一个eclipse的 ...