Photos Array

During initialization of the photo browser array is passed with photos/videos in photos parameter.
Example

Let’s take an example to demonstrate the use of photo browser in 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=”#” class = “button color-pink button-fill pb-standalone”>Standalone</a>                          </div>                                                       <div class = “col-33″>                             <a href=”#”      class = “button color-green pb-popup”>Popup</a>                          </div>                                                       <div class = “col-33″>                             <a href=”#”      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=”#”      class = “button color-blue button-fill pb-standalone-dark”>Standalone</a>                          </div>                                                       <div class = “col-33″>                             <a href=”#”      class = “button color-pink button-fill pb-popup-dark”>Popup</a>                          </div>                                                          <div class = “col-33″>                             <a href=”#”      class = “button color-green pb-standalone-captions”>Captions</a>                          </div>                       </div>                                                 <div class = “content-block”>                          <a href=”#”   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 = “/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>  
Test it Now
Next TopicFramework7 Photo Browser Methods
Framework7 Photo Array

Photos Array

Example

AdMob with Firebase

Godot Tutorial

You may also like
