巧用weui.gallery(),点击图片后预览图片

要在页面需要加载的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(‘‘);
})
 
时间: 2024-10-14 00:02:43

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

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

html代码: <input type="file" id="file" style="display:none;"> <img src="" width="200px" height="200px" id="img-change"> <button id="btn">保存图片</button> js

单张图片在线预览+图片压缩

该方法未测试浏览器兼容性,仅在谷歌上进行过测试. 图片在线预览:一般思路是通过获取file上的绝对路径并将路径赋值给src实现在线预览功能,但现实中的浏览器,尤其是高版本浏览器由于用户安全性考虑,不会让开发者通过file获取到绝对路径,因此使用H5中的画板功能,将图片进行重绘后,得到base64编码的dataURL,再将这个地址赋值给src实现在线预览功能. 图片压缩原理:将大图根据预定尺寸进行尺寸修改. <!DOCTYPE html> <html lang="en"

2016/4/19 ①单个文件上传 ②上传图片后 预览图片

1,f1.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 作业:在网上找上传图片预览的代码 上传服务器 再预览--> <form action="f1chuli.php&q

webView图片点击可以实现预览效果

最近做项目遇到了webview加载后图片点击可以实现图片预览效果的需求. 如果要实现这个需求我们要保证webview和html是交互的否则我们加载的webview上面的图片是不能实现点击效果的.那么如何实现交互呢,其实很简单,我们只需要往调用的webview页面里加入一段js代码就可以了 一:我们创建一个js的方法: //创建JS - (NSString *)createJavaScript { NSString *js = @"var imgArray = document.getElemen

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

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

vue使用readAsDataURL实现选择图片文件后预览

vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容 方式引入vue文件 <script src="./vue.js"></script> 文件选择框,并添加change

plupload上传前预览图片

plupload预览图片有多种方法,主要由moxie的Image提供,Image的downsize.crop.embed都可用来预览图片 1.downsize 最开始做项目的时候,我用的就是downsize来做预览图片 downsize(opts) Downsizes the image to fit the specified width/height. If crop is supplied, image will be cropped to exact dimensions. Argume

模拟type=file;上传并预览图片

最近项目的会员中心,要做一个上传本地img并预览的效果.效果大概是这个样子.自己以前没做过:摸着石头过河总算完成了感觉有必要整理一下,写篇博客耍耍. 整体效果大概是这个样子的: 1.点击框框任何地方:弹出选择文件窗口: 2.选择后,再框框区域预览: 3.再次点击框框,更换图片. 下面说说整个实现的过程吧. html代码的结构大概是这样的.    <div class="imgitem secondImg">        <div class="u-add-

cropper.js实现图片裁剪预览并转换为base64发送至服务端。

一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时记得引入cropper.css 3. 此处后端使用的nodejs,不过不懂node的影响也不大. 二 . 图片裁剪并预览 1.首先利用cropper完成图片裁剪并预览: <input type="file" name="" id="imgBtn"