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


Установка Красивого Слайдера Rhinoslider

Автор romatex, 27 марта 2013 16:02

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

#1 romatex

romatex

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

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

Отправлено 27 Март 2013 - 16:02

Сайт разработчика http://rhinoslider.com/demo-download/

Разъясните по подробней как его ставить....какие файлы добавлять, что подключать, где что прописать?

#2 Stasya

Stasya

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

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

Отправлено 27 Март 2013 - 17:13

Вам необходимо скачать файлы данного слайдера, распаковать архив,  загрузить к себе в бэк-офис все файлы.В шаблоне HTML Вам необходимо в том же шаблоне  после строк
<title>{PAGE_TITLE}</title>
<meta name="keywords" content="{PAGE_META_KEYWORDS}" />
<meta name="description" content="{PAGE_META_DESCRIPTION}" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ru" />
<link rel="icon" href="{ASSETS_IMAGES_PATH}favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="{ASSETS_IMAGES_PATH}favicon.ico" type="image/x-icon" />
вставить строки 
<link type="text/css" rel="stylesheet" href="{ASSETS_STYLES_PATH}rhinoslider-1.05.css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}rhinoslider-1.05.min.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}mousewheel.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}easing.js"></script>
<script type="text/javascript">$(document).ready(function(){
$('#slider').rhinoslider();
});
</script>
После этого Вам осталось только вставить в HTML перед 
{BODY}
блок 
<div id="page">
<ul id="slider">
<li><img src="img/slider/01.jpg" alt="" /></li>
<li><img src="img/slider/02.jpg" alt="" /></li>
<li><img src="img/slider/03.jpg" alt="" /></li>
<li><img src="img/slider/04.jpg" alt="" /></li>
<li><img src="img/slider/05.jpg" alt="" /></li>
</ul>
</div

Прикрепленные файлы


#3 romatex

romatex

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

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

Отправлено 27 Март 2013 - 18:53

Благодарю за помощь!

И ещё надо изменить путь к картинкам.

Скрытый текст

#4 Stasya

Stasya

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

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

Отправлено 27 Март 2013 - 18:58

да, именно так.

#5 romatex

romatex

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

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

Отправлено 27 Март 2013 - 19:27

Он все-таки у меня криво как-то встал...не могли бы вы посмотреть в чем проблема? http://gutauto59.ru/

И ещё мой второй банер пропал....

#6 Stasya

Stasya

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

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

Отправлено 27 Март 2013 - 19:39

Я так понимаю у Вас 2 слайдера на страничке. Поэтому происходит конфликт стилей.

#7 romatex

romatex

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

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

Отправлено 28 Март 2013 - 08:26

тоесть лучше убрать? или все же как-то можно обойти этот конфликт?

#8 Stasya

Stasya

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

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

Отправлено 28 Март 2013 - 10:07

Этот конфликт можно обойти  при помощи усатновки jQwery и jQwery Migrate plugin. Он поможет убрать конфликт и создаст совместимость слайдерам. Скачать егo можно на официальном сайте jQwery. После того как Вы его скачаете и установите Вам необходимо будет его подключить. Для этого в шаблоне HTML после строк 
<title>{PAGE_TITLE}</title>
<meta name="keywords" content="{PAGE_META_KEYWORDS}" />
<meta name="description" content="{PAGE_META_DESCRIPTION}" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ru" />
<link rel="icon" href="{ASSETS_IMAGES_PATH}favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="{ASSETS_IMAGES_PATH}favicon.ico" type="image/x-icon" />
вставить строку 
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
Или же можно попробовать поставить слайдеры одного типа nivo( к примеру). Но тогда тоже придется немного поменять стили( так как слайдеры располагаются по разному). Зайдя на Ваш сайт, увидела, что Вы их оба удалили. Если же все-таки Вы решите  их вернуть, не забудьте выполнить всю инструкцию по установке слайдеров, включая прописывание скриптов для  файлов формата JS.

#9 romatex

romatex

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

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

Отправлено 06 Апрель 2013 - 07:57

удалил все слайдеры чтобы заново все поставить....решил только один сделать, все файлы закачал, все везде прописал....а слайдер не хочет появляться...посмотрите в чем проблема, пожалуйста

#10 miyako

miyako

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

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

Отправлено 06 Апрель 2013 - 08:37

Просмотр сообщенияromatex (06 Апрель 2013 - 07:57) писал:

удалил все слайдеры чтобы заново все поставить....решил только один сделать, все файлы закачал, все везде прописал....а слайдер не хочет появляться...посмотрите в чем проблема, пожалуйста

Какой инструкцией по установке вы пользовались?
Пришлите пожалуйста код слайдера.
Также заметила в файле стилей для слайдера вам нужно исправить пути.
Например, вместо этого кода:
div#nyroModalFull div#nyroModalWrapper div#nyroModalContent a.nyroModalNext:hover {
background-image: url(images/nyroModal.next.gif);
}
Вам нужно исправить на:
div#nyroModalFull div#nyroModalWrapper div#nyroModalContent a.nyroModalNext:hover {
background-image: url({ASSETS_IMAGES_PATH}nyroModal.next.gif);
}
При этом nyroModal.next.gif  вас должен загружен через Сайт-Редактор тем-Файлы

#11 romatex

romatex

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

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

Отправлено 06 Апрель 2013 - 12:05

Просмотр сообщенияmiyako (06 Апрель 2013 - 08:37) писал:

