要在页面需要加载的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. 功能和形式的反思sql声明 一个

    日前必须使用sql语句来查询数据库 但每次你不想写一个数据库中读取所以查了下反射 我想用反映一个实体的所有属性,然后,基于属性的查询和分配值 首先,须要一个实体类才干反射出数据库相应的字段, 可是開始 ...

  2. hudson任务配置说明

    hudson任务配置说明 Discard Old Builds:hudson默认保留过去的构建,勾选此选项,则可以设置构建记录的有效期: (帮助:这里控制着您想要在hudson所在的磁盘把构建记录存储 ...

  3. 【转】Android的Merge讲解与实例

    原文:http://blog.sina.com.cn/s/blog_62f987620100sf13.html 单独将<merge />标签做个介绍,是因为它在优化UI结构时起到很重要的作 ...

  4. RESTful API Develop

    yii2 RESTful API Develop   参考文档:http://www.yiiframework.com/doc-2.0/guide-rest.html 以 DB 中的 news 表为例 ...

  5. IOS UI 第五篇:基本UI

    添加个导航栏:         Xib1 *xib1 = [[Xib1 alloc] initWithNibName:@"Xib1" bundle:nil];    UINavig ...

  6. Asp.Net中使用Couchbase——Memcached缓存使用篇

    Asp.Net中使用Couchbase——Memcached缓存使用篇 前言 在上一篇Asp.Net中使用Couchbase——Memcached缓存入门篇http://www.cnblogs.com ...

  7. Trie字典树算法

    特性 Trie树属于树形结构,查询效率比红黑树和哈希表都要快.假设有这么一种应用场景:有若干个英文单词,需要快速查找某个单词是否存在于字典中.使用Trie时先从根节点开始查找,直至匹配到给出字符串的最 ...

  8. ASP.NET交互Rest服务接口(Jquery的Get与Post方式)

    ASP.NET交互Rest服务接口(Jquery的Get与Post方式) 本文将通过一个简单的实例,介绍如何创建一个Rest服务接口,以及通过JQUERY去对它进行调用;主要采取两种方式分别为Get跟 ...

  9. 护眼纯黑色VS2012配色方案

    这些天由于公司项目比较忙,所以天天盯着电脑8小时,而且我的开发工具VS2012是白色背景的所以每天下班都搞的眼睛巨疼. 今天在网上找到一个很好的配色方案,所以有同样烦恼的童鞋们可以试试哦! 展示下效果 ...

  10. fiddle2 代理HTTPS请求无效?解决方法。

    fiddle2: 捕获的https请求结尾跟着443,是因为没有开启HTTPS捕获. 解决方案,开启HTTPS捕获:         然后你就看到能正常捕获HTTPS请求了: