Framework7 - Photos Array

Description

During initialization of the photo browser, you need to pass array with photos/videos in photos parameter.

Example

The following example demonstrates 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>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given HTML code as photo_browser_photos_array.html file in your server root folder.

  • Open this HTML file as http://localhost/photo_browser_photos_array.html and the output is displayed as shown below.

  • The example gives the photo browser array, which takes array of photos or videos from the photos parameter.

framework7_photo_browser.htm
Advertisements