移动端安卓和IOS开发框架Framework7教程-图片浏览器

移动开发 2018-05-09 23:22:27 阅读次数: 3

图片浏览器是一个像iOS图片浏览器一样用来展示图片的组件。图片可以被缩放或者平移 (可选)。

图片浏览器使用 幻灯片组件来展现图片。

创建一个图片浏览器实例

图片浏览器只需通过javaScript就可以被创建和初始化。我们需要使用App封装好的方法：

myApp.photoBrowser(parameters) -  带参初始化图片浏览器

  • parameters - object - 图片浏览器参数对象（必选）。
  • 该方法返回图片浏览器实例引用

示例：

  1. var myPhotoBrowser = app.photoBrowser({
  2.     zoom: 400,
  3.     photos: ['path/to/image1.jpg', 'path/to/image2.jpg']
  4. });   
  5. myPhotoBrowser.open(); // 打开图片浏览器
复制

实例预览

图片浏览器参数

所有可用参数列表：

参数（Parameter） 类型（Type） 默认（Default） 描述（Description） 懒加载 模板 回调函数 Swiper Callbacks
photos array [] 照片的url数组或者是包含“url”（或者“html”）和“caption”属性的对象数组.
initialSlide number 0 初始化时展示的图片序号
spaceBetween number 20 图片展现间隔距离（px）
speed number 300 切换图片的时间间隔（ms）
zoom boolean true 是否启用图片的缩放和平移功能
maxZoom number 3 最大缩放倍数
minZoom number 1 最小缩放倍数
exposition boolean true 图片点击时是否启用浏览模式
expositionHideCaptions boolean false 是否在浏览模式中隐藏标题
swipeToClose boolean true 是否可以通过上下滑动的方式来关闭图片浏览器
view View instance undefined 如果想用page形式打开，则需要指定一个初始化的View实例，如果不指定，将默认在Main View中打开
type string 'standalone' 定义图片浏览器的打开方式，可选参数有'standalone'（打开时将有一个自定义过渡效果的遮罩层），'popup'（打开一个popup），’page‘（将被放置于View中，作为一个新页面加载）
loop boolean false Set to "true" to enable continuous loop mode
theme string 'light' 图片浏览器颜色主题，可以为'light'或者'dark'
captionsTheme string   标题的颜色主题，可以为light'或者'dark'。默认与"theme"相同
navbar boolean true 是否生成图片浏览器的导航栏
toolbar boolean true 是否生成图片浏览器的工具栏
backLinkText string 'Close' 图片浏览器的导航栏中返回链接的文本
ofText string 'of' 图片的序号和总数之间的分割词，例如："3 of 5"
lazyLoading boolean false 设置为true启用懒加载
lazyLoadingInPrevNext boolean false 设置为 true，则会懒加载最近的图片（上一个和下一个）
lazyLoadingOnTransitionStart boolean false 默认情况下，图片浏览器在动画结束后开始懒加载。如果你希望在动画开始的时候就开始懒加载，你可以设置这个参数。
template string *见下面 图片浏览器的HTML模版
navbarTemplate string *见下面 导航栏的HTML模版
toolbarTemplate string *见下面 工具栏的HTML模版
photoTemplate string *见下面 单独图片元素的HTML模版
photoLazyTemplate string *Look below Single lazy loading photo element HTML template
objectTemplate string *见下面 单独对象元素的HTML模版
captionTemplate string *见下面 单独标题元素的HTML模版
onOpen(photobrowser) function   回调函数，当图片浏览器被打开的时候执行
onClose(photobrowser) function   回调函数，当图片浏览器被关闭的时候执行
onSwipeToClose(photobrowser) function   回调函数，当图片浏览器通过上下滑动的形式关闭时执行
onSlideChangeStart(swiper) function   回调函数，当图片浏览器向前或者向后切换图片开始的时候执行，接受幻灯片的实例作为参数
onSlideChangeEnd(swiper) function    
onTransitionStart(swiper) function   Callback function, will be executed in the beginning of transition. Receives swiper instance as an argument.
onTransitionEnd(swiper) function   Callback function, will be executed after transition. Receives slider instance as an argument.
onClick(swiper, event) function   回调函数，当图片浏览器被点击/触碰的时候延迟300ms执行，接受幻灯片的实例和touchend事件两个对象作为参数
onTap(swiper, event) function   回调函数，当图片浏览器被点击/触碰的时候执行，接受幻灯片的实例和touchend事件两个对象作为参数
onDoubleTap(swiper, event) function   回调函数，当图片浏览器被连续两次触碰的时候执行，接受幻灯片的实例和touchend事件两个对象作为参数
onLazyImageLoad(swiper, slide, image) function   Callback function, will be executed when Photo Browser begins to load lazy loading photo
onLazyImageReady(swiper, slide, image) function   Callback function, will be executed after lazy loading photo will be loaded

