Конфликт jQuery или потеряны пути к скрипту?

Разработчикам Общение разработчиков
1

На Хабре попался скрипт ротации изображений на jQuery. Решил посмотреть как будет выглядеть сие чудо на странице категорий.

  1. Создал в корне папку rotator и в нее закинул папки с файлами:
  • rotator/js/jquery.rotator.js
  • rotator/images/img1.jpg + img1.jpg + img3.jpg
  • rotator/styles/style.css

  1. В файле jquery.rotator.js подключаются картинки:

    ;(function($){
    var defaults = {
    slides: [
    {url:‘httр://sitе.ru/disc4’,img:‘images/img1.jpg’},
    {url:‘httр://sitе.ru/disc7’,img:‘images/img2.jpg’},
    {url:‘httр://sitе.ru/disc8’,img:‘images/img3.jpg’}
    ],
    speed: 500,
    timeout: 3000,
    width: 200,
    height: 450,
    random: true,
    autorun: true,
    fx: ‘fade’,
    nav: false
    };
    $.rotator = function(e, o) { …

  2. В макете в поле пользовательского html-кода подключил скрипт:

    <scriрt type=“text/javascript” src=“rotator/js/jquery.rotator.js”>

  3. В блоке добавил Код:

    < div class=“rotator” id=“rotator”></ div>

Проблема в том, что в том месте где вроде бы должны появиться картинки пусто. Тыкался полдня,так и не смог разобраться в чем закавыка. Подскажите, мной неправильно указаны пути к скрипту в макете, к картинкам в скрипте или же это связано с конфликтом скрипта с уже имеющимся в коробке jQuery?

2

Вы прямо внутри скрипта библиотеки прописали свои картинки? :slight_smile:

Попробуйте для начала в каком-нибудь одном шаблоне (HTML/Smarty) подключить всё сразу (стили и скрипты библиотеки, ваш скрипт с инициализацией библиотеки) и проверить, работает ли вообще то, что вы хотите. Если заработало, то можете затем разделять по файлам и делать “красиво”.

3

Работает, если страница на которой отображаются картинки расположена в корне (для проверки я создал html файл), а а вот на странице категории не хочет.

Summary

Мой пример amedey.ru/aindex.html Скрипт habr.com/ru/post/130840/

4

Я имел ввиду внутри CS-Cart проверить на одной странице.

А проще всего повторить так, как сделано в аналогичных решениях внутри коробки. Посмотреть, где обычно лежат стили, изображения. Где лежат скрипты и их инициализация. Как они подключаются.

5

Вынес папку rotator на поверхность для удобства, чтобы в будущем можно было редактировать (менять изображения) без поисков файла в глубинах cms.

6

Если все потроха запихнуть в блок HTML/Smarty, то на странице ошибка Syntax error in template “0ae564311b8545f9908268117d0b7626baca045b” on line 9 “$(’#rotator1’).rotator({fx:‘slide’,autorun: true, nav: true});” - Unexpected “:”, expected one of: “}”

7

В Smarty нужно экранировать символы {literal} https://www.smarty.net/docs/en/language.function.literal.tpl. А так же {ldelim} и {rdelim}
https://www.smarty.net/docs/en/language.function.ldelim.tpl

8

Спасибо, подсказка избавила от уведомления об ошибке, но не явила картинки. :smirk:

9

В блоке HTML/Smarty получилась такая сборка. Стилевая подтягивается, а картинки из скрипта нет.

< link href=“am-banner-categories/styles/styles.css” rel=“stylesheet” type=“text/css” />
< script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
< script type=“text/javascript”>
window.jQuery || document.write(’< script type=“text/javascript” src=“rotator/js/jquery-1.6.2.min.js”></ script>’);
< /script>
< script type=“text/javascript” src=“rotator/js/jquery.rotator.js” data-no-defer>
< script type=“text/javascript”>
{literal}
$(function(){
$(’#rotator1’).rotator({fx:‘slide’,autorun: true, nav: true});
$(’#rotator2’).rotator({fx:‘fade’,autorun: true, nav: false});
})
{/literal}
< /script>
< div class=“wrap”>
< div class=“rotator” id=“rotator1”></ div>
< div class=“rotator” id=“rotator2”></ div>
< /div>

10

@avoronin Сегодня продолжил пытку. Получается так, что скрипт работает только, если он находится в блоке HTML/Smarty. Если же скрипт, а точнее ссылка на него размещена в макете в поле пользовательского html-кода, чтобы она была между тегами < head></ head>, то скрипт перестает работать. Как минимум это странно.

11

Что-то у вас странное:

  1. jQuery подключать дополнительно не нужно. В CS-Cart он уже встроен.
  2. Зачем подключаете два раза jQuery?
  3. Загрузку и выполнение скриптов библиотеки и своих лучше делать после загрузки страницы и jQuery.

Посмотрите в сторону моего ответа в другой теме:

12

Вы имеете ввиду это?
ajax.googleapis.cоm/ajax/libs/jquery/1.6.2/jquery.min.js
rotator/js/jquery-1.6.2.min.js