要在页面需要加载的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. 常用在网站上的30个jQuery插件

    jQuery插件是网页设计师最喜欢的.从图像滑块,图像画廊和导航插件,它们是如此众多,如此多样,如此惊人的和互动可以制作美化网站.在本文的在30个插件中,我认为必须在网站建设时用到.当然你现在可能不善 ...

  2. CSS知识点:font小细节

    font是用来设置网页字体属性的关键字,使用频率非常高,大家也比较熟悉.它有两种写法,一种是简写,一种分开写. 简写--font:italic bold 12px/20px arial,sans-se ...

  3. PHP+MYSQL分页原理

    1.SQL语句中的limit用法 2.学习分页的一种公式 3.parse_url()解析URL函数 parse_url() 是将URL解析成有固定键值的数组的函数 4.$_SERVER["R ...

  4. Android L新控件RecyclerView简介

    Android L是android进化史上的里程碑,尽管还没有正式发布4.5或者5.0,但预览版也同样精彩. 这篇文章只是另外一篇博客的总结性翻译,能够读懂原文的,可以点开这个链接去阅读精彩的原文:h ...

  5. iOS基础 - 控制器

    一.当两个控制器互为父子关系的时候,它们的view一般也是互为父子关系 比如想添加A控制器的view到B控制器的view上,就应该让A控制器成为B控制器的子控制器,而B控制器就称为A控制器的父控制器 ...

  6. Apache HttpServer Installing the apache2.2 service <OS 5>拒绝访问. :Failed to open the WinNT service manager

    Installing the apache2.2 service<OS 5>拒绝访问.  :Failed to open the WinNT service manager 只需要于管理员 ...

  7. Nvelocity模板引擎开发网页

    在ASP.NET网站开发中,我们要做许多的网页,如果多个网页的内容框架有些重复使用,我们用NVelocity模板引擎,就可以把相同的部分html代码单独放在一个文件中就行了,当要使用的时候,只需使用# ...

  8. 使用数据流的方式 将数据导出到指定形式到Word中 (不使用插件,很简单的一种)

    protected void Page_Load(object sender, EventArgs e) { string fileName = "路政许可事项办理流转情况汇总统计" ...

  9. FastDFS接口API文档说明

    FastDFS接口API文档说明 时间:2012-03-17 来源:R9IT 作者:R9传奇 一.命令行的上传: 上传命令1. /usr/local/bin/fdfs_upload_file conf ...

  10. 解决WP7的32位图像渐变色色阶问题

    做游戏时发现背景图色阶现象严重,想了想会不会是显卡色深问题,于是加了下面一段代码,结果解决这个问题. graphics.PreferredBackBufferFormat = Microsoft.Xn ...