Angular 2 中的 Fancybox

Question

我想在我的 Angular 2 应用程序中使用 fancybox 包。我使用 npm 安装了这个包，并仔细阅读了文档。但是 fancybox 不起作用。起初我认为问题出在 href 上，例如 http://localhost8000/media... 所以我决定使用 fancybox 包中的简单图像进行测试。但它也不起作用，它只是在下一个选项卡中打开带有 url 图片的图片。

index.html:

<html>
  <head>
    <base href="/">
    <title>PhotoHub</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% load staticfiles %}


    <link rel="stylesheet" href="{% static "node_modules/bootstrap/dist/css/bootstrap.min.css" %}">
    <link href="{% static "bower_components/font-awesome/css/font-awesome.min.css" %}" rel="stylesheet" />
    <link href="{% static "bower_components/alertify.js/themes/alertify.core.css" %}" rel="stylesheet" />
    <link href="{% static "bower_components/alertify.js/themes/alertify.bootstrap.css" %}" rel="stylesheet" />
    <link href="{% static "node_modules/fancybox/dist/css/jquery.fancybox.css" %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% static "styles.css" %}">

    <script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
    <script src="{% static "node_modules/bootstrap/dist/js/bootstrap.min.js" %}"></script>
    <script src="{% static "bower_components/alertify.js/lib/alertify.min.js" %}"></script>
    <script src="{% static "node_modules/fancybox/dist/js/jquery.fancybox.pack.js" %}"></script>
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="{% static "node_modules/core-js/client/shim.min.js" %}"></script>
    <script src="{% static "node_modules/zone.js/dist/zone.js" %}"></script>
    <script src="{% static "node_modules/reflect-metadata/Reflect.js" %}"></script>
    <script src="{% static "node_modules/systemjs/dist/system.src.js" %}"></script>
    <!-- 2. Configure SystemJS -->
    <script src="{% static "systemjs.config.js" %}"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
      $(document).ready(function() {
        $(".fancybox").fancybox({type: "image"});
        console.log('fancybox image')
      });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <photohub></photohub>
  </body>
</html>

我对 fancybox 的尝试：

<a data-fancybox-type="image" class="fancybox" rel="group" href="static\node_modules\fancybox\demo_b.jpg"><img src="static\node_modules\fancybox\demo_b.jpg" alt="" /></a>

Answer 1

我是这样做的:

1 - 在我的 index.html 中：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">

<script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

2- 在我的组件中：

...other imports

declare var jQuery: any

@Component({...})

export class Component implements AfterViewInit, OnDestroy {
  
  ngAfterViewInit() {
      jQuery(document).ready(function(){ //Photos Gallery
           jQuery(".fancybox").fancybox({
               openEffect: "elastic",
               closeEffect: "none"
           });
       });
    }
 ngOnDestroy() {
  jQuery(".fancybox").unbind('click.fb');
  // or maybe jQuery(".fancybox").off() to remove all bindings
 }


}

3 - 在我的 component.html 中：

<a class="thumbnail fancybox slide" rel="ligthbox" href="{{photo.photoURL}}">
  <img class="img-responsive" alt="" src="{{photo.photoURL}}"/>
</a>

Angular 2 中的 Fancybox

Fancybox in Angular 2

fancybox

angular