Генератор форм

Для веб-мастера

Реклама


Комментарии к статье:
Элегантный ротатор баннеров (изображений, картинок) на jQuery

Дата: 20 октября 2011 Просмотры 56569 Комментарии 121

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Maxim
Maxim 20 октября 2011 | 17:39
+7
Прикольная тема)))
Владимир Березняк
Владимир Березняк 30 октября 2011 | 14:45
-2
Молодец, как раз думал ка поставить ротаторы на блог моей жены, спасибо за статью.
светлана
светлана 23 октября 2011 | 17:46
-1
Все это интересно и здорово но для таких как я чайников нужно видио, пока читаю вроде бы все понятно а как начинаю делать ну не чего не понятно
Шамшур Иван
Шамшур Иван 24 октября 2011 | 00:17
-1
Так есть же исходники. Просто копируйте все как там. На самом деле ничего сложного здесь нет
Nikko320
Nikko320 13 декабря 2013 | 14:14
-1
width — ширина одного слайда
height — высота одного слайда

Дополните, по умолчанию в px, если надо в %, то надо писать width:'100%' в кавычках.
Дмитрий
Дмитрий 28 сентября 2015 | 20:06
0
Приветствую! один из не многих скриптов который мне подходит, но никак не могу победить вывод по ширине страницы в 100% - вписал в 'кавычках' как советовали - не выходит - можно ли подробнее? скорей всего этого не достаточно?
Вывожу только 1 блок - все получилось настроить как нужно кроме автоширины Ж(
Хайтек
Хайтек 1 ноября 2011 | 07:55
+2
Спасибо за скрипт. Сам стал недавно увлекаться jQuery - это элегантное решение для ротации баннеров возьму себе в копилку
Хайтек
Хайтек 2 ноября 2011 | 11:38
-1
Кстати, у вас самое корректное подключение jQuery, по сравнению с теми вариантами, что я встречал ранее
Сергей
Сергей 12 ноября 2011 | 14:36
-1
скажите, хочу поставить ваш ротатор на ДЛЕ и не получается указать путь к файлам картинок.
Подскажите, какой он должен быть?
Пробовал так
img:'images/beige200x450.jpg'
img:'.../images/beige200x450.jpg'
img:'{THEME}/images/beige200x450.jpg'
от чего нужно начинать писать путь?
Спасибо за ротатор и за ответ)
Шамшур Иван
Шамшур Иван 14 ноября 2011 | 01:30
-1
а в какую папку Вы загрузили картинки? images? Попробуйте тогда так: img:
'/images/beige200x450.jpg'
Doni
Doni 17 ноября 2011 | 00:41
-1
Здравствуйте!
не получается поставить на ДЛЕ
когда вставляю

между <head></head> все другие скрипты отключаются то ест слайд и выпадающий меню.
Шамшур Иван
Шамшур Иван 17 ноября 2011 | 10:50
-1
Судя по всему, возникает ошибка в JS. Воспользуйтесь firebug для FF и посмотрите, какие ошибки возникают. Или дайте ссылочку, где можно посмотреть!
Владислав
Владислав 30 ноября 2011 | 16:21
-1
Как прописать атрибут alt в скрипте?
Шамшур Иван
Шамшур Иван 30 ноября 2011 | 23:26
0
Для каждой картинки в слайдере? Такого к сожалению нет в данном плагине, но если заглянуть в исходный код, то можно и самому разобраться, как это сделать. В параметрах каждого слайда добавляете еще одну переменную для атрибута alt, а в цикле, когда формируется разметка, прописуете его. На самом деле все очень просто
Владислав
Владислав 1 декабря 2011 | 16:07
-1
Да, для каждой.
Спасибо, помог действительно оказалось все очень просто )))) Сделал, как ты посоветовал.
Константин
Константин 18 декабря 2011 | 12:59
-1
Здравствуйте. Мне очень стыдно, что я такой чайник, но я так и не понял как воспользоваться этим плагином. Необходимо править файлы темы сайта (сайт на WP) как сказано в статье или просто откорректировать файлы, которые есть в скачанном архиве и загрузить его с последующей активацией как обычный плагин?
Константин
Константин 18 декабря 2011 | 21:26
-1
Судя по всему вероятнее первый вариант, но тогда подскажите куда размещать скрипт вызова плагина
Шамшур Иван
Шамшур Иван 19 декабря 2011 | 00:00
-1
Для Вашей темы, между тегами <head></head> необходимо подключить файлы библиотеки jQuery и самого плагина jquery.rotator.js. Там же подключаются стили и вызывается сам плагин с нужными Вам опциями:

$('#rotator').rotator();

