Fancybox in Angular 2

Angular 2 앱에 fancybox 패키지를 사용하고 싶습니다. npm을 사용하여이 패키지를 설치했으며 문서를주의 깊게 읽었습니다. 그러나 fancybox이 작동하지 않습니다. 처음에는 문제가 href가 http://localhost8000/media...과 같다고 생각했기 때문에 fancybox 패키지의 간단한 이미지를 테스트 해보기로했습니다. 그러나 그것은 또한 단지 이미지의 URL로 다음 탭의 이미지를 열지 않고 있습니다.Fancybox in Angular 2

은 index.html을 : fancybox에

<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>

내 시도 : 내가 그것을 어떻게했는지

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

출처

2016-10-31 Rodion

입니다 :

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>

내 구성 요소의 10

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" 
 
      }); 
 
     }); 
 
    } 
 
\t ngOnDestroy() { 
 
\t \t jQuery(".fancybox").unbind('click.fb'); 
 
\t \t // or maybe jQuery(".fancybox").off() to remove all bindings 
 
\t } 
 

 

 
}

3 - 내 component.html에서 :

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

출처

2016-10-31 13:38:04 user7069110

Fancybox in Angular 2

답변

관련 문제