我已经为花式盒创建了指令。它在花式框中打开图像而不对图像进行分组。我在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 fancy Box Directive ::
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');
}
}
},
});
}
};
});
答案 0 :(得分:0)
我无法用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中进行大量自定义。