#1 2011-08-21 18:45

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

Установка Nivo Slider на вебасист

Помогите поставить, в архиве есть demo папка, пытаюсь код с нее вставить произвольно в Основную разметку над поиском, но слайдер просто закрывает собой все, и поиск и категории

Зы.. в какую папку заливать скрипты, стили и темы слайдера?

Заранее спасибо за помощь


Демо - http://nivo.dev7studios.com/pricing/
Скачать - http://dev7studios.com/downloads/42

Неактивен

 

#2 2012-08-21 21:32

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

Re: Установка Nivo Slider на вебасист

Установка:
1. Распаковываем архив скаченный с http://nivo.dev7studios.com/demos/
2. Копируем файлы nivo-slider.css в папку   сайт/published/SC/html/scripts/css/
3. Копируем файлы jquery.nivo.slider.pack.js в папку  сайт/published/SC/html/scripts/js/
4. Подключаем файлы слайдера — NivoSlider CSS, Jquery, NivoSlider в HEAD после

Код:

<script type="text/javascript" src="{$smarty.const.URL_JS}/niftycube.js"></script>

добавляем

Код:

<link rel="stylesheet" href="{$smarty.const.URL_CSS}/nivo-slider.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="{$smarty.const.URL_JS}/jquery.nivo.slider.js"></script>

(<script src="http://code.jquery.com/jquery-latest.js"></script>  - этот код всегда последняя версия  Jquery)

5. Затем вставляем в  страницу основная разметка в режиме редактирование HTML-кода блок со слайдером:

Код:

<div id="slider">
       <div>
            <h1>Первый слайд</h1>
            <p><img src='/img/1111.jpg' ></p>
       </div>
       <div>
           <h1>Второй слайд</h1>
           <p><img src='/img/1112.jpg' ></p>
       </div>
       <div>
           <h1>Третий слайд</h1>
           <p><img src='/img/1113.jpg' ></p>
       </div>
       <div>
           <h1>Четвертый слайд</h1>
           <p><img src='/img/1114.jpg' ></p>
       </div>
</div>

где 1111.jpg, 1112.jpg, 1113.jpg, 1114.jpg картинки слайдера

6. В заключении вставляем в HEAD  функцию  вызова слайдера:

Код:

{literal}<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>{/literal}

Можно вставить и так

Код:

<script type="text/javascript">{literal}
$(window).load(function() {
$('#slider').nivoSlider();
});
{/literal}</script>

Один фиг!!! слайдер работает только в режиме редактирования - Редактор дизайна из админки

Вероятней всего есть несколько причин почему не работает слайдер на сайте:

1. Функция  вызова слайдера НЕ КОРРЕКТНО написана и игнорируется скриптом

2. Функцию  вызова слайдера нужно вставлять не HEAD а в другое место.

Данная тема обсуждалась и здесь http://forum.webasyst.ru/viewtopic.php?id=16251 - решения не было

Мастера поправьте пожалуйста, дайте зацепочку?

Отредактировано alekfilatow (2012-08-21 21:39)

Неактивен

 

#3 2012-08-29 16:06

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

Re: Установка Nivo Slider на вебасист

rat  помогите пожалуйста решить проблему.
Прошла неделя ни кто не знает.

Отредактировано alekfilatow (2012-08-29 16:07)

Неактивен

 

#4 2012-08-29 17:35

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

Re: Установка Nivo Slider на вебасист

Вполне возможно, что некорректно прописаны пути к картинкам <img src='/img/1112.jpg' >
насколько я сталкивался - вебассист такое не понимает
надо прописывать полные пути либо ручками, либо используя системные переменные, типа
<img src='{$smarty.const.URL_IMG}/img/1112.jpg' >
ну, и картинки положить в папку /published/publicdata/{$smarty.session.wbs_dbkey}/attachments/SC/images/img/

Отредактировано drdr (2012-08-29 18:03)

Неактивен

 

#5 2012-08-29 21:55

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

Re: Установка Nivo Slider на вебасист

nivo slider прекрасно работает. постараюсь вам завтра дать решение. если срочно пишите в личку.
помогу...

Неактивен

 

#6 2012-11-10 18:38

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

Re: Установка Nivo Slider на вебасист

welldi написал:

nivo slider прекрасно работает. постараюсь вам завтра дать решение. если срочно пишите в личку.
помогу...

Актуально....нужно решение.

Неактивен

 

#7 2012-11-10 23:32

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

Re: Установка Nivo Slider на вебасист

очень емко - напишите мне письмо я помогу
в вашей беде.

Неактивен

 

#8 2012-11-11 09:04

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

Re: Установка Nivo Slider на вебасист

alekfilatow написал:

5. Затем вставляем в  страницу основная разметка в режиме редактирование HTML-кода блок со слайдером:

Код:

<div id="slider">
       <div>
            <h1>Первый слайд</h1>
            <p><img src='/img/1111.jpg' ></p>
       </div>
       <div>
           <h1>Второй слайд</h1>
           <p><img src='/img/1112.jpg' ></p>
       </div>
       <div>
           <h1>Третий слайд</h1>
           <p><img src='/img/1113.jpg' ></p>
       </div>
       <div>
           <h1>Четвертый слайд</h1>
           <p><img src='/img/1114.jpg' ></p>
       </div>
</div>

где 1111.jpg, 1112.jpg, 1113.jpg, 1114.jpg картинки слайдера

Пропишите путь от published/publicdata/

Неактивен

 

#9 2013-02-21 00:08

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

Re: Установка Nivo Slider на вебасист

welldi написал:

nivo slider прекрасно работает. постараюсь вам завтра дать решение. если срочно пишите в личку.
помогу...

не могли бы подсказать решение?

Неактивен

 

#10 2013-02-21 09:29

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

Re: Установка Nivo Slider на вебасист

Блин, уже голову сломал sad. Делал:
В HEAD после строчек

Код:

<title>{$page_title|default:$smarty.const.CONF_DEFAULT_TITLE|escape:'html'}</title>
{$page_meta_tags}

добавил

Код:

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

потом в основной разметке  добавил HTML код

Код:

<div id="slider">
       <div>
            
            <p><img src='/img/1111.jpg' ></p>
       </div>
       <div>
           
           <p><img src='/img/1112.jpg' ></p>
       </div>
       <div>
          
           <p><img src='/img/1113.jpg' ></p>
       </div>
       <div>
           
           <p><img src='/img/1114.jpg' ></p>
       </div>
</div>

затем в HEAD после строчек которые добавил в первом этапе добавил

Код:

<script type="text/javascript">{literal}
$(window).load(function() {
$('#slider').nivoSlider();
});
{/literal}</script>

и слайдер не работает sad. Т.е. картинки выводятся, но сразу все 4, одна под другой. Подскажите куда копать?

Неактивен

 

#11 2013-02-21 10:51

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

Re: Установка Nivo Slider на вебасист

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

Неактивен

 

#12 2013-02-21 10:53

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

Re: Установка Nivo Slider на вебасист

Неактивен

 

#13 2013-02-21 11:00

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

Re: Установка Nivo Slider на вебасист

http://forum.webasyst.ru/uploads/11435_n3.jpg
Подключите слайдер.

Неактивен

 

#14 2013-02-21 11:03

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

Re: Установка Nivo Slider на вебасист

Вот я....не умный. Спасибо!!!!!

Неактивен

 

#15 2013-02-21 11:04

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

Re: Установка Nivo Slider на вебасист

alekfilatow написал:

Установка:

2. Копируем файлы nivo-slider.css в папку   сайт/published/SC/html/scripts/css/
3. Копируем файлы jquery.nivo.slider.pack.js в папку  сайт/published/SC/html/scripts/js/

у меня заработало только после копирования этих файлов в корень сайта

Неактивен

 

#16 2013-02-21 11:37

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

Re: Установка Nivo Slider на вебасист

хм. еще один вопрос возник. а где в коде можно задать размер слайдов? А так же как убрать под слайдами порядковые номера?

Отредактировано Balamut_ (2013-02-21 11:39)

Неактивен

 

#17 2013-02-21 12:24

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

Re: Установка Nivo Slider на вебасист

Balamut_ написал:

alekfilatow написал:

Установка:

2. Копируем файлы nivo-slider.css в папку   сайт/published/SC/html/scripts/css/
3. Копируем файлы jquery.nivo.slider.pack.js в папку  сайт/published/SC/html/scripts/js/

у меня заработало только после копирования этих файлов в корень сайта

если у вас такая запись?

<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

то она как раз на корень и ведет.

Неактивен

 

#18 2013-02-21 12:36

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

Re: Установка Nivo Slider на вебасист

Balamut_ написал:

хм. еще один вопрос возник. а где в коде можно задать размер слайдов?

В стилях слайдера это все меняется (nivo-slider.css)

Balamut_ написал:

А так же как убрать под слайдами порядковые номера?

добавьте в стили слайдера

div.nivo-controlNav {display:none;}

Неактивен

 

#19 2013-02-21 13:06

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

Re: Установка Nivo Slider на вебасист

Спасибо. Как всегда четко, ясно, понятно, по делу smile. Может еще тогда проясните такой вопрос. Во время загрузки страницы, выводятся все фотографии слайдера. Потом начинается показ по одной. немного не красиво. Как сделать чтоб сразу по одной выводилось?

Неактивен

 

#20 2013-02-21 13:27

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

Re: Установка Nivo Slider на вебасист

Balamut_ написал:

Спасибо. Как всегда четко, ясно, понятно, по делу smile. Может еще тогда проясните такой вопрос. Во время загрузки страницы, выводятся все фотографии слайдера. Потом начинается показ по одной. немного не красиво. Как сделать чтоб сразу по одной выводилось?

Честно сказать не знаю. Я нивослайдер сам ставил и довольно давно. У меня  фото нормально грузятся. Возможно что-то со стилями нарушили, т.е. контейнер с картинками перед обработкой скриптом изначально не в display:none;, или высота не прописана. Но это догадки. М.б. дело совсем в другом.

Неактивен

 

#21 2013-02-21 13:55

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

Re: Установка Nivo Slider на вебасист

в стилях css нашел такие строчки:

Код:

.nivoSlider {
     position:relative;
    background:url(images/loading.gif) no-repeat 50% 50%;
}

может тут можно как то задать отключение картинок во время загрузки страницы?

Неактивен

 

#22 2013-02-21 14:51

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

Re: Установка Nivo Slider на вебасист

Balamut_ написал:

в стилях css нашел такие строчки:

Код:

.nivoSlider {
     position:relative;
    background:url(images/loading.gif) no-repeat 50% 50%;
}

может тут можно как то задать отключение картинок во время загрузки страницы?

эта картинка показывается тогда, когда изображения еще не загружены. а они у вас выводятся сразу

Неактивен

 

#23 2013-02-21 17:29

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

Re: Установка Nivo Slider на вебасист

sad так и не нашел в чем проблема...

Неактивен

 

#24 2013-02-21 19:18

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

Re: Установка Nivo Slider на вебасист

Ну блин. Решил. Надо было код брать с инструкций разработчика.
В HEAD добавил

Код:

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">{literal}
$(window).load(function() {
$('#slider').nivoSlider();
});
{/literal}</script>

В "Основная разметка" добавил "Произвольный HTML-код"

Код:

<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <img src="/img/1111.jpg" alt="" />
         <img src="/img/1112.jpg" alt="" />
         <img src="/img/1113.jpg" alt="""/>
         <img src="/img/1114.jpg" alt="" />
         <img src="/img/1115.jpg" alt="" />
         <img src="/img/1116.jpg" alt="" />
         <img src="/img/1117.jpg" alt="""/>
         <img src="/img/1118.jpg" alt="" />
         <img src="/img/1119.jpg" alt="" />
         <img src="/img/1120.jpg" alt="" />
        <img src="/img/1121.jpg" alt=""" />
        
    </div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

фото положил в корень в папку img. Файлы jquery.nivo.slider.js, jquery.nivo.slider.pack.js, nivo-slider.css тоже в корне. Как то так. Ссылки и подписи пока не делал, потому alt="  " не заполнил. Возможно что то где то не так сделал, но все работате smile

Неактивен

 

#25 2013-02-21 19:40

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

Re: Установка Nivo Slider на вебасист

еще осталось отцентровать картинки, а вот как....

Неактивен

 

Board footer

Powered by PunBB