Прокрутка изображений или текста с помощью jQuery

Модификации основанные на языке JavaScript.

Скрипты(Огромная галерея скриптов, на любой вкус и цвет)
Аватара пользователя
CabinetAdmin

Прокрутка изображений или текста с помощью jQuery

CabinetAdmin 05 апр 2014, 10:54 Сообщение

JQuery ScrollBox представляет собой легкий плагин, который позволяет прокручивать список HTML элементов (текст, изображения, и т.д. ..), как слайдер карусели или традиционной бегущей строкой.

Изображение


Особенности

  • Простой и легкий
  • Вертикальная и горизонтальная прокрутка
  • Автоматический запуск
  • Несколько экземпляров на одной странице
  • Пауза при наведении курсора
  • Настройка под себя
  • Кнопки навигации Назад / Вперед

Подключение плагина.
В разделе <head> ставите библиотеку jquery и сам плагин:

Код: Выделить всё

<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> <script src= "путь до файла/jquery.scrollbox.js" ></script>


Html структура:

Код: Выделить всё

<div id="demo">
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</div>


Для того чтобы плагин заработал, требуется его инициализация, т.е. задать правила по которым требуется прокручивать наши элементы. Для этого после подключенного плагина добавляете:

Код: Выделить всё

<script>$('#demo').scrollbox();</script>


В этом варианте, содержимое блока будет прокручиваться по вертикали, снизу вверх. Для реализации прокрутки: по горизонтали, при наведении мыши и др. предлагаю посмотреть демо:


