Как использовать Fancybox в полимерной бумажной карточке - PullRequest
Новая
       8

Как использовать Fancybox в полимерной бумажной карточке

0 голосов
/ 26 сентября 2018

У меня есть список бумажных карт , и я хочу знать, как использовать библиотеку fancybox для предварительного просмотра содержимого карты моей бумажной карты .

Вот пример бумажная карточка : 

<paper-card heading="Emmental" 
    image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
    <div class="card-content">
        Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one 
        of the cheeses of Switzerland and is sometimes known as Swiss 
        cheese.
    </div>
    <div class="card-actions">
        <paper-button>Share</paper-button>
        <paper-button>Explore!</paper-button>
    </div>
</paper-card>

1 Ответ

0 голосов
/ 01 октября 2018

Вы можете использовать fancybox с Polymer, передавая ссылку <paper-card> (через this.shadowRoot.querySelector() в jQuery: 

firstUpdated() { // LitElement callback: element has rendered
  const card = this.shadowRoot.querySelector('.card');
  $(card).fancybox();
}


<html>
  <head>
    <meta charset="utf-8">

    <!-- Polyfills only needed for Firefox and Edge. -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css">
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js"></script>
  </head>
  <body>
    <!-- Works only on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 17 -->
    <script type="module">
      import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
      import 'https://unpkg.com/@polymer/paper-card/paper-card.js?module';
      import 'https://unpkg.com/@polymer/paper-button/paper-button.js?module';

      class MyElement extends LitElement {
        render() {
          return html`
            <style>
              .card {
                width: 300px;
              }
            </style>
            <paper-card class="card"
                data-fancybox
                data-animation-effect="false"
                href="https://placehold.it/350x150/FFC107/000000"
                heading="Emmental" 
                image="https://placehold.it/350x150/FFC107/000000" alt="Emmental">
                <div class="card-content">
                    Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one 
                    of the cheeses of Switzerland and is sometimes known as Swiss 
                    cheese.
                </div>
                <div class="card-actions">
                    <paper-button>Share</paper-button>
                    <paper-button>Explore!</paper-button>
                </div>
            </paper-card>`;
        }
        
        firstUpdated() {
          const card = this.shadowRoot.querySelector('.card');
          $(card).fancybox();
        }
      }

      customElements.define('my-element', MyElement);
    </script>

    <my-element></my-element>
  </body>
</html>
...