Framework7照片数组 Framework7照片数组|Framework7

在照片浏览器初始化期间, 将在photos参数中传递带有照片/视频的照片。
例
让我们以一个示例来演示在Framework7中使用照片浏览器的情况：

< !DOCTYPE html> < html> < head> < meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> < meta name = "apple-mobile-web-app-capable" content = "yes" /> < meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> < title> Photos Array< /title> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> < /head> < body> < div class = "views"> < div class = "view view-main"> < div class = "navbar"> < div class = "navbar-inner"> < div class = "left"> < /div> < div class = "center sliding"> Photo Browser< /div> < div class = "right"> < /div> < /div> < /div> < div class = "pages navbar-through"> < div data-page = "home" class = "page"> < div class = "page-content"> < div class = "content-block-title"> Light Theme< /div> < div class = "content-block row"> < div class = "col-33"> < a href = "http://www.srcmini.com/#" class = "button color-pink button-fill pb-standalone"> Standalone< /a> < /div> < div class = "col-33"> < a href = "http://www.srcmini.com/#" class = "button color-green pb-popup"> Popup< /a> < /div> < div class = "col-33"> < a href = "http://www.srcmini.com/#" class = "button color-blue button-fill pb-page"> Page< /a> < /div> < /div> < div class = "content-block-title"> Dark Theme< /div> < div class = "content-block row"> < div class = "col-33"> < a href = "http://www.srcmini.com/#" class = "button color-blue button-fill pb-standalone-dark"> Standalone< /a> < /div> < div class = "col-33"> < a href = "http://www.srcmini.com/#" class = "button color-pink button-fill pb-popup-dark"> Popup< /a> < /div> < div class = "col-33"> < a href = "http://www.srcmini.com/#" class = "button color-green pb-standalone-captions"> Captions< /a> < /div> < /div> < div class = "content-block"> < a href = "http://www.srcmini.com/#" class = "button color-orange button-round pb-standalone-video"> With Video< /a> < /div> < /div> < /div> < /div> < /div> < /div> < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"> < /script> < script> var myApp = new Framework7(); var $$ = Dom7; var mainView = myApp.addView('.view-main', {dynamicNavbar: true}); /*Default standalone */var myPhotoBrowserStandalone = myApp.photoBrowser ({photos : ['/framework7/images/background.jpg', '/framework7/images/birds.jpg', '/framework7/images/nature.jpg', ]}); // Open the photo browser on click$$('.pb-standalone').on('click', function () {myPhotoBrowserStandalone.open(); }); /* Popup */var myPhotoBrowserPopup = myApp.photoBrowser ({photos : ['/framework7/images/background.jpg', '/framework7/images/birds.jpg', '/framework7/images/nature.jpg', ], type: 'popup'}); $$('.pb-popup').on('click', function () {myPhotoBrowserPopup.open(); }); /* As Page */var myPhotoBrowserPage = myApp.photoBrowser ({photos : ['/framework7/images/background.jpg', '/framework7/images/birds.jpg', '/framework7/images/nature.jpg', ], type: 'page', backLinkText: 'Back'}); $$('.pb-page').on('click', function () {myPhotoBrowserPage.open(); }); /* Standalone Dark */var myPhotoBrowserDark = myApp.photoBrowser ({photos : ['/framework7/images/background.jpg', '/framework7/images/birds.jpg', '/framework7/images/nature.jpg', ], theme: 'dark'}); $$('.pb-standalone-dark').on('click', function () {myPhotoBrowserDark.open(); }); /* Popup Dark */var myPhotoBrowserPopupDark = myApp.photoBrowser ({photos : ['/framework7/images/background.jpg', '/framework7/images/birds.jpg', '/framework7/images/nature.jpg', ], theme: 'dark', type: 'popup'}); $$('.pb-popup-dark').on('click', function () {myPhotoBrowserPopupDark.open(); }); /* With Captions */var myPhotoBrowserCaptions = myApp.photoBrowser ({photos : [{url: '/framework7/images/background.jpg', caption: 'This is caption 1 text'}, {url: '/framework7/images/birds.jpg', caption: 'This is second caption text'}, // This one without caption{url: '/framework7/images/nature.jpg', }, ], theme: 'dark', type: 'standalone'}); $$('.pb-standalone-captions').on('click', function () {myPhotoBrowserCaptions.open(); }); /* With Video */var myPhotoBrowserVideo = myApp.photoBrowser ({photos : [{html: '< iframe src = "http://www.srcmini.com/framework7/images/video.mp4" frameborder = "0" allowfullscreen> < /iframe> ', caption: 'My Video'}, {url: '/framework7/images/birds.jpg', caption: 'Second Caption Text'}, {url: '/framework7/images/nature.jpg', }, ], theme: 'dark', type: 'standalone'}); $$('.pb-standalone-video').on('click', function () {myPhotoBrowserVideo.open(); }); < /script> < /body> < /html>

【Framework7照片数组】立即测试