Для использования вариантов из примеров, достаточно заменить содержимое скрипта и не забыть удалить цифру из примера $('#demo3').scrollbox({$('#demo').scrollbox({.

Если блоков на странице несколько, то добавляете к структуре свой номер <div id="demo"><div id="demo2">
Скрипт в данном случае будет выглядеть так:

Код: Выделить всё

<script>
$(function () {
$('#demo').scrollbox();
// Код для второго блока
$('#demo2').scrollbox({
linear: true,
step: 1,
delay: 0,
speed: 100
});
});
</script>


Надеюсь принцип понятен:)

Файлы:
jquery-scrollbox-master.zip
(348.78 КБ) 456 скачиваний
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Serg

Прокрутка изображений или текста с помощью jQuery

Serg 30 янв 2015, 03:08 Сообщение

Подскажите как в 5 примере уменьшить скорость примерно в 2 раза

Код: Выделить всё

$('#demo5').scrollbox({ direction: 'h', distance: 140 }); $('#demo5-backward').click(function () { $('#demo5').trigger('backward'); }); $('#demo5-forward').click(function () { $('#demo5').trigger('forward'); });

Аватара пользователя
CabinetAdmin

Прокрутка изображений или текста с помощью jQuery

CabinetAdmin 30 янв 2015, 15:22 Сообщение

Добавьте после $('#demo5').scrollbox({, с новой строки:

Код: Выделить всё

  startDelay: 4, delay: 6,

Первый, это количество секунд, после которых начнётся прокрутка.
Второй, это количество секунд между прокрутками.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
NORTH

Прокрутка изображений или текста с помощью jQuery

NORTH 10 фев 2015, 15:13 Сообщение

Добрый день! к сожалению - Выбранного вложения больше не существует :( .

Аватара пользователя
CabinetAdmin

Прокрутка изображений или текста с помощью jQuery

CabinetAdmin 10 фев 2015, 15:29 Сообщение

Перезалил. Спасибо.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
NORTH

Прокрутка изображений или текста с помощью jQuery

NORTH 10 фев 2015, 15:48 Сообщение

Извините пожалуйста, если мой вопрос окажется малозначимым или глупым!
Мне очень понравился пример под номером 2!
Можно ли реализовать в этой прокрутке, как "последние сообщения в темах"?

Заранее благодарю за ответ!

Аватара пользователя
CabinetAdmin

Прокрутка изображений или текста с помощью jQuery

CabinetAdmin 10 фев 2015, 15:59 Сообщение

Конечно.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
CabinetAdmin

Прокрутка изображений или текста с помощью jQuery

CabinetAdmin 10 фев 2015, 17:01 Сообщение

Кстати, есть тема Вертикальная прокрутка последних тем в блоке. jQuery, скрипт как раз посвящён прокрутке тем в блоке последних сообщений. Если этот не пойдёт, можете посмотреть в сторону того скрипта.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
NORTH

Прокрутка изображений или текста с помощью jQuery

NORTH 10 фев 2015, 17:55 Сообщение

Я очень извиняюсь, т.к. для сайтостроения у меня программа есть, а в форум-строени я месяц без недели!
Форум готов (полностью перекрашен и сделала нужную шапку, добавила расширения, установила инфо-блок), но вот не хватает именно прокрутки, и как её вставить вообще понятия не имею, но есть предположения.....
Если Вас не затруднит, прошу не гневаться а по возможности объяснить подробнее-
На данный момент у меня- Версия phpbb 3.1.2, версия jQuery 1.11.0, стиль стоит на основе prosilver-а.
Каковы должны быть мои дальнейшие действия!?:
в корень форума я должна загрузить разархивированную папку jquery-scrollbox-master, после я должна подключить сам плагин в файле -overall_header,а вот далее Html структура и т.д.. непонятно до момента
Для использования вариантов из примеров, достаточно заменить содержимое скрипта и не забыть удалить цифру из примера $('#demo3').scrollbox({ → $('#demo').scrollbox({
, т.к блок планируется только один.

Ещё раз прошу прощение ! с Благодарностью NORTH.

Аватара пользователя
NORTH

Прокрутка изображений или текста с помощью jQuery

NORTH 10 фев 2015, 18:17 Сообщение

CabinetAdmin писал(а):Кстати, есть тема Вертикальная прокрутка последних тем в блоке. jQuery, скрипт как раз посвящён прокрутке тем в блоке последних сообщений. Если этот не пойдёт, можете посмотреть в сторону того скрипта.


Благодарю, попробую -кажется мне его легче будет установить.

Анн...нет!!! ничего не получилось....
Видно придется оставить затею до лучших времен!

Аватара пользователя
CabinetAdmin

Прокрутка изображений или текста с помощью jQuery

CabinetAdmin 10 фев 2015, 20:10 Сообщение

С версией 3.1 всё немного сложнее. Как советуют разработчики, не нужно вносить правки в шаблоны, нужно всё реализовывать расширениями... Ну это кому как, лично я, для одной двух правок не буду городить расширение, а внесу правки сразу в шаблон.

NORTH писал(а):Источник цитаты Благодарю, попробую -кажется мне его легче будет установить.

На странице списка форумов сверху, в правом блоке расположен список последних тем форума (Recent Topics), переработан и добавлена прокрутка, как раз тем скриптом, что по ссылке.
Если вам интересен такой вид и прокрутка, могу выложить отдельным расширением, ну или как дополнение к расширению.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
NORTH

Прокрутка изображений или текста с помощью jQuery

NORTH 11 фев 2015, 11:57 Сообщение

CabinetAdmin писал(а):Источник цитаты На странице списка форумов сверху, в правом блоке расположен список последних тем форума (Recent Topics), переработан и добавлена прокрутка, как раз тем скриптом, что по ссылке.
Если вам интересен такой вид и прокрутка, могу выложить отдельным расширением, ну или как дополнение к расширению.


Добрый день!
да :Bravo: ! такая вполне подойдет !
а будет ли возможность изменить её по ширине и высоте, т.е сделать её в ширину больше, а в высоту меньше и увеличить скорость прокрутки!? Если нет! То я и этому очень рада буду!

С Благодарностью, North!

Аватара пользователя
CabinetAdmin

Прокрутка изображений или текста с помощью jQuery

CabinetAdmin 11 фев 2015, 15:41 Сообщение

NORTH писал(а):Источник цитаты изменить её по ширине и высоте

Конечно, почему нет? :)

Составлю инструкцию в разделе для phpbb 3.1
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
CabinetAdmin

Прокрутка изображений или текста с помощью jQuery

CabinetAdmin 11 фев 2015, 18:11 Сообщение

NORTH писал(а):Источник цитаты такая вполне подойдет !

Recent Topics - Список последних тем форума
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «JavaScript / jQuery»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость