试图让 FlexSlider jQuery Slider 与 Drupal 一起使用答案

【问题标题】：Trying to get FlexSlider jQuery Slider to work with Drupal试图让 FlexSlider jQuery Slider 与 Drupal 一起使用
【发布时间】：2013-03-20 19:20:09
【问题描述】：

我今天一直在努力让 FlexSlider http://flex.madebymufffin.com/ 与 Drupal 7 一起工作，因为它完全符合我的需求，而且如何让它工作的逻辑是有道理的，但实际上并没有奏效。

我的设置：使用 AdaptiveTheme 的子主题创建了一个自定义视图块，输出链接到节点的图像的无序列表。我已将适当的 FlexSlider 类应用于包装器和列表。在template.php中声明了两个js脚本在我的 theme.info 文件中声明了 flexslider.css

我是 drupal 的新手，更像是一个 CSS 类型的人 - 但我认为这是一个 jQuery 冲突/版本问题......

有什么想法吗？

这就是我在 template.php 中的内容

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="js/jquery.flexslider-min.js"></script>

  <script type="text/javascript">
      $(window).load(function() {
         $('.flexslider').flexslider();
      });
  </script>

</head>

@WChargin @TylerSmith 包装 jQuery 可能是解决方案，但我认为我在此过程中的某个地方出现了一些语法错误。或者它可能只是别的东西。

我假设我必须用这样的变量代码包装第三个脚本：

(function($) {
    $(window).load(function() { 
    $('.flexslider').flexslider();
})(jQuery);

但是当我把它放在我的 template.php 文件中时，它会导致网站无法加载。

【问题讨论】：

你能把你用来声明你的javascript的template.php中的代码贴出来吗？

标签： jquery drupal

【解决方案1】：

Drupal 7 要求您使用可变范围包装 jQuery。

(function($) {

  //jQuery can go in here

})(jQuery);

这有帮助吗？

编辑：我制作了 FlexSlider/已成功（非常轻松地）将它安装在 Drupal 7 设置 here 上。不管怎样，我应该可以帮你解决这个问题。

【讨论】：

【解决方案2】：

Drupal 7 Flexslider-我花了很长时间才找到它，但它确实是一个很好的。现在我知道了。完整的 jquery 调用：

<script type="text/javascript">
    (function($) {
      $(window).load(function() {
        $('.flexslider').flexslider();
      });
})(jQuery);

【讨论】：

【解决方案3】：

你需要通过template.php文件或预处理文件添加你的js和css。我有这个滑块与视图完美配合。

使用 drupal_add_js() 和 drupal_add_css()

下面的示例代码：sjm 是我的主题的名称。

文件template.php：注意我只在首页加载css和js：

<?php
sjm_preprocess();

/** F U N C T I O N S */
function sjm_preprocess() {
    // add the main SJM js
    drupal_add_js(drupal_get_path('theme', 'sjm') . '/js/sjm.js', array('scope' => 'header', 'weight' => 0));

    /** FRONT PAGE STUFF        */
    if (drupal_is_front_page()) {
        drupal_add_js(drupal_get_path('theme', 'sjm') . '/js/sjm_front.js', array('scope' => 'footer', 'weight' => 1));

        addFlexSlider();
    }
}

/** Flexslider 1.7  * */
function addFlexSlider() {
    drupal_add_js(drupal_get_path('theme', 'sjm') . '/js/FlexSlider-1.7/jquery.flexslider-min.js', array(
        'scope' => 'footer',
        'weight' => '1'
    ));
    drupal_add_css(drupal_get_path('theme', 'sjm') . '/js/FlexSlider-1.7/flexslider.css', array(
        'group' => CSS_THEME,
        'weight' => 0
    ));
}

?>

现在对于正在加载的js文件：sjm_front.js（sjm.js在不是站点前端时处理其他函数。）

文件：sjm_front.js

(function ($) { /* required to use the $ in jQuery */
    $('.featured-wrapper').hide(); /* hide the ul list first */
    $(document).ready(function () {  

        $(window).load(function () {

           addFlexSlider();
        });

    }); // end of $(document).ready()

    /** FlexSlider */
    function addFlexSlider(){
        $('.featured-wrapper').show().flexslider({
            animation: "slide",
            controlNav: false
        });
    }
    }

}(jQuery));

希望这会有所帮助！ :)

请尽快查看 seanjmorris.com.... 以查看此活动的版本。

【讨论】：

非常感谢！这就是我让它工作所需要的。只是一个小注释，文件末尾有一个额外的}：sjm_front.js

【解决方案4】：

当我需要做的只是从https://github.com/woothemes/FlexSlider/zipball/master 下载库文件并将它们添加到站点-->所有-->库文件夹中时，我花了 2 个小时试图解决这个问题，它立即起作用了！

【讨论】：