Какой инструкцией по установке вы пользовались?
Пришлите пожалуйста код слайдера.
Также заметила в файле стилей для слайдера вам нужно исправить пути.
Например, вместо этого кода:
div#nyroModalFull div#nyroModalWrapper div#nyroModalContent a.nyroModalNext:hover {
background-image: url(images/nyroModal.next.gif);
}
Вам нужно исправить на:
div#nyroModalFull div#nyroModalWrapper div#nyroModalContent a.nyroModalNext:hover {
background-image: url({ASSETS_IMAGES_PATH}nyroModal.next.gif);
}
При этом nyroModal.next.gif  вас должен загружен через Сайт-Редактор тем-Файлы

пользовался инструкцией от пользователя Stasya, описанном выше в этой теме.

тот блок,который вы написали не относится к слайдеру.

#12 miyako

miyako

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

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

Отправлено 06 Апрель 2013 - 12:17

Просмотр сообщенияromatex (06 Апрель 2013 - 12:05) писал:

пользовался инструкцией от пользователя Stasya, описанном выше в этой теме.

тот блок,который вы написали не относится к слайдеру.

Не нашла у вас подключенных скриптов:
<link type="text/css" rel="stylesheet" href="{ASSETS_STYLES_PATH}rhinoslider-1.05.css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}rhinoslider-1.05.min.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}mousewheel.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}easing.js"></script>
Возможно вы их не загрузили на сайт

#13 romatex

romatex

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

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

Отправлено 06 Апрель 2013 - 15:19

да вроде как все подключил....

Прикрепленные изображения

  • q1.JPG

#14 Stasya

Stasya

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

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

Отправлено 06 Апрель 2013 - 16:55

А jQwery скачивали? Так как Вы хотите установить два разных слайдера это просто необходимо. В противном случае они у Вас так и будут конфликтовать. Не забудьте так же в прописать вот этот скрипт 
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
после выше присланного Вами кода.

#15 romatex

romatex

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

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

Отправлено 06 Апрель 2013 - 18:01

Просмотр сообщенияStasya (06 Апрель 2013 - 16:55) писал:

А jQwery скачивали? Так как Вы хотите установить два разных слайдера это просто необходимо. В противном случае они у Вас так и будут конфликтовать. Не забудьте так же в прописать вот этот скрипт 
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
после выше присланного Вами кода.
я передумал два слайдера ставить, и по ходу дела где-то остались частички от предыдущего слайдера, так как Ринослайдер так и не заработал. Подскажите где трабл?

#16 Stasya

Stasya

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

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

Отправлено 06 Апрель 2013 - 19:57

Попробуйте проделать всю инструкцию по  установке Ринослайдера, предварительно удалив все относящееся к нинослайдеру.

#17 romatex

romatex

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

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

Отправлено 07 Апрель 2013 - 11:59

пока что мучаюсь с Ринослайдер, подскажите как можно подробнее как установить вот этот слайдер....
http://active.tutspl...er-xml-gallery/

#18 Koderhan

Koderhan

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

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

Отправлено 08 Апрель 2013 - 10:25

Подробная инструкция про установку слайдера http://storeland.ru/about/faq#51

#19 Stasya

Stasya

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

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

Отправлено 08 Апрель 2013 - 14:48

Просмотр сообщенияromatex (07 Апрель 2013 - 11:59) писал:

пока что мучаюсь с Ринослайдер, подскажите как можно подробнее как установить вот этот слайдер....
http://active.tutspl...er-xml-gallery/
  Не советую Вам устанавливать данный слайдер, так как его установка довольно сложна.

#20 Hitman42

Hitman42

    Пользователь

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородДонецк

Отправлено 22 Апрель 2013 - 12:38

Просмотр сообщенияStasya (27 Март 2013 - 17:13) писал:

Вам необходимо скачать файлы данного слайдера, распаковать архив,  загрузить к себе в бэк-офис все файлы.В шаблоне HTML Вам необходимо в том же шаблоне  после строк
<title>{PAGE_TITLE}</title>
<meta name="keywords" content="{PAGE_META_KEYWORDS}" />
<meta name="description" content="{PAGE_META_DESCRIPTION}" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ru" />
<link rel="icon" href="{ASSETS_IMAGES_PATH}favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="{ASSETS_IMAGES_PATH}favicon.ico" type="image/x-icon" />
вставить строки 
<link type="text/css" rel="stylesheet" href="{ASSETS_STYLES_PATH}rhinoslider-1.05.css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}rhinoslider-1.05.min.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}mousewheel.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}easing.js"></script>
<script type="text/javascript">$(document).ready(function(){
$('#slider').rhinoslider();
});
</script>
После этого Вам осталось только вставить в HTML перед 
{BODY}
блок 
<div id="page">
<ul id="slider">
<li><img src="img/slider/01.jpg" alt="" /></li>
<li><img src="img/slider/02.jpg" alt="" /></li>
<li><img src="img/slider/03.jpg" alt="" /></li>
<li><img src="img/slider/04.jpg" alt="" /></li>
<li><img src="img/slider/05.jpg" alt="" /></li>
</ul>
</div
ПРоделал всё описанное Вами, но получаю вот такое в чём беда?

Вопрос снят. Нашел, что надо поменять. Всего-то надо вот это:
<script type="text/javascript" src="{ASSETS_JS_PATH}rhinoslider-1.05.min.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}mousewheel.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}easing.js"></script>
<script type="text/javascript">$(document).ready(function(){
$('#slider').rhinoslider();
});
</script>
<script type="text/javascript" src="{ASSETS_STYLES_PATH}jquery-migrate-1.1.1.js"></script>
вставить сюда: 
 <!-- Скрипты магазина -->
<script type="text/javascript" src="{ASSETS_STYLES_PATH}jquery-migrate-1.1.1.js"></script>

Обратно в Главная


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Мокко
  5. → Главная
  6. Privacy Policy