Перейти к содержимому


Установка Слайдера Flex

слайдер

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 5

#1 david_gabriel

david_gabriel

    Новичок

  • Пользователи
  • Pip
  • 5 сообщений

Отправлено 01 Декабрь 2012 - 06:35

Добрый день!  Вот уже не сколько дней штудирую форум в поисках ответа на вопрос об установке слайдера на главной странице. Шаблон Nyvo получилось поставить с первого раза, даже потом вставил в него свои картинки и так все работало. но я хочу поставить другой слайдер -  Flex. Делаю всё, как написано в форуме в постах про сам Nyvo, так и в посте про Flexslider. Но ничего не работает. в лучшем случае просто появляются  статичные картинки и все. Помогите разобраться, что я делаю не так. Спасибо.



!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

<link rel="stylesheet" href="{ASSETS_STYLES_PATH}flexslider.css" type="text/css">
<script src="{ASSETS_JS_PATH}jquery.flexslider.js" type="text/javascript"></script>
<script src="{ASSETS_JS_PATH}jquery.flexslider-min.js" type="text/javascript"></script>


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










{% IF index_page %}
  <!-- Обёртка, указывающая стиль темы -->
  <div class="theme-default" style="padding:1em;display:none;">
<!-- Непосредственный код слайдера -->
<div id="slider">
<img src="http://files.storela.../324096/01.jpg" />" alt="" />
  <a href="/"><img src="http://files.storela.../324097/02.jpg" />" alt="" /></a>
  <img src="http://files.storela.../324098/03.jpg" />g" alt="" title="Пример картинки с заголовком" />
<img src="http://files.storela.../324099/04.jpg" />
<img src="http://files.storela...3240100/05.jpg" />
</div>
  </div>

  <!-- Запуск слайдера -->
  <script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show();
});
  </script>
  {% ENDIF %}

#2 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 01 Декабрь 2012 - 09:33

Просмотр сообщенияdavid_gabriel (01 Декабрь 2012 - 06:35) писал:

Добрый день!  Вот уже не сколько дней штудирую форум в поисках ответа на вопрос об установке слайдера на главной странице. Шаблон Nyvo получилось поставить с первого раза, даже потом вставил в него свои картинки и так все работало. но я хочу поставить другой слайдер -  Flex. Делаю всё, как написано в форуме в постах про сам Nyvo, так и в посте про Flexslider. Но ничего не работает. в лучшем случае просто появляются  статичные картинки и все. Помогите разобраться, что я делаю не так. Спасибо.

  <!-- Запуск слайдера -->
  <script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show();
});
  </script>
  {% ENDIF %}
Данный скрипт относится к другому слайдеру. у Вас выше написан скрипт, который нужно было вставить сюда
У Вас должно быть так
{% IF index_page %}
<!-- Обёртка, указывающая стиль темы -->
<div class="theme-default" style="padding:1em;display:none;">
<!-- Непосредственный код слайдера -->
<div id="slider">
<img src="http://files.storela.../324096/01.jpg" />" alt="" />
<a href="/"><img src="http://files.storela.../324097/02.jpg" />" alt="" /></a>
<img src="http://files.storela.../324098/03.jpg" /> alt="" title="Пример картинки с заголовком" />
<img src="http://files.storela.../324099/04.jpg" />
<img src="http://files.storela...3240100/05.jpg" />
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
{% ENDIF %}

Также, проверьте загрузились ли все эти файлы: flexslider.css, jquery.flexslider.js, jquery.flexslider-min.js. Также возможно есть изображения, которые тоже нужны для данного слайдера (например стрелочки или фон). Эти изображения обычно формата png в архиве слайдера находятся при скачивании.
Напишите адрес своего сайта или id, чтобы мы смогли посмотреть наглядно в чем у Вас проблема.

#3 david_gabriel

david_gabriel

    Новичок

  • Пользователи
  • Pip
  • 5 сообщений

Отправлено 01 Декабрь 2012 - 16:13

Здравствуйте, благодарю Вас за ответ. Я сделал все, как вы говорили, но пока так ничего и не получилось.
Мой сайт:
fruktonos-tver.ru

Вообще, хотелось бы уточнить, правильно ли я понимаю сам алгоритм действий при установке любого слайдера.
1. Загрузить все css  ,  js   и картинки из папки Image в "редакторе тем".
2. В шаблоне HTML после основного скрипта добавить ссылки на файлы css и   js , пример:
    link rel="stylesheet" href="{ASSETS_STYLES_PATH}nyvo.css" type="text/css" media="screen" />
    <script src="{ASSETS_JS_PATH}jquery.flexslider.js" type="text/javascript"></script>
    <script src="{ASSETS_JS_PATH}jquery.flexslider-min.js" type="text/javascript"></script>

3. В том же шаблоне HTML прописать код самого слайдера. (При этом есть вопрос: прописывать код, который указан на вашем сайте или тот, что идет в составе архива нового слайдера?)

