Question

我有一个纸卡列表，并且我想知道如何使用 fancybox 库预览我的纸卡< / strong>。

以下是纸卡的示例：

<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

1 个答案: