CODEWITHSUNDEEP
jqueryangularjsslideshow
Ankit
Ankit

Reputation: 657

Angularjs : camera slideshow jquery plugin is not working in partial view

I am creating a simple website which has camera slideshow jquery plugin to display images.

Now when I run home page without making partial views, it runs perfectly but when I use routing and put this plugin in partial view then it doesn't work ?

Here is my app.js code : 

angular.module('sliderApp', [
   'sliderController',
   'ngRoute'
])
.config(["$routeProvider", function($routeProvider) {
    $routeProvider.
       when("/",{templateUrl: "partials/home.html", controller: "myController"}).
       otherwise({redirectTo: "/"});
}]);

And here is controller.js code :

angular.module('sliderController',[])
   .controller('myController', function($scope) {
   $scope.images = [
      {
        bigimage :  'camera/images/slides/bridge.jpg',
        thumb : 'camera/images/slides/thumbs/bridge.jpg'
      },
      {
        bigimage :  'camera/images/slides/leaf.jpg',
        thumb : 'camera/images/slides/thumbs/leaf.jpg'
      },
      {
        bigimage :  'camera/images/slides/road.jpg',
        thumb : 'camera/images/slides/thumbs/road.jpg'
      },
      {
        bigimage :  'camera/images/slides/sea.jpg',
        thumb : 'camera/images/slides/thumbs/sea.jpg'
      }

];
});

Can somebody tell me how it will work ? Thanks in advance.

Upvotes: 2

Views: 913

Answers (2)

Edmilson Lani
Edmilson Lani

Reputation: 153

Camera Directive in AngularJS

options -> http://www.pixedelic.com/plugins/camera/

.directive('camera', [
  "$compile", "$timeout", function($compile, $timeout) {
    return {
      restrict: 'A',
      scope: {
        options: '='
      },
      link: function($scope, element, attr) {
        return $timeout(function() {
          return jQuery(element).camera($scope.options);
        }, 500);
      }
    };
  }
]);

<div camera options="{thumbnails: true, pagination: false, height: '296px', fx: 'simpleFade', time: 5000}" class="camera_wrap camera_green_skin">
  <div ng-repeat="imagem in imagens" data-thumb="{{imagem.thumb}}" data-src="{{imagem.media | seguro}}"></div>
</div>

Upvotes: 0

Ankit
Ankit

Reputation: 657

After spending a week, I found the solution. To overcome this I made a directive

.directive('camSlider', function($timeout) {
        return function(scope, el, attrs) {
            $timeout((function() {
                el.camera({
                    thumbnails: true
                })
            }), 100)
        }
})

And specified the directive attribute to the element

<div class="camera_wrap camera_azure_skin" id="camera_wrap_1" ng-controller="myController" cam-slider>
<div ng-repeat="slide in slides" data-thumb="{{slide.thumb}}" data-src="{{slide.bigimage}}"></div>
</div>

and now it is working like a charm :)

Upvotes: 3

Related Questions