4. После кода слайдера поместить скрипт с кодом его запуска. (Опять таки, вопрос - прорисывать его так, как показано на примере nyvo, или как предлагает разработчик? И ещё: этот код ставить сразу после кода слайдера, или после скрипта с сылками на файлы css, js?

Заранее благодарю за ответ?

#4 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 01 Декабрь 2012 - 16:44

Просмотр сообщенияdavid_gabriel (01 Декабрь 2012 - 16:13) писал:

Здравствуйте, благодарю Вас за ответ. Я сделал все, как вы говорили, но пока так ничего и не получилось.
Мой сайт:
fruktonos-tver.ru

Вообще, хотелось бы уточнить, правильно ли я понимаю сам алгоритм действий при установке любого слайдера.
1. Загрузить все css  ,  js   и картинки из папки Image в "редакторе тем".
2. В шаблоне HTML после основного скрипта добавить ссылки на файлы css и   js , пример:
link rel="stylesheet" href="{ASSETS_STYLES_PATH}nyvo.css" type="text/css" media="screen" />
<script src="{ASSETS_JS_PATH}jquery.flexslider.js" type="text/javascript"></script>
<script src="{ASSETS_JS_PATH}jquery.flexslider-min.js" type="text/javascript"></script>

3. В том же шаблоне HTML прописать код самого слайдера. (При этом есть вопрос: прописывать код, который указан на вашем сайте или тот, что идет в составе архива нового слайдера?)

4. После кода слайдера поместить скрипт с кодом его запуска. (Опять таки, вопрос - прорисывать его так, как показано на примере nyvo, или как предлагает разработчик? И ещё: этот код ставить сразу после кода слайдера, или после скрипта с сылками на файлы css, js?

Заранее благодарю за ответ?

1. Код слайдера вместе с <script> ... </script> нужно брать из архива Вашей галереи. Если Вы его хотите использовать на нескольких страница, то вставляйте под
	<script src="{ASSETS_JS_PATH}jquery.flexslider.js" type="text/javascript"></script>
	<script src="{ASSETS_JS_PATH}jquery.flexslider-min.js" type="text/javascript"></script>
Если только на конкретной странице, то вставляйте под кодом слайдера.
Из нашего примера Вам ничего брать не нужно для Вашей другой галереи. Все css и js  и другой код там абсолютно разные. Все берете только из архива Вашей галереи

#5 david_gabriel

david_gabriel

    Новичок

  • Пользователи
  • Pip
  • 5 сообщений

Отправлено 01 Декабрь 2012 - 17:10

Спасибо за ответ. Пока результат тот же - никакой.
Я хотел поставить слайдер вот отсюда: http://www.woothemes.com/flexslider/

Выполнил все три шага, которые они там указывают. При этом, они пишут, даже сами файлы со скриптами грузить не надо - указывают в коде ссылку на Гугле, где лежат исходники.

Результат:  три маленькие точки под строкой меню...

Привожу код, посмотрите, пожалуйста, ещё раз:




<!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}flexslider.css"></script>
  <link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googlea...n.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

Слайдер:


<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src=""http://files.storela...329623/01.jpg"" />
    </li>
    <li>
      <img src=""http://files.storela...329624/02.jpg"" />
    </li>
    <li>
      <img src=""http://files.storela...329625/03.jpg"" />
    </li>
  </ul>
</div>
       {BODY}

#6 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 02 Декабрь 2012 - 12:04

Все же некоторые скрипты на сайт нужно загрузить.
Чтобы слайдер заработал.
И кстати.Слайдер очень похож на слайдер описанный тут. http://storeland.ru/about/faq#51
Вот архив с измененным css файлом из их сайта.
Прикрепленный файл  flexslider.css   3,77К   505 Количество загрузок:
Загрузите себе на сайт этот файл стилей и еще два файла.
А именно:
jquery.flexslider.js,
bg_direction_nav.png
файл с скриптом и файл с кнопками.
Теперь в редакторе тем. (Сайт-Редактор тем).
Открыть файл HTML.
После кода:

<!-- Скрипты магазина -->
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

Вставить:
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}flexslider.css" type="text/css">
<script src="{ASSETS_JS_PATH}jquery.flexslider.js"></script>

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>

Затем вставить код вывода слайдера до переменной {body}.
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
	 <img src="{ASSETS_IMAGES_PATH}slide1.jpg" />
</li>
<li>
	 <img src="{ASSETS_IMAGES_PATH}slide2.jpg" />
</li>
<li>
	 <img src="{ASSETS_IMAGES_PATH}slide3.jpg" />
</li>
</ul>
</div>
Переменная {ASSETS_IMAGES_PATH} выводит путь до картинки которая загружена на ваш сайт.Если картинка загружена на ваш сайт то достаточно в коде указать имя картинки и переменную {ASSETS_IMAGES_PATH} перед именем картинки.Так же, возможно вам будет интересно эта тема.
http://forum.storela...дер/#entry32258
Удачи!





Темы с аналогичным тегами слайдер

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных