jquery weui 图片浏览器Photo Browser
jquery weui 图片浏览器Photo Browser 如何使用?
对应组件地址:http://jqweui.com/extends#swiper
先说说业务场景:类似朋友圈这样的布局效果,点击小图可以浏览大图,并支持大图左右切换,效果图如下(加了滚动加载更多的操作在里面):
重点说明:该引入的js和swiper.js 都需要引入进去
<script src="../../res/js/jquery-2.1.4.js"></script>
<script src="../../res/js/jquery-weui.js"></script>
<script src="../../res/js/swiper.js"></script>
图片绑定的调用函数:用了es6的模板字符串的语法,很强大的``;
html += `<img class="list-img" onclick="showBigImg('${posterList.pictures}',${k})" src="${strImg}" style="height: 80px;">`;
下面进入主题:
function showBigImg(list,index) {
imgList = list.split(',');//list是一个图片url的字符串,以‘,’分隔的,这里把它转换成数组对象
console.log('array',Array.isArray(imgList));
//$.photoBrowser({items: imgList}).open(1);
//pb1.items = imgList;
//pb1.open();
$.photoBrowser({
items: imgList, //赋值
initIndex: index, //当前点击的图片下标
onSlideChange: function(index) {
console.log(this, index);
}, onOpen: function() {
console.log("onOpen", this);
},
onClose: function() {
console.log("onClose", this);
}
}).open();//这里一定要这样调用一下 }
方案二:这样调用也是ok
function showBigImg(list,index) {
imgList = list.split(',');
console.log('array',Array.isArray(imgList));
$.photoBrowser({items: imgList}).open(index); }
遇到的问题:
如果是小图会出现下面的效果:
解决方案:解决方案的来源:https://github.com/lihongxun945/jquery-weui/issues/169
.weui-photo-browser-modal .photo-container { justify-content: center; }
补充说明:
来自作者:Implementsrt
onOpen:function(){$(this.modal).css('z-index',6666); }
.weui-photo-browser-modal .photo-container img {
max-height: 100%;
}
jquery weui 图片浏览器Photo Browser的更多相关文章
- jq weui 图片浏览器Photo Browser 第一次点击任意图片总是显示第一张
第一次做这个图片浏览器的时候遇到一个问题,如共有6张图片,每次进入页面时,第一次点击,无论去点击6张图片的哪一张初始化显示的都是第一张图片.后面的每次点击都没有问题的. for(let i = 0;i ...
- iOS 新浪微博-5.3 首页微博列表_集成图片浏览器
实际上,我们可以使用李明杰在教程里集成的MJPhotoBrowser,地址: http://code4app.com/ios/快速集成图片浏览器/525e06116803fa7b0a000001 使用 ...
- [翻译] AGPhotoBrowser 好用的图片浏览器
AGPhotoBrowser 好用的图片浏览器 https://github.com/andreagiavatto/AGPhotoBrowser A photo browser for iOS6 a ...
- jQuery实现图片预览
摘自:http://www.cnblogs.com/leejersey/p/3660202.html JS代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月2 ...
- 纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等
在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先看一看效果图: 该图片浏览器实现的功能如下: 1. 鼠标滚 ...
- jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
- jquery实现图片预加载
使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...
- 基于jQuery的图片相册滑出放大插件
今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...
- 快速集成图片浏览器快速集成图片浏览器->MJPhotoBrowser的使用
介绍: 一个比较完整的图片浏览器,高仿了新浪微博的图片浏览效果,功能包括:下载浏览互联网图片,点击缩略图全屏显示图片.当加载较大图片时会出现圆形进度条,滑动浏览所有图片.保存图片到本地相册.GIF图片 ...
随机推荐
- Tensorflow细节-P80-深度神经网络
1.本节多为复习内容,从以下图片可见一般: 2.学会使用 from numpy.random import RandomState 然后 rdm = RandomState(1) dataset_si ...
- learning java AWT 布局管理器BorderLayout
BorderLayout 将容器分为EAST, SOUTH, WEST,NORTH,CENTER五个区域. public class BorderLayoutTest { public static ...
- npm 删除指定的某个包以及再次安装
npm uninstall xxxx --save-dev //删除包及删除配置项 npm install xxx@version //安装指定版本 npm install //覆盖
- C++问题--Reis连接redisContext *pRedisContext = redisConnectWithTimeout("127.0.0.1", 6379, tv);pRedisContext->errstr返回错误磁盘空间不足
一.问题 使用C++连接Redis的时候出错,错误String为磁盘空间不足,连接代码如下: //reids默认监听端口6387 ; struct timeval tv; tv.tv_sec = iT ...
- 如何在Processing中用鼠标获取RGB颜色数值
要做一个抠图应用,所以随手做了个鼠标取色,代码如下: void mousePressed(){ int imgC = get(mouseX,mouseY); int R = (imgC >> ...
- localstorage 必知必会
做项目中发现localstorage在不同的域名下是不能相互访问的,于是找到了以下这篇文章,对localStorage做一个深入的了解 HTML API localstorage在浏览器的API有两个 ...
- 【caffe Layer】代码中文注释
src/caffe/proto/caffe.proto 中LayerParameter部分 // NOTE // Update the next available ID when you add a ...
- SOA面向服务体系架构
SOA概念 1.什么是SOA 面向服务的体系结构(Service-Oriented Architecture,SOA)是一个组件模型. 它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的 ...
- 覆盖elementui样式
前台以表格形式展示后台数据,图片或视频点击后弹出框播放,用el-dialog实现. 希望播放视频的时候不显示dialog的背景那些. 尝试 scoped 无果 <style lang=" ...
- html5中progress/meter元素
html5中progress/meter元素 一.总结 一句话总结: progress元素:用来建立一个进度条 meter元素的作用:用来建立一个度量条,用来表示度量衡的评定 <progress ...