6

我正在使用 Twitter Bootstrap 为 Joomla 2.5.x 制作模板。我还想为该模板使用 Bootstrap Carousel 插件。

当旋转木马与 Joomla 的 Mootools 实现一起使用时，我遇到了一个问题。Carousel 元素的样式被更改为负边距，使其对用户不可见。为了向您准确展示发生了什么，我为您准备了一个 jsfiddle http://jsfiddle.net/U2pHH/11/。

由于 Carousels 更改样式属性，Carousel 使用户看不到每一秒图像，但用户应该看到每张幻灯片。

我已经查看了 Carousel Plugin 和 Mootools JS Files 的源代码，但遗憾的是无法找出问题的原因。我想这可能是 jQuery 和 Mootools 之间的函数/类的一些命名问题，但在那里找不到任何问题。

我希望你能在这里帮助我。

编辑：我发现它与 mootools-more.js 的 Fx.Slide 类有关，从源代码中删除该类解决了问题。但这仍然没有真正的解决方案，仍然非常感谢任何帮助。

4

6 回答 6

8

这是特定于 Joomla 和 mootools 的修复程序更多，

在 jq 调用后添加此代码，它可以在任何 js 文件中

添加

if (typeof jQuery != 'undefined') { 
(function($) { 
       $(document).ready(function(){
        $('.carousel').each(function(index, element) {
                $(this)[index].slide = null;
               });
         });
 })(jQuery);
}
于 2012-10-11T01:13:43.777 回答
5

Benn 提供的同一事物的另一种实现是

if (typeof jQuery != 'undefined' && typeof MooTools != 'undefined' ) {
    Element.implement({
        slide: function(how, mode){
            return this;
        }
    });
}

我最终得到了什么——我创建了自定义 Mootools More构建而没有 Fx.Slide

于 2012-12-23T13:03:04.740 回答
0

问题是 Mootools 更多地与 twitter 引导程序发生冲突，这就是为什么它在轮播中表现得很奇怪。我建议你只使用 jQuery 或 Mootools。这里有一个引导 Mootools 实现：https ://github.com/anutron/mootools-bootstrap

于 2012-05-13T09:19:07.457 回答
0

有同样的问题。我正在使用一个名为 JB Library ( http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin ) 的插件，它有删除 Mootools 和/或的选项Mootools 来自管理员的更多信息。关闭“关闭”Mootools More 后，Carousel 的问题已“修复”。可能比评论更新内容更容易解决。当然，除非您需要 mootools-more.js 来获取网站上的其他内容。

希望很快会有更好的解决方案出现。

于 2012-06-19T10:07:05.060 回答
0

有同样的问题：Bootstrap carousel 在注册的前端没有工作，因为加载了 mootools-more.js。

我的解决方案：Jquery Easy Plugin ( http://www.simplifyyourweb.com/index.php/downloads/category/8-loading-jquery ) 在 Advanced Options 下带有“Remove Mootools when possible”选项。

于 2012-08-31T10:49:20.603 回答
0 
    (function($)
{
    $(document).ready(function(){
        var bootstrapLoaded = (typeof $().carousel == 'function');
        var mootoolsLoaded = (typeof MooTools != 'undefined');
        if (bootstrapLoaded && mootoolsLoaded) {
            Element.implement({
                hide: function () {
                    return this;
                },
                show: function (v) {
                    return this;
                },
                slide: function (v) {
                    return this;
                }
            });
        }
    });
})(jQuery);
于 2017-03-16T10:34:36.133 回答