В общем все точно также, как и с обычным jQuery плагином
Максим
Максим 23 мая 2014 | 12:11
-1
Присоединяюсь к комментарию Константина. Не пойму как заставить работать этот скрипт на Вордпресс. Можете выложить полную инструкцию по подключению ротатора для вордпресс?
6ypaTuHo
6ypaTuHo 22 декабря 2011 | 16:23
-1
Поставил ротатор на сайт. Спасибо! Только в IE8 и ниже ошибка выдается :((
6ypaTuHo
6ypaTuHo 26 декабря 2011 | 21:02
-1
Разобрался! Оказалось, что я в списке банеров послепоследнего запятую оставил.
Михаил
Михаил 18 января 2012 | 21:45
0
Здравствуйте Иван! Очень понравился ваш ротатор, особенно плавность смены баннеров. Очень качественно да еще и бесплатно!!!
Я не эксперт и по этому уже пол дня колупаюсь а толку нет. Рисую сайт турфирмы на Юкозе jquery-1.6.6.js
Я опишу свои действия, а Вы скажите пожалуйста где я ошибаюсь.

1. Создал папку rotator и загрузил в нее файлы:

ajax-loader.gif
graybg.png
jquery-1.6.2.min.js
jquery.rotator.js
jquery.rotator.min.js
nav.png
styles.css

2. Достал из файла styles.css список стилей и вставил его в конец своих css.

3. Подключил библиотеку jQuery таким способом:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>$SITE_NAME$ - $MODULE_NAME$</title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>');
</script>
<script type="text/javascript" src="js/jquery.rotator.js"></script>

</head>

4. Вставил код вызова ротатора в верхнюю часть сайта со своими комментариями:

<!-- РОТАТОР БАННЕРОВ -->
<div id='rotator'>
<script type="text/javascript">
$(function(){
$('#rotator').rotator({
slides: [

/* ниже массив слайдов, состаящий из объектов в которых задается ссылка — url, и картинка слайда — img.
После последнего слайда запятую не ставить*/

{url:'http://lbt.kiev.ua/index/zimnij_otdykh/0-11',
img:'/rotator/banner/snowsport.jpg'},

{url:'http://lbt.kiev.ua/index/pljazhi_i_ostrova/0-12',
img:'/rotator/banner/watersport.jpg'},

{url:'http://lbt.kiev.ua/index/kruizy/0-14',
img:'/rotator/banner/cruises.jpg'},

{url:'http://lbt.kiev.ua/index/safari/0-13',
img:'/rotator/banner/safari.jpg'}

],

fx:'fade', /* эффект анимации (slide — скольжение, fade — выцветание) */
speed: 500, /* скорость эффекта анимации в миллисекундах (1 секунда - 1000 миллисекунд) */
timeout: 3000, /* время показа одного слайда в миллисекундах (1 секунда - 1000 миллисекунд) */
random: false, /* случайность воспроизведения слайдов (true - в хаотичном порядке, false - по порядку */
width: 700, /* ширина одного слайда в пикселях */
height: 300, /* высота одного слайда в пикселях */
autorun: true, /* автоматически прокручивать все слайды (true - включить; false - отключить) */
nav: false /* отображать кнопки навигации (true - включить; false - отключить) */

});
})
</script>
</div>
<!-- /РОТАТОР БАННЕРОВ -->

5. В файлах jquery.rotator.js и jquery.rotator.min.js изменил настройки:

/* ниже массив слайдов, состаящий из объектов в которых задается ссылка — url, и картинка слайда — img.
После последнего слайда запятую не ставить*/

{url:'http://lbt.kiev.ua/index/zimnij_otdykh/0-11',
img:'/rotator/banner/snowsport.jpg'},

{url:'http://lbt.kiev.ua/index/pljazhi_i_ostrova/0-12',
img:'/rotator/banner/watersport.jpg'},

{url:'http://lbt.kiev.ua/index/kruizy/0-14',
img:'/rotator/banner/cruises.jpg'},

{url:'http://lbt.kiev.ua/index/safari/0-13',
img:'/rotator/banner/safari.jpg'}

],

fx:'fade', /* эффект анимации (slide — скольжение, fade — выцветание) */
speed: 500, /* скорость эффекта анимации в миллисекундах (1 секунда - 1000 миллисекунд) */
timeout: 3000, /* время показа одного слайда в миллисекундах (1 секунда - 1000 миллисекунд) */
random: false, /* случайность воспроизведения слайдов (true - в хаотичном порядке, false - по порядку */
width: 700, /* ширина одного слайда в пикселях */
height: 300, /* высота одного слайда в пикселях */
autorun: true, /* автоматически прокручивать все слайды (true - включить; false - отключить) */
nav: false /* отображать кнопки навигации (true - включить; false - отключить) */

6. В результате - тонкая белая полосочка над сайтом. Помогите пожалуйта!
Шамшур Иван
Шамшур Иван 18 января 2012 | 23:55
-1
Ну первое что бросается в глаза это то, что все файлы вы загрузили в каталог rotator, а подключаете файлы из каталога js:

<script type="text/javascript" src="js/jquery.rotator.js"></script>
Михаил
Михаил 19 января 2012 | 00:32
0
Исправил на
<script type="text/javascript" src="/rotator/jquery.rotator.js"></script>
но проблема осталась.

А на юкозовской jquery-1.6.6.js он может работать?
Шамшур Иван
Шамшур Иван 19 января 2012 | 00:37
0
Вы можете дать ссылку на страницу с ротатором? Так сложно что-либо сказать. А юкозовский jQuery думаю можно юзать!
Михаил
Михаил 19 января 2012 | 01:04
0
Огромное Вам спасибо, Иван, что помогаете!!! Вот ссылка: http://lbt.kiev.ua/index/programmy/0-5
Шамшур Иван
Шамшур Иван 19 января 2012 | 11:03
0
Так, два раза подключать jQuery не стоит. Используйте либо юкозовскую, либо так как в моем примере. Дальше. не стоило было изменять настройки в самом коде ротатора jquery.rotator.js. Их вы переопределяете при вызове плагина. А не работает ротатор из-за того, что пишется ошибка "не найдена функция ротатора". Возможно это из-за того, что вы изменили сам код плагина и что-то там не то сделали. А вообще для отладки javascript используейте Firebug для Firefox. Очень удобная штука. Да и сам код вызова плагина надо поместить за пределами дива
Михаил
Михаил 19 января 2012 | 18:42
0
Ураааааа! Всех с праздником!!! Ротатор заработал в руках лузера!!!
Вставил эти скрипты прямо перед ротатором и дело сдвинулось)):
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/rotator/jquery-1.6.2.min.js"><\/script>');</script>
<script type="text/javascript" src="/rotator/jquery.rotator.js"></script>

Правда они вне тегов <head></head> получились, это не очень страшно?

Если позволите, еще несколько вопросов))

1. Если на юкозе стоит jquery-1.6.6.js то нужно ли мне подлючать этот файл? Пробовал без него - все работает!
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/rotator/jquery-1.6.2.min.js"><\/script>');</script>

2. В исходнике есть файл jquery.rotator.min.js он как-то используется?

3. Как задать возможность выбора значения _self или _blank для ссылок. Это очень важно! У Вас установлено _blank а я использую ротатор для внутренней навигации по сайту.

4. Если вытягивать список стилей из файла styles.css и вставлять его в свои css, то в верху сайта появляется полоска серого фона из-за вот этого:
body{
margin: 0;
padding: 0;
background: url("/rotator/graybg.png") repeat scroll center top transparent;
font-family: Tahoma,Arial,Helvetica,sans-serif;
}

Что если я удалю body{,,,}? Ведь в моих css уже есть body{,,,}!
Пробовал даже, выводить плагин ротатора таким образом:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/rotator/styles.css" media="all">
КОД РОТАТОРА
</body>
</html>

Все равно полоска остается если не удалить body{,,,}.
Спасибо за внимание.
Извините за чрезмерную любознательность))
Жду ваш экспертный ответ.
Шамшур Иван
Шамшур Иван 19 января 2012 | 18:48
0
1. Да, лучше его не подключать, а использовать подключение как в этой статье написано.
2. jquery.rotator.min.js - это сжатая копия ротатора. ничем не отличается, только размер меньше
3. Это необходимо менять в самом коде ротатора, там где формируется html разметка
4. Да, этот стиль надо удалить
Михаил
Михаил 19 января 2012 | 19:32
0
Все работает идеально! Спасибо Вам огромное и больших успехов Вам Иван!
Михаил
Михаил 22 января 2012 | 21:48
0
Скажите, Иван, а что одновременно два баннера не могут использоваться на сайте? Я вот подключил, даже все файлы в другую папку продублировал, а работает только один баннер....???
Шамшур Иван
Шамшур Иван 23 января 2012 | 00:02
0
Можно конечно! У ротаторов должны быть разные id:

<div id='rotator1'></div>
<div id='rotator2'></div>

И вызывать плагин нужно к каждому ротатору отдельно. Ну или использовать общий класс
Михаил
Михаил 23 января 2012 | 22:43
0
Иван, пожалуйста, уделите еще 5 минут и напишите пошагово что куда делать, чтобы показать два баннера одновременно. Запарился? уже сутки экспериментирую(((
Шамшур Иван
Шамшур Иван 23 января 2012 | 23:29
0

<div id='rotator1'></div>
<div id='rotator2'></div>

<script>
$('#rotator1').rotator();
$('#rotator2').rotator();
</script>


Так пробывали?
Lee
Lee 17 февраля 2012 | 23:55
0
Уважаемый автор не могли бы вы немного помочь.
Перед тем как залить скрипт в нужное место я его потестил на серваке: всё красиво, всё удобно и просто.
Думал проблем практически не будет с уставновкой на Webasyst..я ошибся=)))
Есть одна проблемма: для теста хочу получить на странице 2 ротатора сразу,
но один с прокруткой а другой с фэйдом...разные задачи. И суть проблеммы в том
что всегда выдаёться результат один: ВСЕ РОТАТОРЫ выползают с эффектом фэйд.
Предполагаю что каким-то чудом функция не получает параметров
и работает по-умолчанию, которое задано в теле плагина.
Сделал как вы описывали:
в HEAD прописал подключение плагина+библиотеки, ниже вставил такое:
</script>">

В нужное место в сайте вставил:
<div id='rotator1'></div> 
<div id='rotator2'></div>
</div>
<script>
$('#rotator1').rotator(); $('#rotator2').rotator();
</script>">

В итоге получил тот результат, что описал. Пытался по-разному, но опыта мало не могу понять где я ошибаюсь или что хочет от меня WebAsyst.
Буду рад конструктиву, спасибо.
Михаил
Михаил 23 января 2012 | 22:54
0
А в принципе вопросов то еще парочка есть, но если Вы не ответите, я Вас пойму)))
1.Как растянуть width на 100%???
2.Как выровнять по центру))
уже многое пробовал, но не поддается...
Шамшур Иван
Шамшур Иван 23 января 2012 | 23:32
0
Выровнять по центру можно так:

<div id='rotator1' style="500px; margin: 0 auto;"></div>


а растянуть на 100% не получится. ротатор растягивается на ширину одного слайда.
Михаил
Михаил 24 января 2012 | 01:16
0
Низкий Вам поклон, Иван, все работает!!! Только вот этот способ центрирования:
<div id='rotator1' style="500px; margin: 0 auto;"></div>
на примере карты Украины почему-то не работает((
Sead
Sead 29 января 2012 | 07:33
0
Автор; " Надеюсь кому-то пригодится." Стопудово пригодится. Да ещё круче, чем у самого Попова. Утаскиваю идею и исходники к себе в норку. А за статью клацнул 5 звёзд!
Борис
Борис 29 января 2012 | 12:34
0
Насчет Попова Вы верно подметили!)
TopdiR
TopdiR 29 января 2012 | 15:15
0
Классная штука. Впервые увидел такую Инфо.ДвД :)
Евгений
Евгений 29 января 2012 | 17:24
0
забавно но вот комментировать очень неудобно
Шамшур Иван
Шамшур Иван 29 января 2012 | 20:07
0
А что неудобного? Можно подробнее?
gertc
gertc 29 января 2012 | 17:42
0
Не только простой а и удобный, мне ещё нравится когда загрузка идёт после оставления комента, и вслед за курсором бегает
griigo
griigo 29 января 2012 | 18:24
+1
хм.... И у меня тоже ента партерка сдоит с ротатором. Очень удобно... Можно прокручивать разные партерки...
Шамшур Иван
Шамшур Иван 29 января 2012 | 20:08
0
Именно для этих целей и создавался этот плагин
Денис
Денис 29 января 2012 | 19:39
0
Не знал, что установив внешний код можно что-нибудь подцепить. Буду иметь ввиду.
Lee
Lee 17 февраля 2012 | 23:58
0
Попытка2=)))
Уважаемый автор не могли бы вы немного помочь.
Перед тем как залить скрипт в нужное место я его потестил на серваке: всё красиво, всё удобно и просто.
Думал проблем практически не будет с уставновкой на Webasyst..я ошибся=)))
Есть одна проблемма: для теста хочу получить на странице 2 ротатора сразу,
но один с прокруткой а другой с фэйдом...разные задачи. И суть проблеммы в том
что всегда выдаёться результат один: ВСЕ РОТАТОРЫ выползают с эффектом фэйд.
Предполагаю что каким-то чудом функция не получает параметров
и работает по-умолчанию, которое задано в теле плагина.
Сделал как вы описывали:
в HEAD прописал подключение плагина+библиотеки, ниже вставил такое:

<script type="text/javascript"> $(function(){ $('#rotator1').rotator({fx:'slide',autorun: true, nav: true}); $('#rotator2').rotator({fx:'fade',autorun: true, nav: false}); })
</script>

В нужное место в сайте вставил:

<div class="wrap">
<div id='rotator1'></div>
<div id='rotator2'></div>
</div>
<script>
$('#rotator1').rotator(); $('#rotator2').rotator();
</script>]

В итоге получил тот результат, что описал. Пытался по-разному, но опыта мало не могу понять где я ошибаюсь или что хочет от меня WebAsyst.
Буду рад конструктиву, спасибо.
Шамшур Иван
Шамшур Иван 18 февраля 2012 | 00:03
0
Ну все правильно. Вы в HEAD инициализировали плагин. а потом после вставки разметки:

<div class="wrap">
<div id='rotator1'></div>
<div id='rotator2'></div>
</div>

зачем-то опять инициализируете ротаторы с настройками по умолчанию. Вот и результат такой. Просто удалите вот эти строки:

<script>
$('#rotator1').rotator(); $('#rotator2').rotator();
</script>
Lee
Lee 18 февраля 2012 | 05:20
0
У меня были теже мысли...и я так же пробовал результат не поменялся.
После вашего поста попробовал ещё раз...тоже самое.=)))

п.с. файлы не менял кроме того, что прописал свои картинки, и в "ротаторе со стрелочками" сменил для эксперемента файл .png
Lee
Lee 18 февраля 2012 | 15:33
0
<script>
$('#rotator1').rotator(); $('#rotator2').rotator();
</script>

Убрал скрипт не выдаёт ошибки но и не грузиться( просто пустая страница)
Если переопределять(как делал я и вы сказали что не нужно) отображение есть.НО! только скрипта с фэйдом без пролистывания.
Попробовал вариант ещё один:
в HEAD делаю такое
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">
window.jQuery || document.write('<script type="text/javascript" src="../js/jquery-1.6.2.min.js"><\/script>');
</script>

<script type="text/javascript" src="../js/jquery.rotator.js"></script>

<script type="text/javascript">

$(function(){
$('#rotator2').rotator({fx:'fade',autorun: true, nav: false});
})
</script>

в "теле" вызываю её командой

<div class="wrap">
<div id='rotator2'></div>
</div>

Результат: Ничего на странице нет..т.е. функция нормально не сработала. Глянул что мне скажет Firebug на это Указывает что ошибка в функции- Синтаксис Эрор.
Т.е. Вывод:если задавать функцию с параметрами - выдаёт ошибку, если без то работает, но нужно её почему второй раз перевызывать в теле по иному не хочет работать.
Где я накосячил?
Шамшур Иван
Шамшур Иван 19 февраля 2012 | 00:04
0
Ну так сложно что-либо сказать. Вы можете дать ссылку на Ваш сайт, где Вы размещаете ротаторы?
Артур
Артур 20 февраля 2012 | 14:53
0
Я конечно новичок в jQuery, но мне интересно кое что у вас узнать относительно вашего ротатора.

в этом куске
for (i=0; i < count; i++) {
pic[i] = new Image();
pic[i].onload = function() {
//Код
}
};
pic[i].src = images[i].src;

Вы проверяете статус загрузки изображения.

Но вот интересный факт, я для проверки удалил одно изображение из папки с ротатером и получилось так что ротатер работал нормально, но тег <img> выезжает пустым, вот я собственно и хотел бы спросить, а что получается часть кода которая отвечает за проверку статуса загрузки не работает?
Артур
Артур 20 февраля 2012 | 15:01
0
А всё извините разобрался, оказывается код не срабатывал если выскакивал алерт во время загрузки.

Но это неплохо было бы модифицировать, допустим изображение неким образом исчезло или удалили случайно, вот вместо того что бы показывать бесконечно прелоадер неплохо было бы сделать загрузку мини изображения с текстом "картинка отсуствует", хотя я конечно попытаюсь сам это дописать.
Роман
Роман 22 февраля 2012 | 17:00
0
Скажите, а в настройках существует такая возможность раздельно настройить показ? Дело в том что я планирую оба варианта использовать на одной странице, но тот который "со стрелочками" у него мне нужно отключить автоматический показ, а тот который без стрелочек мне как раз нужен в автоматическом режиме.
Шамшур Иван
Шамшур Иван 22 февраля 2012 | 17:03
0
Нужно два раза инициализировать плагин, задавая нужному ротатору свои настройки
Tuzik-Progger
Tuzik-Progger 24 февраля 2012 | 00:47
0
Hello! А"эм не может.
Плохо,что не реально сделать выход на модальное окно. А только УРЛ...Это плохо. Хотел как слайдер с фэнсибокс.
Tuzik-Progger
Tuzik-Progger 25 февраля 2012 | 01:51
0
А как отключить URL?
Всё равно переходит...Вероятно нужно прописывать отдельный код...
Шамшур Иван
Шамшур Иван 27 февраля 2012 | 14:12
0
Что значит отключить URL? Что Вы хотите сделать?
Владислав
Владислав 28 февраля 2012 | 17:03
0
Добрый день! появился такой вопрос при работе с ротатором баннеров. При нажатии на баннер страница открывается в новом окне. Как сделать так чтобы открывалась ссылка в этом же окне ???
Шамшур Иван
Шамшур Иван 28 февраля 2012 | 17:07
0
Для этого в исходном коде ротатора, где идет формирование ссылки нужно удалить строку: target="_blank"
Жандос
Жандос 18 марта 2012 | 21:19
0
Начал вставлять коды которые здесь на странице, и не получилось. Удалил то что вставил. Все это на локалхосте. Потом начала зависать страницы сайта как локалхосте и на сервере www.videokursi.kz. Что делать? Вредоносный код прошел мимо!!!????
Шамшур Иван
Шамшур Иван 18 марта 2012 | 23:08
0
Я что-то не понял. Это обвинение в распростронении вредоносного кода?
Александр
Александр 29 февраля 2012 | 16:02
0
отличный ротатор, согласен со всеми, я поставил у меня работает, спасибо автору!
Артур
Артур 3 марта 2012 | 00:28
-1
Здравствуйте!

Наконец у меня дошли руки до вашего ротатера и я внёс некоторые изменения, обработку ошибки загрузки одного или нескольких изображений и так кое-что по мелочи. Если вы желаете то могу вам выслать для оценки модификации вашей идеи.
Сильно не пинайте т.к. я только начал интересовться jQuery где-то с месяц назад +/-.
Дмитрий
Дмитрий 31 марта 2012 | 22:44
0
Здравствуйте Иван.
Спасибо за халявные исходники.
Прошу прощения за ламерсие вопросы:
1. В примере дублируются ссылки перехода и ссылки на картинки как в самом скрипте "jquery.rotator.js", так и при подключении скрипта в head. Я решил в head эти сылки не прописывать и подключил скрипт так:
<script type="text/javascript">
$(function(){
$('#rotator').rotator({ });
})
</script>
Вроде работает, но я не уверен, что все правильно написал. Если не правильно, то подскажите - как правильно?
2. Никак не соображу, если я захочу использовать на сайте 2 разных ротатора, То мне надо отдельный jquery.rotator.js добавлять? и как, в таком случае, правильно подключить два разных ротатора?
Шамшур Иван
Шамшур Иван 2 апреля 2012 | 09:35
0
1. Вы все правильно написали, если данные по слайдам, Вы внесли в сам исходник ротатора, то при вызове плагина их можно не указывать.
2. Нет. jquery.rotator.js нужно подключать только один раз. Просто два раза вызывайте сам плагин, указав в настройках плагина нужные слайды.
Дмитрий
Дмитрий 4 апреля 2012 | 12:28
0
Спасибо
Павел
Павел 3 мая 2012 | 16:17
0
Отличный ротатор, простой в использовании, то что и искал, но есть один вопрос, как можно сделать так, что бы кнопки появлялись только в тот момент когда на водишь на картинку (область баннера)
Шамшур Иван
Шамшур Иван 3 мая 2012 | 22:26
0
Можно. Для этого в файле jquery.rotator.js закоментируйте строку №142:

//$('.rotator-nav').show();

А также надо добавить в метод init() следующий код:

this.el.hover(function(){
$('.rotator-nav', this).show();
},
function(){
$('.rotator-nav',this).hide();
});


Вот рабочий пример http://biznesguide.ru/demo/rotator/index2.html
Павел
Павел 4 мая 2012 | 11:30
+1
Спасибо, все работает :) Может быть вы это включите как-нибудь в основной код, что бы можно было "разрешить\запретить" в настройках, было бы удобно.
Александр
Александр 9 мая 2012 | 11:38
0
Автор, спасибо за тему. Напишите пожалуйста для тупых, что куда и как установить куда и как залить.

Где не ищешь Как вызвать JQuery все не по делу.

Спасибо!
Шамшур Иван
Шамшур Иван 9 мая 2012 | 22:43
0
Так вроде здесь все написано. Что не понятно то? Скачайте демо и посмотрите!
Владимир
Владимир 1 июня 2012 | 13:09
0
Ничего не понятно. Залил плагин, подключил его, стиль дописал, картинки свои вставил и пути к ним. Ссылки. Дальше что? Куда добавлять код в последнем "зелёном окошке"? И если я делаю в Joomla, добавляю в модуль строку <div id='rotator'></div> - толку ноль. Или мне надо и в сам модуль прописать дивы, ул -ли и скрипты?
Славик
Славик 3 июня 2012 | 20:36
0
Привет Вань, огромное спасибо! за слайдер - то, что искал, но есть 1-ин вопрос... Почему, когда задаю размер слайда 468х60 - слайд перестает отображаться ?? то есть стоит только задать размер *469х60* - слайд растягивается с 468 до 469px. Тоже самое если 468 ширина то высота = 69! (при установке 68 - слайд не отображается). Стандартный размер 468х60px - нереально что ли задать ?))) Вот часть кода
speed: 1000,
timeout: 3000,
random: true,
width: 469,
height: 60,
fx:'fade',
autorun: false,
nav: false
Шамшур Иван
Шамшур Иван 3 июня 2012 | 23:23
0
А Вы можете прислать ссылку на пример? А то так сложно, что либо сказать.
Булат
Булат 5 июня 2012 | 10:27
0
Почему дважды повторяется код
render.push('<li><div class="img_rotator"> и т.д. ?
Булат
Булат 5 июня 2012 | 10:31
0
В продолжение предыдущего комментария. Я ради интереса удалил кусок
add: function(slides){...}
На работу ротатора это не повлияло
Александр
Александр 11 июля 2012 | 18:05
0
Добрый день, Иван.
Подскажите, за счет чего идет привязка навигации к банерам.
Никак не получается отвязать от границ страницы. Подскажите пожалуйста, ниже ссылка.
http://sluniaviy.narod.ru/test.html
Шамшур Иван
Шамшур Иван 11 июля 2012 | 23:18
0
Блоку с id="rotator" добавьте class="rotator"
Александр
Александр 12 июля 2012 | 10:20
+1
Спасибо, Иван.
Ротатор супер!!!
Шамшур Иван
Шамшур Иван 12 июля 2012 | 12:54
0
Спасибо. Рад, что Вам пригодился.
Кирилл
Кирилл 17 июля 2012 | 11:46
+1
Спасибо огромное за ротатор! А как нибудь его можно сделать так чтобы допустим 4 картинки подряд выводились и стрелки были по бокам 1 и 4 картинки? Мучаюсь никак такое найти не могу. Jcarousel пробовал но там рандома нету =( .
Шамшур Иван
Шамшур Иван 17 июля 2012 | 15:36
0
Данный скрипт создавался для других целей. Это ротатор, а не слайдер. Jcarousel - это то, что Вам нужно.
Александр
Александр 19 июля 2012 | 10:27
0
Иван, подскажите, у меня на php странице в упор не отображаются стрелки навигации. Самое главное, что навигация работает и если знать куда нажать, то листать будет.
style пробовал прописывать как в странице, так и привязывать css файл, результат не менялся.
Спасибо.
Шамшур Иван
Шамшур Иван 19 июля 2012 | 12:48
0
Ну скорее всего у Вас не правильно указан путь к картинкам. А они вообще есть на сервере?
Александр
Александр 20 июля 2012 | 11:02
0
Благодарю, Иван. Укороченный путь к изображению, он почему-то не хотел принимать. Прописал полный - заработало!)
Николай
Николай 31 июля 2012 | 22:43
0
Добрый день для меня О! Всемогущий! Я чайник в этом деле... Я взял ваши исходники скопировал в /мой шаблон/ваши файлы. Скопировал из ваших стилей код в \Мой шаблон\style\style.css (Ваш Код вставил в конец моего)

Вставил Код (jQuery) в main.tpl между тегами Head.
Вот собственно и всё =) И неха не фурычит подскажите что не так???-)
+ У меня установлен старый Ротатор.
Тимур
Тимур 18 августа 2012 | 01:14
0
Как добавить текстовую ссылку ведущую туда же куда и сам баннер.
Шамшур Иван
Шамшур Иван 19 августа 2012 | 16:35
0
К сожалению, в данном плагине это не предусмотрено.
Сергей
Сергей 4 сентября 2012 | 19:08
0
Скажи а как подключить ротодар к Joker Board 3 ато я уже мучаюсь над этой проблемой 2 суток не чего не подключается
Шамшур Иван
Шамшур Иван 4 сентября 2012 | 22:33
0
Понятия не имею. Никогда с ним не работал. Но думаю не очень сложно. Нужно найти основной файл темы или шаблона, и подключить туда сам скрипт. Как это сделать описано выше. Только нужно указать правильный путь к файлам. И не забыть загрузить на сервер сами файлы.
Сергей
Сергей 5 сентября 2012 | 19:46
0
веришь я уже все файлы перерыл уже куда мона и куда не нельзя прописал и не какова результата нема не знаю что даже делать
Александр
Александр 11 марта 2013 | 17:26
0
Скажите, а как сделать чтоб слайды останавливались при наведении курсора? Добавлял hoverPause: true не помогает....
Алексей
Алексей 10 октября 2012 | 21:51
0
Подскажи, пожалуйста еще похожие скриптики, кто знает
Алексей
Алексей 12 октября 2012 | 15:25
0
, speed: 500, timeout: 3000, random: true, width: 200, height: 450, fx:'slide', autorun: true, nav: true });]

как передать эти параметры отдельном файле и как отказаться от них в rotator.min.js ?
Alexey
Alexey 3 ноября 2012 | 22:12
0
Решение не плохое, но есть подвох. Страница загружается сразу со всем списком баннеров, один баннер весит 40кб, а если баннеров 10 или 20?
Оксана
Оксана 29 ноября 2012 | 14:51
0
Здравствуйте!
Подскажите, как вставить ротатор в сайт на joomla!

Порядок действий:
1. В индексный файл разместила подключение библиотек между тегами <head></head>
2. Добавила стили в css-файл
3. Создала модуль с произвольным кодом и вписала туда вызов плагина.
4. Куда вставить последний код со скриптом?
Оксана
Оксана 29 ноября 2012 | 15:05
0
Подскажите, пожалуйста =)
Madwand
Madwand 27 декабря 2012 | 02:19
0
Большое спасибо, как раз то, что я искал!
Андрей
Андрей 6 января 2013 | 21:32
0
А могу использовать этот ротатор на своем сайте??

спасибо..
Оксана
Оксана 7 января 2013 | 02:15
0
Иван, почти со всем разобралась сама, одна осталась проблема, выдает :

Неизвестное свойство «box-sizing». Потерянное объявление.
($('#rotator').rotator({fx:'slide',autorun: true, nav: true}));

Как это можно починить? На локальном все работает
Константин
Константин 4 февраля 2013 | 17:10
0
Подскажите, пожалуйста. Возникла такая проблема. Работает ротатор только с выключенным ЧПУ. С включенным только на главной странице. Можно ли что-нибудь сделать?
анна
анна 13 февраля 2013 | 16:17
0
Подскажите пожалуйста, как перенести на статичную страницу ротатор изображений с главной страницы. Как выглядит код и где его найти. Тема вордпресс Sensation.Заранее спасибо
Андрей Нестеров
Андрей Нестеров 16 сентября 2013 | 10:31
0
Здравствуйте) У меня тоже работает только на главной с включенным компонентом sh404sef...что можно сделать?
Шамшур Иван
Шамшур Иван 16 сентября 2013 | 10:55
0
Для того, чтобы ротатор работал на всех страницах сайта, необходимо прописать правильный путь к изображениям, т.е. это должен быть либо абсолютный путь, либо относительный, но от корня сайта!
Sobsoft
Sobsoft 29 октября 2013 | 09:07
0
А как добавить ротатору в данном коде остановку (точнее паузу) при наведении курсора и продолжение при убирании курсора.
Роман
Роман 28 ноября 2013 | 10:51
0
Добрый день!
Нужна ваша помощь!

Как сделать что бы баннер нормально смотрелся на разных разрешениях, и при центрирование что бы не уезжали стрелочки прокрутки?
Вадим
Вадим 29 ноября 2013 | 13:10
0
Строка: 177
Ошибка: 'url' - есть null или не является объектом

строчка
render.push('<li><div class="img_rotator"><a rel="nofollow" href="'+slide.url+'" target="_parent _blank"><img src="'+slide.img+'" width="'+self.options.width+'" height="'+self.options.height+'" alt="*" /></a></div></li>');

в ИЕ 8
сайт belita72.ru
Шамшур Иван
Шамшур Иван 29 ноября 2013 | 15:10
0
При объявлении массива slides, уберите последнюю запятаю после:

{url:'http://belita72.ru/shop/kompleksnaja-1/posle-25/mjortvoe-more',img:'http://belita72.ru/images/mm.jpg'},

И должно все работать.
Вадим
Вадим 3 декабря 2013 | 07:42
0
Спасибо, помогло
Victor
Victor 3 декабря 2013 | 13:24
+3
Kак убрать точку появляющуюся в списке UL?

ul..... {
margin: 0px;
padding: 0px;
list-style: none;
}
Это не канает... все равно появляется точка

Спасибо!
Юлия
Юлия 19 февраля 2014 | 14:16
0
А что значит, вызвать плагин? Куда надо вставить это код и как вызывать плагин?
Александр
Александр 20 ноября 2014 | 13:10
0
Добрый день, Иван,

а вы не могли бы подсказать, как вместо стрелочек, поставить переключатели внизу справа в виде точек как на этом слайдере: http://wowslider.com/ru/web-photo-gallery-subway-basic.html
Александр
Александр 20 ноября 2014 | 16:55
+2
Подскажите как его прикрутить к wordpress через functions.php? А то он конфликтует с другим плагином на шаблонной странице из-за

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Иван
Иван 4 февраля 2015 | 14:30
0
Такая же проблема на Вордпрессе! Перестает работать фотогалерея из-за этого. Можно что-то с этим сделать?
Иван
Иван 4 февраля 2015 | 17:39
+1
Заработало! Вставил в functions.php

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}

Тогда можно не вставлять <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
дмитрий
дмитрий 6 мая 2015 | 19:24
0
не могу разобраться как задать размер банера в процентах в самом коде явы. помогите плз советом.
Андрей
Андрей 18 июля 2015 | 17:34
0
Ротатор супер, очень простой в понимании, легко устанавливается! Спасибо автору!!!
Есть один вопрос, можно ли сделать так, что бы, при наведении мышки на слайд, ротатор останавливался?
ezaz
ezaz 13 октября 2015 | 20:13
0
Можно ли на гуглевском jQuery организовать ротатор URL?
Дмитрий
Дмитрий 20 января 2021 | 15:16
+1
Попробовал. Вроде всё сделал по инструкции. Ротатор так и не заработал. Жаль. К автору вопрос писать не стал, т.к. смотрю, что часть вопросов всё равно без ответов, и проблемы с установкой у многих. Здесь конечно видео-инструкция очень бы помогла, т.к. до шага вызова плагина ротатора было всё предельно ясно, а потом толком непонятно что куда вставлять, если не знаешь JS. Крутил вертел код, всё бестолку - ротатор на сайт так и не встал. Но демка классная. )))

Простая CRM