如何在聚合物纸卡中使用 Fancybox

Question

我有一个 paper-card 的列表，我想知道如何使用 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>

Answer 1

您可以通过传递 <paper-card> 引用（通过 this.shadowRoot.querySelector() 到 jQuery:

将 fancybox 与 Polymer 一起使用

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>

如何在聚合物纸卡中使用 Fancybox

How to use Fancybox in a polymer paper-card

html

css

fancybox

polymer