图片浏览器方法及属性

当我们初始化图片浏览器之后，我们将会得到它的实例引用（比如myPhotoBrowser）， 并且包括很多有用的方法和属性：

属性 方法
myPhotoBrowser.swiper 包含一个Swiper 实例，这个实例上有所有可用的Swiper 方法和属性
myPhotoBrowser.container Dom7形式的图片浏览器HTML容器
myPhotoBrowser.exposed 图片浏览器是否处于浏览模式
myPhotoBrowser.activeSlideIndex 当前可见的幻灯片的序号
myPhotoBrowser.params 传入的初始化参数对象
myPhotoBrowser.open(index); 根据“index”参数的值打开图片浏览器，如果“index”参数没有被指定，则打开最后关闭的图片
myPhotoBrowser.close(); 关闭图片浏览器
myPhotoBrowser.toggleZoom(); 切换当前幻灯片的缩放形式
myPhotoBrowser.toggleExposition(); 切换浏览模式
myPhotoBrowser.enableExposition(); 启用浏览模式
myPhotoBrowser.disableExposition(); 禁用浏览模式

图片数组

当我们初始化图片浏览器的时候，需要传递一个数组，包括图片或者是视频的相关信息，让我们看看这个数组的各种变形：

  1. //如果我们只需要图片的话，可以传递图片地址数组
  2. var photos = [
  3.     'image1.jpg',
  4.     'image2.jpg',
  5.     'image3.jpg',
  6.     'image4.jpg',
  7. ];
  8.  
  9. //如如果我们需要标题的话，则需要包装成一个含有caption属性的对象:
  10. var photos = [
  11.     {
  12.         url: 'image1.jpg',
  13.         caption: 'Caption 1'
  14.     },
  15.     {
  16.         url: 'image2.jpg',
  17.         caption: 'Caption 1'
  18.     },
  19.     // 这个是没有标题的
  20.     {
  21.         url: 'image3.jpg',
  22.     },
  23.     // 也可以不使用对象形式
  24.     'image4.jpg'
  25. ];
  26.  
  27. //如果我们需要使用视频，则把包含视频元素的HTML片段或者是iframe放到“html”属性里：
  28. var photos = [
  29.     {
  30.         url: 'image1.jpg',
  31.         caption: 'Caption 1'
  32.     },
  33.     // 带标题的视频
  34.     {
  35.         html: '<video src="video1.mp4"></video>',
  36.         caption: 'Video Caption'
  37.     },
  38.     // 这个是没有标题的iframe
  39.     {
  40.         html: '<iframe src="..."></iframe>',
  41.     },
  42.     // 这个是没有标题的视频标签
  43.     '<video src="video2.mp4"></video>'
  44. ];
复制
 

示例

  1. <div class="page-content">
  2.   <div class="content-block-title">Light Theme</div>
  3.   <div class="content-block row">
  4.     <div class="col-33"><a href="#" class="button pb-standalone">Standalone</a></div>
  5.     <div class="col-33"><a href="#" class="button pb-popup">Popup</a></div>
  6.     <div class="col-33"><a href="#" class="button pb-page">Page</a></div>
  7.   </div>
  8.   <div class="content-block-title">Dark Theme</div>
  9.   <div class="content-block row">
  10.     <div class="col-50"><a href="#" class="button pb-standalone-dark">Standalone</a></div>
  11.     <div class="col-50"><a href="#" class="button pb-popup-dark">Popup</a></div>
  12.   </div>
  13. </div>
