Angular breaks jQuery slideshow

Question

I'm working on this template and after including angular in application a lot of functionality is broken. A somehow managed to fix them a lot, but I can not get this slide show to work properly.

This is my HTML





    
    
    
    
    
    
    
    
    
    
    




    
        
            Meet New Theme
            
            Attractive & Elegant
HTML Theme
            $15.00
            Buy Now
        
    
    
        
            New arrivals
            
            Spring/Summer 2014
Ready-To-Wear
            View Collection
        
    
    
        
            
            up to 70% off
            Shop Now

My controller

controllers.slideShowCtrl = function($scope, $location){
    $scope.slideShow = function(){
        if($location.url() == '/' || $location.url() == '/home'){
            $scope.slideShowView = true;
            return true;
        }else{
            $scope.slideShowView = false;
            return false;
        }
    }
}

And this is jQuery for creating slideshow

// camera slideshow
(function(){
    var cs = $('.camera_wrap');
    if(cs.length){
        cs.camera({
            height: '41%',
            navigation: true,
            pagination: true,
            playPause:false,
            thumbnails: false,
            time: 4000,
            transPeriod : 1000,
            navigationHover: false,
            onLoaded: function() {
                var image = $('.camera_wrap .camera_src > [data-src]'),
                    len = image.length,
                    bullet = $('.camera_wrap .camera_pag_ul > li');
                if(bullet.find('.custom_thumb').length) return;
                for(var i = 0; i < len; i++){
                    bullet.eq(i).append('');
                }
                bullet.on("mouseenter mouseleave",function(){
                    $(this).children('.custom_thumb').toggleClass("active");
                });
            }
        });
        cs.find('.camera_prev').append('');
        cs.find('.camera_next').append('');
    }
})();

The problem is here. On first load or reload (f5), slider looks ok and plays well.

After clicking trough page and again visiting home (#/home), slider sometimes break, sometimes don't, sometimes it fixes by him self.

And again after refreshing web page slider works ok and plays well.

If you guys need any additional chunk of code, let me know and I will provide.

Thank you

Linh Pham · Accepted Answer

Theorically when you put a JQ slideshow in angular view. You need to init everytime you access the view. Because on view/route changes your slideshow will be discarded from DOM, therefore all the content and instance of your slideshow will be discarded too.

The problem is here. On first load or reload (f5), slider looks ok and plays well.

Yes it should work because slideshow got initial welly

After clicking trough page and again visiting home (#/home), slider sometimes break, sometimes don't, sometimes it fixes by him self.

The slide does not initial properly because it got discard from DOM when route/view changes

=> To make to work just simply re-init it again exactly after your view rendered.

// This is a dirty patch up, and only showing the fix in most basic way. So you could understand the concept of angular with other DOM manipulation like JQ.
// You should try to study more about DOM manipulation in angular. And for better solution, you can go with directive
controllers.slideShowCtrl = function($scope, $location, $timeout){
    $scope.slideShow = function(){
        if($location.url() == '/' || $location.url() == '/home'){
            $scope.slideShowView = true;
            return true;
        }else{
            $scope.slideShowView = false;
            return false;
        }

        // I just putting slideshow initial right after $scope.slideShow() return true.
        // To make sure slideshow got initial after the ng-show condition return true.
        $scope.$watch(function () {
            return $scope.slideShow();
        }, function (isShow) {

            // This $timeout to 100% sure slideshow initial only happen after view got all its base content rendered
            $timeout(function () {
                if(isShow){
                    var cs = $('.camera_wrap');
                    if(cs.length){
                        cs.camera({
                            height: '41%',
                            navigation: true,
                            pagination: true,
                            playPause:false,
                            thumbnails: false,
                            time: 4000,
                            transPeriod : 1000,
                            navigationHover: false,
                            onLoaded: function() {
                                var image = $('.camera_wrap .camera_src > [data-src]'),
                                    len = image.length,
                                    bullet = $('.camera_wrap .camera_pag_ul > li');
                                if(bullet.find('.custom_thumb').length) return;
                                for(var i = 0; i < len; i++){
                                    bullet.eq(i).append('');
                                }
                                bullet.on("mouseenter mouseleave",function(){
                                    $(this).children('.custom_thumb').toggleClass("active");
                                });
                            }
                        });
                        cs.find('.camera_prev').append('');
                        cs.find('.camera_next').append('');
                    }
                }
            }, 0)

        })
    }
}

P.S. please aware that, since we do not have any fiddle/plunker so to make sure the solution work, I apply some tricks that will put the highest possiblity for my answer to providing a workding code. You can try to remove $timeout to see if it worked

Angular breaks jQuery slideshow

Answers (2)

Related Questions