Блог

Главная - Вопросы по программированию - Компонент браузера фотографий не работает в Framework 7

Компонент браузера фотографий не работает в Framework 7

#javascript #jquery #html-framework-7

Вопрос:

Я попытался создать браузер фотографий framework 7, но он не работает, я попробовал пример, доступный на официальном сайте framework 7 https://v5.framework7.io/docs/photo-browser.html#photo-browser-app-methods

Все остальные компоненты работают должным образом , но браузер фотографий не работает. пожалуйста, помогите мне кто-нибудь решить эту проблему. Мой код был прикреплен здесь.

 <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
      <meta name="theme-color" content="#fff">
      <meta name="format-detection" content="telephone=no">
      <meta name="msapplication-tap-highlight" content="no">
      <title>My App</title>
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
      <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png">
      <link rel="icon" href="assets/icons/favicon.png">
      <link rel="manifest" href="/manifest.json">
      <link rel="stylesheet" href="framework7/framework7-bundle.min.css">
      <link rel="stylesheet" href="css/icons.css">
      <link rel="stylesheet" href="css/app.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <style type="text/css">
         :root {
         --f7-photobrowser-bg-color: #fff;
         --f7-photobrowser-bars-bg-image: none;
         --f7-photobrowser-caption-font-size: 14px;
         --f7-photobrowser-caption-light-text-color: #000;
         --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
         --f7-photobrowser-caption-dark-text-color: #fff;
         --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
         --f7-photobrowser-exposed-bg-color: #000;
         --f7-photobrowser-dark-bg-color: #000;
         --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
         --f7-photobrowser-dark-bars-text-color: #fff;
         --f7-photobrowser-dark-bars-link-color: #fff;
         }
      </style>
   </head>
   <body>
      <div id="app">
         <!-- Your main view, should have "view-main" class -->
         <div class="view view-main view-init safe-areas">
            <div class="page" data-name="home">
               <div class="page-content">
                  <div class="block row">
                     <div class="col-33"><a href="#" class="button button-fill pb-standalone">Standalone</a></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript">
         var app = new Framework7();
         var $ = Dom7;
         
         
         /*=== Default standalone ===*/
         var myPhotoBrowserStandalone = app.photoBrowser.create({
         photos : [
             'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
             'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
             'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
         ]
         });
         //Open photo browser on click
         $('.pb-standalone').on('click', function () {
         myPhotoBrowserStandalone.open();
         });
         
         
      </script>
      <!-- Framework7 library -->
      <script src="framework7/framework7-bundle.min.js"></script>
      <script src="framework7/framework7.js"></script>
      <!-- App routes -->
      <script src="js/routes.js"></script>
      <!-- App store -->
      <script src="js/store.js"></script>
      <!-- App scripts -->
      <script src="js/app.js"></script>
      <script type="text/javascript"></script>
   </body>
</html>
Метки: