Bernd Wachter
<div class="row">
<div class="col-md-12 separatorProductImages">
<div id="gallery_01">
<a href="#" class="elevatezoom-gallery" data-update="" ng-repeat="(key,value) in galleryimages track by $index"
data-image="{{value.medium_image}}"
data-zoom-image="{{value.large_image}}">
<img id="img_01" ng-src="{{value.medium_image}}"
width="100" />
</a>
</div>
</div>
</div>-------------------------------------------------
Angular Directive
-------------------------------------------------------
angular.module("shop.produktdetail")
.directive('ngElevateZoom', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
//Will watch for changes on the attribute
attrs.$observe('zoomImage', function () {
linkElevateZoom();
})
function linkElevateZoom() {
//Check if its not empty
if (!attrs.zoomImage) return;
element.attr('data-zoom-image', attrs.zoomImage);
//$(element).elevateZoom({ zoomType: "inner", cursor: "crosshair" });
$(element).elevateZoom({ zoomType: "inner", easing: true, gallery: "gallery_01", cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: '' });
}
linkElevateZoom();
$(element).bind("click", function (e) {
var ez = $(element).data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
}
};
});
}());----------------------------------------------------------------------
It works the zoom of the Images and the Fancybox
but when i use the ng-repeat to show all my Thumbnail Images and click of one of the Thumbnail Image
the large Preview Image want not change!
when i test and make the Code for the Images via Hand in the HTML and not over the ng-repeat then
works and i can click on a Thumb Image and it changes the large Preview Image...
but when i make the Thumb Images dynamic with ng-repeat from a Array then the large Preview Image
will not change after click a Thumbnail Image..
Can someone Help me what is the Problem ?
Thanks
Benny
