Попытка заставить FlexSlider jQuery Slider работать с Drupal - PullRequest
Новая
       1

Попытка заставить FlexSlider jQuery Slider работать с Drupal

0 голосов
/ 24 сентября 2011

Я боролся с тем, чтобы заставить FlexSlider http://flex.madebymufffin.com/ работать с Drupal 7 все сегодня, так как это идеально подходит для моих нужд, и логика того, как заставить это работать, имела смысл, но на самом деле не работала.

Моя настройка: использование подтемы AdaptiveTheme Создан пользовательский блок просмотра, который выводит неупорядоченный список изображений, которые ссылаются на узел.Я применил соответствующие классы FlexSlider к оболочке и списку.Объявил два js-скрипта в файле template.php Объявил flexslider.css в моем файле theme.info

Я новичок в 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это заставляет сайт не загружаться.

Ответы [ 4 ]

1 голос
/ 06 мая 2012

Drupal 7 Flexslider. Мне потребовалось много времени, чтобы найти это, но оно действительно было хорошим. Теперь я знаю. Полный вызов jquery: 

<script type="text/javascript">
    (function($) {
      $(window).load(function() {
        $('.flexslider').flexslider();
      });
})(jQuery);
1 голос
/ 24 сентября 2011

Drupal 7 требует, чтобы вы обернули ваш jQuery переменной областью действия. 

(function($) {

  //jQuery can go in here

})(jQuery);

Помогает ли это?

Редактировать: Я сделал FlexSlider / успешно (с большой легкостью) установил его на настройке Drupal 7 здесь . Так или иначе, я смогу помочь тебе разобраться с этим.

0 голосов
/ 03 ноября 2012

Потратил 2 часа, пытаясь решить эту проблему, когда все, что мне нужно было сделать, это загрузить файлы библиотеки из https://github.com/woothemes/FlexSlider/zipball/master, добавить их в папку сайтов -> все -> библиотеки, и это сработало ... немедленно!

0 голосов
/ 05 октября 2011

Вам нужно добавить свои js и css через файл template.php или файл предварительной обработки. У меня этот слайдер отлично работает с видом.

используйте 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 в ближайшее время ...., чтобы увидеть активную версию этого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...