javascript - fancybox 指令不对图像进行分组

Question

我已经为花哨的盒子创建了指令。它在精美的框中打开图像而不是对图像进行分组。我在 Fancybox directive in ng-repeat is not grouping images 中检查了其他解决方案但他们无法解决我的问题。

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');
                            }
                        }
                   },
                });
            }
         };
    });

Answer 1

我无法用 fancybox 实现它。无论如何，我改用 bootstrap carousel，bootstrap 更容易使用，

    <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 中进行大量定制。