如何将 jquery easy slider 插件初始化到我的插件?

发布于 2024-11-14 09:54:29 字数 1485 浏览 6 评论 0原文


我有一个插件,它从外部文件检索 JSON 数据并将其附加到“div#slider”,数据已检索并且工作正常,但在成功检索数据后,easySlider 未初始化。并且幻灯片无法开始。

我在 http://lkamal.com.np/r3dImage 上有代码
我的插件代码如下:

(function($) {

    $.fn.r3dImage = function(options){
    var defaults = {
        url:        'ajax/test.txt',
        pause:      2000,

    }; 

    var options = $.extend(defaults, options);
    //retrive json file
    return this.each(function() {  
        obj = $(this);  
        var body = obj.html();
        getJson();
    });

    function getJson(){
        $.ajax({
       type: "POST",
       url: options.url,
       dataType: "json",
       cache: false,
       contentType: "application/json",
       success: function(data) {
        //alert("Success");
       $.each(data.dashboard, function(i,post){

            obj.html('<li><a href="'+post.TargetUrl+'" target="'+post.Target+'"><img src="' + post.ImageUrl + '" title="' + post.OverlayText +'" /></a></li>');

        });
        $(obj).easySlider({
            pause: options.pause
        });
      },
        error: function(xhr, status, error) {
            alert(xhr.status);
        }
    });
    };
/*  this.each(function() {
        $(options.container).easySlider({
            pause: options.pause
        });
    });*/
    };

})(jQuery);

另一个是简单的滑块1.7。

我可以在 easyslider 插件内完成吗?
我如何合并这两个插件并制作一个。

I have a plugin which retrieves JSON data from external file and appends it to the "div#slider", the data is retrieved and is working fine but the easySlider is not initialized after retrieving the data successfully . and the slide does not starts.

I have codes on http://lkamal.com.np/r3dImage

my plugin code is as follows:

(function($) {

    $.fn.r3dImage = function(options){
    var defaults = {
        url:        'ajax/test.txt',
        pause:      2000,

    }; 

    var options = $.extend(defaults, options);
    //retrive json file
    return this.each(function() {  
        obj = $(this);  
        var body = obj.html();
        getJson();
    });

    function getJson(){
        $.ajax({
       type: "POST",
       url: options.url,
       dataType: "json",
       cache: false,
       contentType: "application/json",
       success: function(data) {
        //alert("Success");
       $.each(data.dashboard, function(i,post){

            obj.html('<li><a href="'+post.TargetUrl+'" target="'+post.Target+'"><img src="' + post.ImageUrl + '" title="' + post.OverlayText +'" /></a></li>');

        });
        $(obj).easySlider({
            pause: options.pause
        });
      },
        error: function(xhr, status, error) {
            alert(xhr.status);
        }
    });
    };
/*  this.each(function() {
        $(options.container).easySlider({
            pause: options.pause
        });
    });*/
    };

})(jQuery);

and another is easy slider 1.7.
or
can i do it inside the easyslider plugin.
How Can i merge this two plugin and make one.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

娜些时光,永不杰束 2024-11-21 09:54:29

我也得到了这个问题的解决方案。

$(function() {
    $.fn.r3dImage = function(param) {
        var options = {
            url : "",
            pause : 2000,
            feedFetchDelay : 10
        };

        this.each(function() {
            var element = $(this);
            //alert(element.attr('id'));
            element.html("<ul></ul>");
            options = $.extend(options,param);
            if(options.url=="") { console.log("URL is not specified"); }
            else {
                getJsonFeed(element);   //retrives json feed and appends to respective div
                setInterval(getJsonFeed, options.feedFetchDelay*1000*60);   //Time interval in milli seconds converted to minute using delay*1000*60
            }
        });

        function getJsonFeed(element){
            //function to retrive json feed start using post of json data
            $.post(
                options.url,
                function(data) {
                    //alert(data.dashboard);

                    html = '';
                    $.each(data.dashboard, function(k,v) {
                       html += '<li>';
                       html += '<a href="'+v.TargetUrl+'" target="'+v.Target+'">';
                       html += '<img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" />';
                       html += '</a><p>'+v.OverlayText+'</p></li>';                           
                    });
                    //alert(html);
                    $("ul", element).append(html); //appending the json data with respective div
                    //initialize the slider to easy slider
                    $(element).easySlider({
                        auto: true, 
                        continuous: true
                    });
                },
                "json"
            );
        }
    }    
});

I got solution for this also.

$(function() {
    $.fn.r3dImage = function(param) {
        var options = {
            url : "",
            pause : 2000,
            feedFetchDelay : 10
        };

        this.each(function() {
            var element = $(this);
            //alert(element.attr('id'));
            element.html("<ul></ul>");
            options = $.extend(options,param);
            if(options.url=="") { console.log("URL is not specified"); }
            else {
                getJsonFeed(element);   //retrives json feed and appends to respective div
                setInterval(getJsonFeed, options.feedFetchDelay*1000*60);   //Time interval in milli seconds converted to minute using delay*1000*60
            }
        });

        function getJsonFeed(element){
            //function to retrive json feed start using post of json data
            $.post(
                options.url,
                function(data) {
                    //alert(data.dashboard);

                    html = '';
                    $.each(data.dashboard, function(k,v) {
                       html += '<li>';
                       html += '<a href="'+v.TargetUrl+'" target="'+v.Target+'">';
                       html += '<img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" />';
                       html += '</a><p>'+v.OverlayText+'</p></li>';                           
                    });
                    //alert(html);
                    $("ul", element).append(html); //appending the json data with respective div
                    //initialize the slider to easy slider
                    $(element).easySlider({
                        auto: true, 
                        continuous: true
                    });
                },
                "json"
            );
        }
    }    
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文