0

Tried with the timeout function but its still not working in Chrome or Safari whereas it's working in Firefox.

function myFunction() {
            setTimeout(function(){
                callbak();
                alert($(".gallery li a").attr("data-target"));

            }, 3000);
        };
        myFunction();

        callbak = function(){

            $("area[rel^='prettyPhoto']").prettyPhoto();

            $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: false});
            $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});

            $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
                custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
                changepicturecallback: function(){ initialize(); }
            });

            $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
                custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
                changepicturecallback: function(){ _bsap.exec(); }
            });
        };

Here is my code

<div class="frame">
    <ul class="gallery clearfix">
        <li ng-repeat="imgname in imgsrc" >
            <a data-target="{{imgname.item}}" target="_blank" rel="prettyPhoto[gallery1]" title="You can add caption to pictures. You can add caption to pictures. You can add caption to pictures.">
                <img ng-src="{{ imgname.item }}"/>
            </a>
        </li>
    </ul>

I am using this plugin in our portal where ng-src path is not loading

Improve this question

1 Answer 1

Reset to default
1

AngularJS would not work with dynamically generated content that the prettyphoto plugin generates, since angular needs to compile the html and setup the necessary watches. You need to wrap the jquery function into a directive and manually update the scope elements, something like this:

var app = angular.module('myApp', ['Authentication', 'ngRoute', 'ngResource', 'ngCookies']);
app.directive("userProfile", ['$scope', '$http', '$location', '$resource', 'fullname', '$timeout', function ($scope, $http, $location, $resource, fullname, $timeout) {

            return {
                scope: {
                    trigger: '@focusMe'
                },
                link: function (scope, element, attrs) {

                    scope.imgsrc = [
                        {
                            item: 'images/profile-pic.jpg'
                        },
                    ];

                    function myFunction() {
                        $timeout(function () {
                            callbak();
                            var result = $(".gallery li a").attr("data-target");
                            console.log(result);
                            //scope.$apply(); - unmark if needed
                        }, 100);
                    }

                    function callback() {
                        $("area[rel^='prettyPhoto']").prettyPhoto();

                        $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
                            animation_speed: 'normal',
                            theme: 'light_square',
                            slideshow: 3000,
                            autoplay_slideshow: false
                        });
                        $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({
                            animation_speed: 'fast',
                            slideshow: 10000,
                            hideflash: true
                        });

                        $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
                            custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
                            changepicturecallback: function () {
                                initialize();
                            }
                        });

                        $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
                            custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
                            changepicturecallback: function () {
                                _bsap.exec();
                            }
                        });
                    }

                    myFunction();

                }};
}]);
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

no this is not invoked in angular component its jquery component i think we cant call jquery function in angularjs. well i have put your code in controller.js but its still not working...basically jquery plugin not able to read the image src which its need to run...
it's not matter of angular/jquery function, but matter of where exactly the function written. what is your meaning of calling this func from angular? post your code and i'll able to asist

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.