课程频道导航
课程分类导航
当前位置：首页 > 操作系统 > Ios

移动端安卓和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 >?- 点击时将关闭图片浏览器，并且解绑所有的监听器

  • <span >?- 图片浏览器将在该元素中插入当前的活动图片序号

  • <span >?- 图片浏览器将在该元素中插入幻灯片总数

工具栏模版

这是工具栏的示例模版，你可以通过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 >?-带有photo-browser-next类的链接，可以充当下一个按钮

  • <a >?- 带有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>
复制
?

原文：http://zaixianshouce.iteye.com/blog/2299387
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！

相关教程推荐

其他课程推荐