Бегущая строка jQuery liMarquee.

Бегущая строка jQuery на плагине liMarquee обладает теми же способностями, что и бегущая строка, созданная с помощью тега marquee. Но у плагина liMarquee есть определенные преимущества, что делает его использование более предпочтительным.

Самое главное преимущество – бегущая строка jQuery «дружит» с визуальными редакторами. Если Вы можете редактировать статью с бегущей строкой, созданной тегом marquee, только в режиме текстового (HTML) редактора, то со статьей с бегущей строкой, созданной плагином liMarquee, Вы можете работать в любом режиме.

Дополнительные преимущества плагина liMarquee перед тегом marquee:

•    бегущую строку можно сделать непрерывной;
•    мышью можно двигать строку для перемещения на удобную для чтения позицию;
•    в бегущую строку можно загрузить текст из XML файла.

Информация для тех, кто не любит плагины WordPress. Плагины jQuery не имеют никакого отношения к плагинам WordPress. Использование плагинов jQuery никаким образом не может отрицательно сказаться на работоспособности WordPress темы.

Примеры бегущих строк на плагине liMarquee можно посмотреть на сайте разработчика. Там же можно скачать установочные файлы последней версии плагина liMarquee. Здесь же я хочу остановиться на некоторых тонкостях по инициализации плагина в WordPress.

Инициализация плагина liMarquee в WordPress.

Скачайте и разархивируйте файл «liMarquee.zip».

Распакованный архив liMarquee.

Войдите в папку «js» и создайте JavaScript файл, для примера «myscripts.js». Для этого создайте стандартным способом новый текстовый файл «Текстовый документ.txt» и переименуйте его в «myscripts.js». В открывшемся окне предупреждении о смене расширения файла нажмите кнопку «Да».

Окно предупреждения смены расширения файла.

С JavaScript файлами удобно работать с помощью программы «Notepad++». Если у Вас на компьютере программа «Notepad++» не установлена, выделяем курсором мышки файл «myscripts.js», нажимаем правую кнопку мышки и открываем файл для редактирования с помощью меню «Изменить».

Открываем файл для редактирования.

Записываем в файл код:

$(document).ready(function() {
}); // Конец ready

Между двух строчек кода будут вставляться коды инициализации бегущих строк. На рисунке ниже приведен пример файла «myscripts.js» с одной бегущей строкой на сайте. Красным выделен код инициализации бегущей строки.

Пример файла «myscripts.js» для сайта с одной бегущей строкой.

Содержимое бегущей строки вставляется в файлы php или в статью (запись) с помощью следующей конструкции:

<div class="str str_wrap">
код содержимого бегущей строки
</div>

где str условно можно назвать идентификатором бегущей строки. Каждая бегущая строка на плагине liMarquee должна иметь свой уникальный идентификатор и свой код инициализации.

Уделим немного внимания содержимому бегущей строки для непрерывной бегущей стоки.

Непрерывная бегущая строка jQuery liMarquee.

Чтобы получить непрерывную горизонтальную бегущую строку, ширина содержимого бегущей строки должна быть больше ширины поля вашей статьи. Если ширина содержимого меньше – повторите содержимое несколько раз. Для примера, в приведенной бегущей строке мне пришлось написать строку « Привет! » 13 раз, пока общая ширина строки не стала больше ширины записи.

Привет! Привет! Привет! Привет! Привет! Привет! Привет! Привет! Привет! Привет! Привет! Привет! Привет!

Вот код этой строки:

<div class="str8 str_wrap">
<p> Привет!  Привет!  Привет!  Привет!  Привет!  Привет!  Привет!  Привет!  Привет!  Привет! Привет!  Привет! Привет! </p>
</div>

Для вертикальной строки, непрерывная строка получается, если высота содержимого строки больше высоты блока, в котором располагается строка. Если высота содержимого меньше, содержимое необходимо повторить несколько раз. Для примера, в вертикальной бегущей строке, расположенной в блоке высотой 50 px мне пришлось содержимое бегущей строки повторить три раза.

Привет!

Привет!

Привет!

Код строки:

<div class="str9 str_wrap str_vertical" style="height: 50px;">
<p style="text-align: center;">Привет!</p>
<p style="text-align: center;">Привет!</p>
<p style="text-align: center;">Привет!</p>
</div>

Подключение плагина liMarquee.

Для подключения плагина liMarquee первым делом необходимо любым Вам удобным способом закачать папки «css» и «js» в тему Вашего сайта (блога). После этого необходимо в файле «header.php» Вашей темы перед закрывающим тегом </head> прописать код:

<link rel="stylesheet" href="http://ваш домен/wp-content/themes/ваша тема/css/liMarquee.css">
<script type='text/javascript' src='http://ваш домен/wp-content/themes/ваша тема/js/jquery-1.9.0.min.js'></script>
<script type='text/javascript' src='http://ваш домен/wp-content/themes/ваша тема/js/jquery.liMarquee.js'></script>
<script type='text/javascript' src='http://ваш домен/wp-content/themes/ваша тема/js/myscripts.js'></script>

где «ваш домен» необходимо заменить на имя Вашего домена и «ваша тема» на название Вашей темы.

Надеюсь, что бегущая строка jQuery на плагине liMarquee удовлетворит все Ваши потребности. На любые вопросы отвечу в комментариях.

p.s. Все примеры из статьи «Бегущая строка для сайта» выполнены с помощью плагина liMarquee.

Уроки на все случаи жизни

Нажимайте кнопки! Делитесь информацией с друзьями! Нажимайте кнопки! Делитесь информацией с друзьями!

Получайте информацию о новых акциях и новостях на свою электронную почту!

 

Введите адрес электронной почты:

 

 

Бегущая строка jQuery liMarquee.: 2 комментария

  1. Алла

    Спасибо большое за такое подробное объяснение. А можно ли к такой бегущей строке пристегнуть ссылку, например на нужную статью?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Разместить ссылку на свою статью