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

刚刚试了一下,两个问题都有了解决方案,写在这里吧,或许有人用得上:
1.图片弹出置顶
onOpen:function(){$(this.modal).css('z-index',6666); }
2.防止图片过长
.weui-photo-browser-modal .photo-container img {
max-height: 100%;
}

jquery weui 图片浏览器Photo Browser的更多相关文章

  1. jq weui 图片浏览器Photo Browser 第一次点击任意图片总是显示第一张

    第一次做这个图片浏览器的时候遇到一个问题,如共有6张图片,每次进入页面时,第一次点击,无论去点击6张图片的哪一张初始化显示的都是第一张图片.后面的每次点击都没有问题的. for(let i = 0;i ...

  2. iOS 新浪微博-5.3 首页微博列表_集成图片浏览器

    实际上,我们可以使用李明杰在教程里集成的MJPhotoBrowser,地址: http://code4app.com/ios/快速集成图片浏览器/525e06116803fa7b0a000001 使用 ...

  3. [翻译] AGPhotoBrowser 好用的图片浏览器

    AGPhotoBrowser  好用的图片浏览器 https://github.com/andreagiavatto/AGPhotoBrowser A photo browser for iOS6 a ...

  4. jQuery实现图片预览

    摘自:http://www.cnblogs.com/leejersey/p/3660202.html JS代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月2 ...

  5. 纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等

    在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先看一看效果图: 该图片浏览器实现的功能如下: 1. 鼠标滚 ...

  6. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  7. jquery实现图片预加载

    使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...

  8. 基于jQuery的图片相册滑出放大插件

    今天给大家带来一款基于jQuery的图片相册滑出放大插件.点击相册图片,展示该图片.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗..效 ...

  9. 快速集成图片浏览器快速集成图片浏览器->MJPhotoBrowser的使用

    介绍: 一个比较完整的图片浏览器,高仿了新浪微博的图片浏览效果,功能包括:下载浏览互联网图片,点击缩略图全屏显示图片.当加载较大图片时会出现圆形进度条,滑动浏览所有图片.保存图片到本地相册.GIF图片 ...

随机推荐

  1. Tensorflow细节-P80-深度神经网络

    1.本节多为复习内容,从以下图片可见一般: 2.学会使用 from numpy.random import RandomState 然后 rdm = RandomState(1) dataset_si ...

  2. learning java AWT 布局管理器BorderLayout

    BorderLayout 将容器分为EAST, SOUTH, WEST,NORTH,CENTER五个区域. public class BorderLayoutTest { public static ...

  3. npm 删除指定的某个包以及再次安装

    npm uninstall xxxx --save-dev //删除包及删除配置项 npm install xxx@version //安装指定版本 npm install //覆盖

  4. 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 ...

  5. 如何在Processing中用鼠标获取RGB颜色数值

    要做一个抠图应用,所以随手做了个鼠标取色,代码如下: void mousePressed(){ int imgC = get(mouseX,mouseY); int R = (imgC >> ...

  6. localstorage 必知必会

    做项目中发现localstorage在不同的域名下是不能相互访问的,于是找到了以下这篇文章,对localStorage做一个深入的了解 HTML API localstorage在浏览器的API有两个 ...

  7. 【caffe Layer】代码中文注释

    src/caffe/proto/caffe.proto 中LayerParameter部分 // NOTE // Update the next available ID when you add a ...

  8. SOA面向服务体系架构

    SOA概念 1.什么是SOA 面向服务的体系结构(Service-Oriented Architecture,SOA)是一个组件模型. 它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的 ...

  9. 覆盖elementui样式

    前台以表格形式展示后台数据,图片或视频点击后弹出框播放,用el-dialog实现. 希望播放视频的时候不显示dialog的背景那些. 尝试 scoped 无果 <style lang=" ...

  10. html5中progress/meter元素

    html5中progress/meter元素 一.总结 一句话总结: progress元素:用来建立一个进度条 meter元素的作用:用来建立一个度量条,用来表示度量衡的评定 <progress ...