Форум русской поддержки Joomla!® CMS
11.12.2016, 13:55:59 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Не запускается bootstrap carousel

 (Прочитано 2946 раз)
0 Пользователей и 1 Гость смотрят эту тему.
KonaeJer
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 8


« : 05.11.2014, 19:48:56 »

Приветствую!
По мотивам  этой темы ( http://joomlaforum.ru/index.php/topic,296434.0.html ) тоже имел схожую проблему. Сделал так же, как и посоветовал пользователь под ником fagtr и все заработало, НО сама каруселька не запускается автоматически, а только по нажатию на стрелку.
Пробовал добавить сразу после кода карусельки скрипт ее запуска, который вычитал на форуме бутстрапа, не помогло. Joomla 3.3.6

Сам скрипт
Код:
<script type="text/javascript">$(function(){ $('#elementID').carousel(); }); </script>

Сам код
Код:
<div class="mainContent">
                    <?php JHtml::_('bootstrap.framework'); JHtml::_('bootstrap.carousel', 'myCarousel', array('interval'=>500, 'pause'=>'hover')); ?>
                    <div id="myCarousel" class="carousel slide">                        
                        <div class="carousel-inner">
                            <div class="active item">
                            <img src="/templates/rightsport/images/banner1.png"/>
                            </div>
                            <div class="item">
                            <img src="/templates/rightsport/images/banner2.png"/>
                            </div>
                        </div>
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                    </div>
                    <script type="text/javascript">$(function(){ $('#elementID').carousel(); }); </script>
                </div>

Буду очень благодарен за помощь, второй день не могу заставить ее запуститься в автоматическом режиме =/
Записан
fbr
Живу я здесь
******

Репутация: +136/-6
Offline Offline

Сообщений: 1251


« Ответ #1 : 05.11.2014, 21:05:24 »

<script type="text/javascript">$(function(){ $('#elementID').carousel(); }); </script>
нету такого id у вас в коде ..
поставьте реальный id
Записан
KonaeJer
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 8


« Ответ #2 : 05.11.2014, 21:15:45 »

myCarousel? Поставил, все равно не запускается..
Записан
fbr
Живу я здесь
******

Репутация: +136/-6
Offline Offline

Сообщений: 1251


« Ответ #3 : 05.11.2014, 21:23:39 »

попробуйте так:
Код
<script type="text/javascript">
 
!function ($) {
 $(function() {
     $('#myCarousel').carousel(interval: 500);
 });
}(window.jQuery)
 
</script>
Записан
KonaeJer
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 8


« Ответ #4 : 05.11.2014, 21:29:36 »

Не дало результата.
Записан
zomby6888
Живу я здесь
******

Репутация: +168/-3
Online Online

Пол: Мужской
Сообщений: 1538


« Ответ #5 : 05.11.2014, 23:26:02 »

вместо:
Код
JHtml::_('bootstrap.carousel', 'carousel', array('interval'=>500,array('interval'=>500, 'pause'=>'hover')));
 
прописать:
Код
$doc = JFactory::getDocument();
$doc->addScriptDeclaration('
   jQuery(document).ready(function($) {
        $("#myCarousel").carousel({interval: 500, pause: "hover"});
   });
'
);
 
Записан
KonaeJer
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 8


« Ответ #6 : 06.11.2014, 10:51:39 »

Это тоже не заработало. Возможно ли что-то конфликтует? 
Записан
zomby6888
Живу я здесь
******

Репутация: +168/-3
Online Online

Пол: Мужской
Сообщений: 1538


« Ответ #7 : 06.11.2014, 12:08:09 »

ошибки в консоле смотрите
Записан
KonaeJer
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 8


« Ответ #8 : 06.11.2014, 12:29:59 »

Код:
"NetworkError: 404 Not Found - http://firsttemplate/js/bootstrap.js"
Только это, но довольно странно, подключено вроде верно, тут сложно ошибиться.
Записан
zomby6888
Живу я здесь
******

Репутация: +168/-3
Online Online

Пол: Мужской
Сообщений: 1538


« Ответ #9 : 06.11.2014, 12:40:42 »

Странноо что у вас вобще работает. Еще раз убедитесь что присутствуют строчки:
Код
<?php 					
JHtml::_('bootstrap.framework');
$doc = JFactory::getDocument();
$doc->addScriptDeclaration('
jQuery(document).ready(function($) {
$("#myCarousel").carousel({interval: 500, pause: "hover"});
});
'
);
?>
 

Проверьте подключен ли bootstrap на странице в head. должен быть подключен по пути /sitename/media/jui/js/bootstrap.min.js
А тот на который ругается консоль, он вобще не понятно откуда.
Записан
KonaeJer
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 8


« Ответ #10 : 06.11.2014, 16:15:44 »

Немного пошаманив я понял в чем проблема, адрес не был правильно указан.
Но теперь в консоле есть такая ошибка:
Код:
TypeError: jQuery(...).on is not a function


jQuery(window).on('load',  function() {
Записан
zomby6888
Живу я здесь
******

Репутация: +168/-3
Online Online

Пол: Мужской
Сообщений: 1538


« Ответ #11 : 06.11.2014, 16:28:59 »

Цитировать
TypeError: jQuery(...).on is not a function

Древняя версия jQuery. Вам нужна версия 1.7 и выше. Почему вы не подгружаете скрипты простой строчкой: JHtml::_('bootstrap.framework'); Это должно подключить и фреймворк и jquery. От остальных jquery и bootstrap надо избавлятся. Если хотите самые свежие версии использовать заменяйте ими стандартные..
« Последнее редактирование: 06.11.2014, 16:36:18 от zomby6888 » Записан
KonaeJer
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 8


« Ответ #12 : 06.11.2014, 16:35:09 »

Весь мой код выглядит так:

Код:
<?php
defined('_JEXEC') or die;
$params = JFactory::getApplication()->getTemplate(true)->params;
$app      = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language =$doc->language;
$this->direction = $doc->direction;
JHtml::_('bootstrap.framework');
$tmpl_logo=$this->params->get('logo');
?>
<!DOCTYPE HTML>
<html>
    <head>
        <jdoc:include type="head" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

<body>
...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/bootstrap.js" type="text/javascript"></script>
</body>

Что здесь не верно?

Сейчас попробую заменить
 
Записан
zomby6888
Живу я здесь
******

Репутация: +168/-3
Online Online

Пол: Мужской
Сообщений: 1538


« Ответ #13 : 06.11.2014, 16:37:59 »

Цитировать
Что здесь не верно?
вот эти строчки:
Цитировать
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/bootstrap.js" type="text/javascript"></script>

убрать нафиг
нельзя допускать чтобы одни и те же скрипты подключались дважды
« Последнее редактирование: 06.11.2014, 16:42:52 от zomby6888 » Записан
KonaeJer
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 8


« Ответ #14 : 06.11.2014, 16:56:09 »

Запустил через Chrome просмотр кода, увидел, что в самом конце подгружается скрипт Jquery версии 1.6.2 от стороннего плагина. Я его еще давным давно установил(плагин) и забыл про него. Теперь всё работает, как всегда решение лежит на поверхности )
Спасибо, zomby6888, за помощь!
Записан
Mega-e
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 28



« Ответ #15 : 11.12.2015, 15:48:38 »

Автозапуск карусели не работает из-за конфликта с mootools-more.js

Чтобы решить эту проблему, перед блоком карусели нужно поставить скрипт:
Код:
<script type="text/javascript">jQuery(document).ready(function(){ jQuery('.carousel').each(function(index, element) { jQuery(this)[index].slide = null; }); jQuery('.carousel').carousel('cycle'); });</script>

Источник
« Последнее редактирование: 11.12.2015, 15:57:59 от Mega-e » Записан
keramzit_001
Захожу иногда
**

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 15



« Ответ #16 : 20.06.2016, 13:30:19 »


Mega-e плюс в карму!

У меня немного другие последствия этого конфликта возникали. Нарушалась HTML структура слайдера. Дополнительный внешний div "нарисовывался" со свойствами меняющимися js-ом. Долго не мог поймать конфликтующий скрипт.

Нормальная структура слайдера.
Показать текстовый блок

Конфликтная структура слайдера.
Показать текстовый блок

Ну и как следствие работы mootools-more.js замечательные свойства, которые прятали картинку при смене.
Код
margin: 0px 0px 18px; position: relative; overflow: hidden; height: 0;
 

Ну и чтоб далеко не ходить решение:
Код
$document = JFactory::getDocument();
$document->addScriptDeclaration('jQuery(document).ready(function($){
           jQuery(".carousel").each(function(index, element) {
               jQuery(this)[index].slide = null;
           });
           jQuery(".carousel").carousel("cycle");
       });'
);
 
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet