Комментарии к статье:
Элегантный ротатор баннеров (изображений, картинок) на jQuery
Дата: 20 октября 2011
56569
121
56569
121
-
Комментарии (121)
- Сайт
Facebook
Простая CRM
height — высота одного слайда
Дополните, по умолчанию в px, если надо в %, то надо писать width:'100%' в кавычках.
Вывожу только 1 блок - все получилось настроить как нужно кроме автоширины Ж(
Подскажите, какой он должен быть?
Пробовал так
img:'images/beige200x450.jpg'
img:'.../images/beige200x450.jpg'
img:'{THEME}/images/beige200x450.jpg'
от чего нужно начинать писать путь?
Спасибо за ротатор и за ответ)
'/images/beige200x450.jpg'
не получается поставить на ДЛЕ
когда вставляю
между <head></head> все другие скрипты отключаются то ест слайд и выпадающий меню.
Спасибо, помог действительно оказалось все очень просто )))) Сделал, как ты посоветовал.
В общем все точно также, как и с обычным jQuery плагином
Я не эксперт и по этому уже пол дня колупаюсь а толку нет. Рисую сайт турфирмы на Юкозе 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. В результате - тонкая белая полосочка над сайтом. Помогите пожалуйта!
<script type="text/javascript" src="/rotator/jquery.rotator.js"></script>
но проблема осталась.
А на юкозовской 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>
<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{,,,}.
Спасибо за внимание.
Извините за чрезмерную любознательность))
Жду ваш экспертный ответ.
2. jquery.rotator.min.js - это сжатая копия ротатора. ничем не отличается, только размер меньше
3. Это необходимо менять в самом коде ротатора, там где формируется html разметка
4. Да, этот стиль надо удалить
И вызывать плагин нужно к каждому ротатору отдельно. Ну или использовать общий класс
Так пробывали?
Перед тем как залить скрипт в нужное место я его потестил на серваке: всё красиво, всё удобно и просто.
Думал проблем практически не будет с уставновкой на Webasyst..я ошибся=)))
Есть одна проблемма: для теста хочу получить на странице 2 ротатора сразу,
но один с прокруткой а другой с фэйдом...разные задачи. И суть проблеммы в том
что всегда выдаёться результат один: ВСЕ РОТАТОРЫ выползают с эффектом фэйд.
Предполагаю что каким-то чудом функция не получает параметров
и работает по-умолчанию, которое задано в теле плагина.
Сделал как вы описывали:
в HEAD прописал подключение плагина+библиотеки, ниже вставил такое:
В нужное место в сайте вставил:
В итоге получил тот результат, что описал. Пытался по-разному, но опыта мало не могу понять где я ошибаюсь или что хочет от меня WebAsyst.
Буду рад конструктиву, спасибо.
1.Как растянуть width на 100%???
2.Как выровнять по центру))
уже многое пробовал, но не поддается...
а растянуть на 100% не получится. ротатор растягивается на ширину одного слайда.
<div id='rotator1' style="500px; margin: 0 auto;"></div>
на примере карты Украины почему-то не работает((
Уважаемый автор не могли бы вы немного помочь.
Перед тем как залить скрипт в нужное место я его потестил на серваке: всё красиво, всё удобно и просто.
Думал проблем практически не будет с уставновкой на 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.
Буду рад конструктиву, спасибо.
зачем-то опять инициализируете ротаторы с настройками по умолчанию. Вот и результат такой. Просто удалите вот эти строки:
После вашего поста попробовал ещё раз...тоже самое.=)))
п.с. файлы не менял кроме того, что прописал свои картинки, и в "ротаторе со стрелочками" сменил для эксперемента файл .png
$('#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 на это Указывает что ошибка в функции- Синтаксис Эрор.
Т.е. Вывод:если задавать функцию с параметрами - выдаёт ошибку, если без то работает, но нужно её почему второй раз перевызывать в теле по иному не хочет работать.
Где я накосячил?
в этом куске
for (i=0; i < count; i++) {
pic[i] = new Image();
pic[i].onload = function() {
//Код
}
};
pic[i].src = images[i].src;
Вы проверяете статус загрузки изображения.
Но вот интересный факт, я для проверки удалил одно изображение из папки с ротатером и получилось так что ротатер работал нормально, но тег <img> выезжает пустым, вот я собственно и хотел бы спросить, а что получается часть кода которая отвечает за проверку статуса загрузки не работает?
Но это неплохо было бы модифицировать, допустим изображение неким образом исчезло или удалили случайно, вот вместо того что бы показывать бесконечно прелоадер неплохо было бы сделать загрузку мини изображения с текстом "картинка отсуствует", хотя я конечно попытаюсь сам это дописать.
Плохо,что не реально сделать выход на модальное окно. А только УРЛ...Это плохо. Хотел как слайдер с фэнсибокс.
Всё равно переходит...Вероятно нужно прописывать отдельный код...
Наконец у меня дошли руки до вашего ротатера и я внёс некоторые изменения, обработку ошибки загрузки одного или нескольких изображений и так кое-что по мелочи. Если вы желаете то могу вам выслать для оценки модификации вашей идеи.
Сильно не пинайте т.к. я только начал интересовться jQuery где-то с месяц назад +/-.
Спасибо за халявные исходники.
Прошу прощения за ламерсие вопросы:
1. В примере дублируются ссылки перехода и ссылки на картинки как в самом скрипте "jquery.rotator.js", так и при подключении скрипта в head. Я решил в head эти сылки не прописывать и подключил скрипт так:
<script type="text/javascript">
$(function(){
$('#rotator').rotator({ });
})
</script>
Вроде работает, но я не уверен, что все правильно написал. Если не правильно, то подскажите - как правильно?
2. Никак не соображу, если я захочу использовать на сайте 2 разных ротатора, То мне надо отдельный jquery.rotator.js добавлять? и как, в таком случае, правильно подключить два разных ротатора?
2. Нет. jquery.rotator.js нужно подключать только один раз. Просто два раза вызывайте сам плагин, указав в настройках плагина нужные слайды.
А также надо добавить в метод init() следующий код:
Вот рабочий пример http://biznesguide.ru/demo/rotator/index2.html
Где не ищешь Как вызвать JQuery все не по делу.
Спасибо!
speed: 1000,
timeout: 3000,
random: true,
width: 469,
height: 60,
fx:'fade',
autorun: false,
nav: false
render.push('<li><div class="img_rotator"> и т.д. ?
add: function(slides){...}
На работу ротатора это не повлияло
Подскажите, за счет чего идет привязка навигации к банерам.
Никак не получается отвязать от границ страницы. Подскажите пожалуйста, ниже ссылка.
http://sluniaviy.narod.ru/test.html
Ротатор супер!!!
style пробовал прописывать как в странице, так и привязывать css файл, результат не менялся.
Спасибо.
Вставил Код (jQuery) в main.tpl между тегами Head.
Вот собственно и всё =) И неха не фурычит подскажите что не так???-)
+ У меня установлен старый Ротатор.
как передать эти параметры отдельном файле и как отказаться от них в rotator.min.js ?
Подскажите, как вставить ротатор в сайт на joomla!
Порядок действий:
1. В индексный файл разместила подключение библиотек между тегами <head></head>
2. Добавила стили в css-файл
3. Создала модуль с произвольным кодом и вписала туда вызов плагина.
4. Куда вставить последний код со скриптом?
спасибо..
Неизвестное свойство «box-sizing». Потерянное объявление.
($('#rotator').rotator({fx:'slide',autorun: true, nav: true}));
Как это можно починить? На локальном все работает
Нужна ваша помощь!
Как сделать что бы баннер нормально смотрелся на разных разрешениях, и при центрирование что бы не уезжали стрелочки прокрутки?
Ошибка: '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
И должно все работать.
ul..... {
margin: 0px;
padding: 0px;
list-style: none;
}
Это не канает... все равно появляется точка
Спасибо!
а вы не могли бы подсказать, как вместо стрелочек, поставить переключатели внизу справа в виде точек как на этом слайдере: http://wowslider.com/ru/web-photo-gallery-subway-basic.html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
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>
Есть один вопрос, можно ли сделать так, что бы, при наведении мышки на слайд, ротатор останавливался?