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

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

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

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

Подробнее

Мийрон

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

Подробнее

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

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

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

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


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Каталог Javascript, Jquery и CSS решений » Слайдер-аккордеон для изображений с описаниями - Slidorion


Слайдер-аккордеон для изображений с описаниями - Slidorion

Сообщений 1 страница 10 из 36

1

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

https://forumupload.ru/uploads/0007/e3/f7/2617/194662.png

Сегодня я хочу предоставить вашему вниманию замечательный jQuery-скрипт, позволяющий легко и быстро создать так называемый Слайдрион – совмещение слайдера изображений и вертикального аккордеона. Красиво, удобно, компактно, стилизуемо – а, главное, при должной фантазии позволит вам сделать все, что душе угодно: от фотогалереи с описаниями фотографий до новостной секции с иллюстрациями. Мне кажется, такой скрипт обязательно пригодиться форумам творческой направленности.

Размещение контента:

HTML

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

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

Итак, как же это ставить. Для начала подключаются два плагина, позволяющие работать нашему слайдо-аккордеону.

JS (самый верх html-низ или самый верх контейнера страницы)

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

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

Файлы js-скриптов залиты на форум-полигон, при желании вы можете скачать их (открыть ссылку -> меню браузера -> файл -> сохранить как…) и пересохранить в собственное хранилище форума (администрирование -> файлы)

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

CSS (верхний html-контейнер, контейнер страницы или без тегов в css-окна)

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

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

Как вычислить высоту #accordion .content:

Берем высоту контейнера (#accordion height), вычитаем из него помноженную на число вкладок высоту заголовка (#accordion .header height) и делим полученное число на количество вкладок.

И напоследок самое сладкое – инициализатор скрипта. А у него, как у хорошего скрипта, есть чудесное свойство – опции! Вы можете сами настроить автосмену позиций, способ смены картинки и некоторые другие вещи. Но для начала:

JS (html-низ или контейнер страницы)

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

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

Список опций:

autoPlay: 'true'

Автоматическая смена слайдов включена

autoPlay: 'false'

Автоматическая смена слайдов отключена

effect: 'fade'

Смена изображений через выцветание

effect: 'slideLeft'

Смена изображений замещением слева

effect: 'slideRight'

Смена изображений замещением справа

effect: 'slideDown'

Смена изображений замещением сверху вниз

effect: 'slideUp'

Смена изображений замещением снизу вверх

effect: 'overLeft'

Смена изображений наползание слева

effect: 'overRight'

Смена изображений наползание справа

effect: 'overDown'

Смена изображений наползание сверху вниз

effect: 'overUp'

Смена изображений наползание снизу вверх

hoverPause: 'true'

Пауза проигрывания при наведении курсора мыши включена

hoverPause: 'false'

Пауза проигрывания при наведении курсора мыши выключена

interval: число в миллисекундах без кавычек!

Задержка перед сменой изображения

speed: число в миллисекундах без кавычек!

Время смены одного слайда, то есть скорость анимации

Пожалуйста, будьте внимательны! После каждой опции, кроме последней, ставьте запятую, это важно!

+5

2

http://nell.forumbb.ru/
Вставила в таблицу в раздел "Новости".когда переключаю на другой раздел и снова возвращаюсь к новостям,слайдер пропадает.В чем дело?

0

3

уже не надо

0

4

Так та все понятно, вот как вставлять картинка можно поподробней?

0

5

<div class="content">
    <!-- Содержание располагается здесь -->
    </div>

не очень разбираюсь в этом, но думаю вот так
вместо красного вставляете картинку

<img src="http://imgs.su/tmp/1319889149-562.jpg" alt="" border="0">

вместо красной ссылки, вставляете свою ссылку на картинку

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

https://forumupload.ru/uploads/001b/1a/5a/29/194715.gif https://i.imgur.com/J116fWT.png

0

6

Ghоst написал(а):

<div class="slider-image" rel="section1">
    <img src="sample.jpg" width="500" height="400" />
    </div>

Там, где красным - к какой секции относится картинка.
Вместо жирного - ссылка на картинку.

0

7

lambdadelta
Картинка так-же вылазиет в том окне где Заголовок  слайда,

0

8

kosoy

lambdadelta написал(а):

не очень разбираюсь в этом, но думаю вот так

и описать надо было лучше куда вам картинка нужна была о.о
прекращаю флудить о.о

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

https://forumupload.ru/uploads/001b/1a/5a/29/194715.gif https://i.imgur.com/J116fWT.png

0

9

Ghоst
Во, спс, получилось) щас дальше буду настраивать, Вы далеко не уходите))

0

10

Ghоst
А описание Заголовок слайда я вот сам заголовок сменил, а текст под ним куда вписывать?

0


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Каталог Javascript, Jquery и CSS решений » Слайдер-аккордеон для изображений с описаниями - Slidorion