复制

 

  1.           var myApp = new Framework7(); 
  2.  
  3. var $$ = Dom7;
  4.  
  5. var mainView = myApp.addView('.view-main', {
  6.   dynamicNavbar: true
  7. });
  8.  
  9. /*=== 默认为 standalone ===*/
  10. var myPhotoBrowserStandalone = myApp.photoBrowser({
  11.     photos : [
  12.         'http://lorempixel.com/1024/1024/sports/1/',
  13.         'http://lorempixel.com/1024/1024/sports/2/',
  14.         'http://lorempixel.com/1024/1024/sports/3/',
  15.     ]
  16. });
  17. //点击时打开图片浏览器
  18. $$('.pb-standalone').on('click', function () {
  19.     myPhotoBrowserStandalone.open();
  20. });
  21.  
  22. /*=== Popup ===*/
  23. var myPhotoBrowserPopup = myApp.photoBrowser({
  24.     photos : [
  25.         'http://lorempixel.com/1024/1024/sports/1/',
  26.         'http://lorempixel.com/1024/1024/sports/2/',
  27.         'http://lorempixel.com/1024/1024/sports/3/',
  28.     ],
  29.     type: 'popup'
  30. });
  31. $$('.pb-popup').on('click', function () {
  32.     myPhotoBrowserPopup.open();
  33. });
  34.  
  35. /*=== 作为Page ===*/
  36. var myPhotoBrowserPage = myApp.photoBrowser({
  37.     photos : [
  38.         'http://lorempixel.com/1024/1024/sports/1/',
  39.         'http://lorempixel.com/1024/1024/sports/2/',
  40.         'http://lorempixel.com/1024/1024/sports/3/',
  41.     ],
  42.     type: 'page',
  43.     backLinkText: 'Back'
  44. });
  45. $$('.pb-page').on('click', function () {
  46.     myPhotoBrowserPage.open();
  47. });
  48.  
  49. /*=== Standalone Dark ===*/
  50. var myPhotoBrowserDark = myApp.photoBrowser({
  51.     photos : [
  52.         'http://lorempixel.com/1024/1024/sports/1/',
  53.         'http://lorempixel.com/1024/1024/sports/2/',
  54.         'http://lorempixel.com/1024/1024/sports/3/',
  55.     ],
  56.     theme: 'dark'
  57. });
  58. $$('.pb-standalone-dark').on('click', function () {
  59.     myPhotoBrowserDark.open();
  60. });
  61.  
  62. /*=== Popup Dark ===*/
  63. var myPhotoBrowserPopupDark = myApp.photoBrowser({
  64.     photos : [
  65.         'http://lorempixel.com/1024/1024/sports/1/',
  66.         'http://lorempixel.com/1024/1024/sports/2/',
  67.         'http://lorempixel.com/1024/1024/sports/3/',
  68.     ],
  69.     theme: 'dark',
  70.     type: 'popup'
  71. });
  72. $$('.pb-popup-dark').on('click', function () {
  73.     myPhotoBrowserPopupDark.open();
  74. }); 
  75.  
  76. /*=== 有标题 ===*/
  77. var myPhotoBrowserPopupDark = myApp.photoBrowser({
  78.     photos : [
  79.         {
  80.             url: 'http://lorempixel.com/1024/1024/sports/1/',
  81.             caption: 'Caption 1 Text'
  82.         },
  83.         {
  84.             url: 'http://lorempixel.com/1024/1024/sports/2/',
  85.             caption: 'Second Caption Text'
  86.         },
  87.         // 这个没有标题
  88.         {
  89.             url: 'http://lorempixel.com/1024/1024/sports/3/',
  90.         },
  91.     ],
  92.     theme: 'dark',
  93.     type: 'standalone'
  94. });
  95. $$('.pb-standalone-captions').on('click', function () {
  96.     myPhotoBrowserPopupDark.open();
  97. });
  98.  
  99. /*=== 有视频 ===*/
  100. var myPhotoBrowserPopupDark = myApp.photoBrowser({
  101.     photos : [
  102.         {
  103.             html: '<iframe src="//www.youtube.com/embed/lmc21V-zBq0?list=PLpj0FBQgLGEr3mtZ5BTwtmSwF1dkPrPRM" frameborder="0" allowfullscreen></iframe>',
  104.             caption: 'Woodkid - Run Boy Run (Official HD Video)'
  105.         },
  106.         {
  107.             url: 'http://lorempixel.com/1024/1024/sports/2/',
  108.             caption: 'Second Caption Text'
  109.         },
  110.         {
  111.             url: 'http://lorempixel.com/1024/1024/sports/3/',
  112.         },
  113.     ],
  114.     theme: 'dark',
  115.     type: 'standalone'
  116. });
  117. $$('.pb-standalone-video').on('click', function () {
  118.     myPhotoBrowserPopupDark.open();
  119. });
复制

 

图片浏览器模版

让我们来看看图片浏览器可用于初始化时的模版

图片浏览器主模版

您可以通过template参数传递定制的HTML模板。这是一个示例：

  1. <div class="photo-browser photo-browser-{{theme}}">
  2.     <div class="view navbar-fixed toolbar-fixed">
  3.         {{#unless material}}{{#if navbar}}
  4.         navbarTemplate
  5.         {{/if}}{{/unless}}
  6.         <div class="page no-toolbar {{#unless navbar}}no-navbar{{/unless}} toolbar-fixed navbar-fixed" data-page="photo-browser-slides">
  7.             {{#if material}}{{#if navbar}}
  8.             navbarTemplate
  9.             {{/if}}{{/if}}
  10.             {{#if toolbar}}
  11.             toolbarTemplate
  12.             {{/if}}
  13.             <div class="photo-browser-captions photo-browser-captions-{{js "this.captionsTheme || this.theme"}}">
  14.                 {{#each photos}}{{#if caption}}
  15.                 captionTemplate
  16.                 {{/if}}{{/each}}
  17.             </div>
  18.             <div class="photo-browser-swiper-container swiper-container">
  19.                 <div class="photo-browser-swiper-wrapper swiper-wrapper">
  20.                     {{#each photos}}
  21.                     {{#js_compare "this.html || ((typeof this === \'string\' || this instanceof String) && (this.indexOf(\'<\') >= 0 || this.indexOf(\'>\') >= 0))"}}
  22.                         objectTemplate
  23.                     {{else}}
  24.                         {{#if @root.lazyLoading}}
  25.                         photoLazyTemplate
  26.                         {{else}}
  27.                         photoTemplate
  28.                         {{/if}}
  29.                     {{/js_compare}}
  30.                     {{/each}}
  31.                 </div>
  32.             </div>
  33.         </div>
  34.     </div>
  35. </div>
复制

导航栏模版

这是导航栏的示例模版，你可以通过navbarTemplate参数传递：

  1. <div class="navbar">
  2.     <div class="navbar-inner">
  3.         <div class="left sliding">
  4.             <a href="#" class="link close-popup photo-browser-close-link {{#unless backLinkText}}icon-only{{/unless}} {{js "this.type === \'page\' ? \'back\' : \'\'"}}">
  5.                 <i class="icon icon-back {{iconsColorClass}}"></i>
  6.                 {{#if backLinkText}}<span>{{backLinkText}}</span>{{/if}}
  7.             </a>
  8.         </div>
  9.         <div class="center sliding">
  10.             <span class="photo-browser-current"></span> 
  11.             <span class="photo-browser-of">{{ofText}}</span> 
  12.             <span class="photo-browser-total"></span>
  13.         </div>
  14.         <div class="right"></div>
  15.     </div>
  16. </div>
复制

其中：

  • <a class="photo-browser-close-link"> - 点击时将关闭图片浏览器，并且解绑所有的监听器

  • <span class="photo-browser-current"> - 图片浏览器将在该元素中插入当前的活动图片序号

  • <span class="photo-browser-total"> - 图片浏览器将在该元素中插入幻灯片总数

工具栏模版

这是工具栏的示例模版，你可以通过toolbarTemplate参数传递：

  1. <div class="toolbar tabbar">
  2.     <div class="toolbar-inner">
  3.         <a href="#" class="link photo-browser-prev">
  4.             <i class="icon icon-prev {{iconsColorClass}}"></i>
  5.         </a>
  6.         <a href="#" class="link photo-browser-next">
  7.             <i class="icon icon-next {{iconsColorClass}}"></i>
  8.         </a>
  9.     </div>
  10. </div>
复制

它其实就是一个标签栏，其中：

  • <a class="photo-browser-next"> -带有photo-browser-next类的链接，可以充当下一个按钮

  • <a class="photo-browser-prev"> - 带有photo-browser-prev类的链接，可以充当上一个按钮

图片元素模版

这是一张幻灯片的模版，你可以通过photoTemplate参数传递；

  1. <div class="photo-browser-slide swiper-slide">
  2.     <span class="photo-browser-zoom-container">
  3.         <img src="{{js "this.url || this"}}">
  4.     </span>
  5. </div>
复制

Lazy Photo Element Template

Template example of single photo slide element that you can pass in photoLazyTemplate parameter:

  1. <div class="photo-browser-slide photo-browser-slide-lazy swiper-slide">
  2.     <div class="preloader {{@root.preloaderColorClass}}">{{#if @root.material}}{{@root.materialPreloaderSvg}}{{/if}}</div>
  3.     <span class="photo-browser-zoom-container">
  4.         <img data-src="{{js "this.url || this"}}" class="swiper-lazy">
  5.     </span>
  6. </div>
复制

Object Element Template

Template example of single object slide element that you can pass in objectTemplate parameter:

  1. <div class="photo-browser-slide photo-browser-object-slide swiper-slide">{{js "this.html || this"}}</div>
复制

Single Caption Template

Template example of sinble caption element. You can pass in captionTemplate parameter:

  1. <div class="photo-browser-caption" data-caption-index="{{@index}}">
  2.     {{caption}}
  3. </div>
复制
 

猜你喜欢

转载自zaixianshouce.iteye.com/blog/2299387
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022