ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Простой слайдер картинок и контента

Сообщений 11 страница 16 из 16

1

Простой Слайдер картинок и контента
https://forumupload.ru/uploads/0007/e3/f7/6822/96559.png

Автор: Deff
Платформа: любая

Основные достоинста данных слайдеров:
Автоцентрирование кнопок по высоте
Автоскролл контента по высоте, при превышении размеров...
Возможность вложенности в таблицы с вкладками,
Возможность установки нескольких слайдеров при использовании единственного скрипта(необходима только смена ID слайдера в очередном контенте, и прописи этого ID в функции запуска
Быстрый запуск.

В HTML верх

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Туда, где нужен слайдер

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

настройка

slider2 - красным жирным - уникальный id cлайдера(*прописывается дважды в начале и  конце),
если слайдеров несколько, для каждого свой

<div id="slider2" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0">  - красным: прописываем свои цифры ширины и высоты слайдера;
padding:0 - отступ контента от краёв, обычно при вставке фоновой картинки вместо 0 - прописываем 12px

    <img button-width="42" class="button-left hide" src="http://s3.uploads.ru/KcP7S.png"/>
    <img button-width="42" class="button-right" src="http://s2.uploads.ru/aIH0D.png"/>

- левая и правая кнопка слайдера, красным - ширина  и ссылка на картинку,
значения ширины картинок лучше выставлять равные между собой и идентичные с размерами исходной картинки

Очередную вкладку слайдера добавляем таким кодом:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Красное - Ваш контент

Возможность смены направления движения и времени анимации слайда:
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:

<script>$("#slider2").slideF(0,700);</script>

Первая цифра - смена направления - 0 или 1
Вторая цифра примерно от 0 до 800, - время анимации кадра

Вариант Кольцевого слайдера с возможностью автопрокрутки слайдов:
Установка та же самая, изменения в назначении параметров запуска функции.
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:
<script>$("#slider2").slideF(660,4);</script>
1-я цифра: примерно от 0 до 800 - время анимации кадра
2-я цифра: время автопрокрутки в секундах (от 1 до 10) (Если параметр не устанавливаем, - автопрокрутки нет.)

ВНИМАНИЕ! Для  кольцевого слайдера меняем в HTML верх строку:

<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/78275.js"></script>
    на
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/39493.js"></script>

Можно установить свои добавки стиля к мини-меню прокрутки:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Добавлена возможность смены направления движения и времени анимации слайда:
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:

<script>$("#slider2").slideF(0,700);</script>

Первая цифра - смена направления - 0 или 1

Вторая цифра примерно от 0 до 800, - время анимации кадра


Добавлен новый Вариант Кольцевого слайдера, с возможностью автопрокрутки слайдов:
Установка та же самая, изменения в назначении параметров запуска функции:
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:

<script>$("#slider2").slideF(660,4);</script>

1-я цифра - цифра примерно от 0 до 800, - время анимации кадра
2-я цифра, 4 - время автопрокрутки в секундах(от 1 до 10), (Если параметр не устанавливаем, - автопрокрутки нет.
Для  кольцевого слайдера меняем в HTML верх строку

<script type="text/javascript" src="http://forumstatic.ru/files/0010/b4/f8/78275.js"></script>

на

<script type="text/javascript" src="http://forumstatic.ru/files/0010/b4/f8/39493.js"></script>

Можно установить свои добавки стиля к мини-меню прокрутки

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

11

бродяга
У тьву не тот скрипт для точек внизу: http://forum.mybb.ru/viewtopic.php?pid=792448#p792448
Часть вторая - кольцевой

Чоб был во всю ширину нужно скрыть уши с кнопками справо-слево (td.left,td.right)

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

+2

12

Deff
О, отлично, спасибо :з

Подпись автора

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
заказать вёрстку

0

13

#p160038,Deff написал(а):

У тьву не тот скрипт для точек внизу: http://forum.mybb.ru/viewtopic.php?pid=792448#p792448
Часть вторая - кольцевой

Чоб был во всю ширину нужно скрыть уши с кнопками справо-слево (td.left,td.right)

Добавила в шапку темы дополнения к коду...

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh

+1

14

Я настроил скрипт, чтобы картинки отображались на всю ширину слайдера и чтобы автоматически растягивались по размеру,но не у всех всё отображается корректно. У некоторых вот так:

Свернутый текст

В чём может быть проблема? Форум:
http://brightsofseconds.rolebb.ru/

Подпись автора

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
заказать вёрстку

0

15

бродяга
Думаю скриншот с HTTPS, тады нужно в кодах стиля и скрипта выставить HTTPS или вообще протокол обрезать

Ну и в стиле поправить, если фоны c http

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

+1

16

Deff
Спасибо, обрезал до //, спрошу у заказчика, не решилась ли проблема.

Подпись автора

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
заказать вёрстку

0