Calling a function inside a plugin. Wordpress style

Question

I am currently trying to combine two wordpress plugins without having to rewrite one to fit inside the other.

My question at its most basic is: How do you call a function that exists outside another plugin. Eg. I have two files:

1) js/N_Rotator.js

2) js/layerSlider.js

The two of them function correctly. The first is a image rotating in the background. The second one is rotating content (ie. titles, images links etc.).

What I need to do is sync them both. When slider 2 rotates, i want slider 1 to rotate as well.

After doing some digging, I found that I can initiate Slider 1 from Slider 2 like this:

a('#carousel').infiniteCarousel({ anim('next'); });

But I get an error, that anim() does not exits. So inside slider 1 js, I placed it inside a variable.

 if(o.play) {
   anim('next');
 }  

Then called it like so from slider 2:

a('#carousel').infiniteCarousel({ play:1 });

But all that does is make it start from the beginning every time its initiated. It will slide once and snap back to the start

So, is there a way I can call the function by itself? This is how anim() is structured. (Grabbed from a previously made plugin called infiniteCarousel).

function anim(direction,dist)
            {
                // Fade left/right arrows out when transitioning
                $('#btn_rt'+randID).fadeOut(500);
                $('#btn_lt'+randID).fadeOut(500);

                // animate textholder out of frame
                $('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);                 

                //?? Fade out play/pause?
                $('#pause_btn'+randID).fadeOut(250);
                $('#play_btn'+randID).fadeOut(250);



                if(direction == "next")
                {
                    if(curr==numImages) curr=0;
                    if(dist>1)
                    {
                        borderpatrol($('#thumb'+randID+'_'+(curr+dist)));
                        $('li:lt(2)', obj).clone().insertAfter($('li:last', obj));
                        $('ul', obj).animate({left:-imgWidth*(dist+1)},o.transitionSpeed,function(){
                            $('li:lt(2)', obj).remove();
                            for(j=1;j<=dist-2;j++)
                            {
                                $('li:first', obj).clone().insertAfter($('li:last', obj));
                                $('li:first', obj).remove();
                            }

                            $(this).css({'left':-imgWidth});
                            curr = curr+dist;
                            $('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
                        });
                    }
                    else
                    {
                        borderpatrol($('#thumb'+randID+'_'+(curr+1)));
                        $('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); // Unbind the thumbnail click event until the transition has ended
                        // Copy leftmost (first) li and insert it after the last li
                        $('li:first', obj).clone().insertAfter($('li:last', obj));  
                        // Update width and left position of ul and animate ul to the left
                        $('ul', obj)
                            .animate({left:-imgWidth-960},o.transitionSpeed,function(){
                                $('li:first', obj).remove();
                                $('ul', obj).css('left',-imgWidth+'px');
                                $('#btn_rt'+randID).fadeIn(500);
                                $('#btn_lt'+randID).fadeIn(500);
                                if(autopilot) $('#pause_btn'+randID).fadeIn(250);
                                if(autopilot)
                                {
                                    $('#progress'+randID).width(imgWidth).height(pbarHeight).fadeIn(500);
                                    $('#progress'+randID).fadeIn(500).animate({'width':0},o.displayTime,function(){
                                        $('#pause_btn'+randID).fadeOut(50);
                                        setTimeout(function(){$('#pause_btn'+randID).fadeIn(250)},o.transitionSpeed)
                                    });
                                }
                                curr=curr+1;
                                $('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
                            });
                    }
                }
                if(direction == "prev")
                {
                    if(dist>1)
                    {
                        borderpatrol($('#thumb'+randID+'_'+(curr-dist)));
                        $('li:gt('+(numImages-(dist+1))+')', obj).clone().insertBefore($('li:first', obj));
                        $('ul', obj).css({'left':(-imgWidth*(dist+1))}).animate({left:-imgWidth},o.transitionSpeed,function(){
                            $('li:gt('+(numImages-1)+')', obj).remove();
                            curr = curr - dist;
                            $('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
                        });
                    }
                    else
                    {
                        borderpatrol($('#thumb'+randID+'_'+(curr-1)));
                        $('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); // Unbind the thumbnail click event until the transition has ended
                        // Copy rightmost (last) li and insert it after the first li
                        $('li:last', obj).clone().insertBefore($('li:first', obj));
                        // Update width and left position of ul and animate ul to the right
                        $('ul', obj)
                            .css('left',-imgWidth*2+'px')
                            .animate({left:-imgWidth},o.transitionSpeed,function(){
                                $('li:last', obj).remove();
                                $('#btn_rt'+randID).fadeIn(500);
                                $('#btn_lt'+randID).fadeIn(500);
                                if(autopilot) $('#pause_btn'+randID).fadeIn(250);
                                curr=curr-1;
                                if(curr==0) curr=numImages;
                                $('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
                            });
                    }
                }
            }

And the plugin is structured like this:

(function($) {

$.fn.extend({ 
    infiniteCarousel: function(options) {
        var defaults = {
            defaults...
        };
    var options = $.extend(defaults, options);

        return this.each(function() { ...anim is inside here... } }); })(jQuery);

Any Ideas on how I can call the function without having to re-initiate the plugin??

Note: I am unable to share the link to the site, it is still in development and the client needs to remain nameless. It would be nicer to show you a live example.

Answer 1

我不确定JavaScript代码内部发生了什么，但是如果您希望一个脚本依赖另一个脚本，请将其作为依赖项添加到wp_register_script（）函数中