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

图片浏览器是一个像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>

复制