fancybox指令不分組圖像

我已經創建了花式框指令。它打開圖像在幻想盒子不分組圖像。我在Fancybox directive in ng-repeat is not grouping images檢查了其他解決方案，但它們不能解決我的問題。fancybox指令不分組圖像

HTML：

<a fancybox class="fancybox" rel="group" data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" href="{[{i.location}]}" title="{[{i.name}]}" width="460" height="298"> 
## Image ###<img src="{[{i.location}]}" alt="" width="460" height="298" /> 
</a>

JS看中箱指令::

App.directive('fancybox',function($compile, $timeout){ 
     return { 
      link: function($scope, element, attrs) { 
       alert('i am called'); 

        element.fancybox({ 
        openEffect : 'none', 
        closeEffect : 'none', 
        padding : 40, 
        margin : [20, 60, 20, 60] ,// Increase left/right margin 
        helpers: { 
        thumbs: { 
         width : 40, 
         height : 40, 
         source : function(current) { 
          return $(current.element).data('thumbnail'); 
          } 
         } 
        }, 
       }); 
      } 
     }; 
    });

來源

2014-10-30 anam

你有沒有解決這個問題？無論如何，我也無法將圖片分組......可以發佈您的答案並解決此問題？ :) – ilter 2015-05-02 15:44:31

@過濾器我做了角度引導輪播 – anam 2015-06-26 07:48:20

感謝您的答案。但是如你所知，轉盤和fancybox是用於解決不同類型問題的兩種不同的概念。當然，如果它解決了你的問題是很好的，但我的意思是，它們在使用方面並不是真正可互換的。 – ilter 2015-06-26 09:18:21

我無法的fancybox .anyways實現它，我切換到使用引導輪播，引導更多易於使用，

<div ng-controller="CarouselDemoCtrl"> 
    <div style="height: 305px"> 
    <carousel interval="myInterval"> 
     <slide ng-repeat="slide in slides" active="slide.active"> 
     <img ng-src="{{slide.image}}" style="margin:auto;"> 
     <div class="carousel-caption"> 
      <h4>Slide {{$index}}</h4> 
      <p>{{slide.text}}</p> 
     </div> 
     </slide> 
    </carousel> 
    </div> 
    <div class="row"> 
    <div class="col-md-6"> 
     <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button> 
    </div> 
    <div class="col-md-6"> 
     Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval"> 
     <br />Enter a negative number or 0 to stop the interval. 
    </div> 
    </div> 
</div>

Bootstrap Carousel With Angular

我們可以在bootstrap提供的Carousel中做很多定製。

來源

2015-06-26 07:47:50 anam

fancybox指令不分組圖像

回答

相關問題