Question

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

我的设置：使用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文件中时，会导致网站无法加载。

Answer 1

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

(function($) {

  //jQuery can go in here

})(jQuery);

这有帮助吗？

编辑：我使FlexSlider成功（非常轻松）将其安装在Drupal 7设置here上。无论如何，我应该能够帮助你解决这个问题。

Answer 2

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

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

Answer 3

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

使用drupal_add_js（）和drupal_add_css（）

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

file 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.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 ....查看此版本的有效版本。

Answer 4

花了2个小时试图解决这个问题，当我需要做的就是从https://github.com/woothemes/FlexSlider/zipball/master下载库文件时将它们添加到网站 - ＆gt;所有 - ＆gt; libraries文件夹中并且它有效...立即！

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

4 个答案: