Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» как настроить автоматическое закрепление первого сообщения в теме?автор Форум Г. Сегодня в 19:08
» совет админам
автор Форум Г. Вчера в 12:24
» Не могу поменять местами виджеты форума.
автор Форум Г. Вчера в 12:19
» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор https://https-festasport. Декабрь 7th 2024, 19:06
» Пропала функция редактировать сообщение
автор VENEFICA. Декабрь 6th 2024, 07:12
» Не корректное отображение картинок
автор Luz Декабрь 5th 2024, 19:19
» ВПН
автор Luz Декабрь 5th 2024, 19:17
» Дублируется ссылка на форум в боковом меню
автор Luz Декабрь 5th 2024, 19:14
» Как найти администратора?
автор Luz Ноябрь 28th 2024, 14:12
» Пропала вкладка "Обработка пользователей"
автор Luz Ноябрь 28th 2024, 13:56
"Аккордеон" из слайдов (с картинками и/или текстом) на главной странице
Страница 1 из 1
"Аккордеон" из слайдов (с картинками и/или текстом) на главной странице
Дорогие друзья!
Сегодня мы хотим предложить для ваших форумов красивое решение: блок с важной информацией и/или c картинками, раскладывающийся, как "аккордеон", состоящий из нескольких слайдов.
Как это будет выглядеть ?
Вы можете посмотреть, как будет работать такой блок, здесь : http://stitchui.com/liteaccordion/
Дальше дело уже за вами - вы можете использовать его только для просмотра картинок, можете наполнить любой интересной и важной информацией (администраторский состав, правила форума, объявления....)
Внешний вид блока полностью настраивается с помощью CSS!
Последовательность действий по установке кодов
1. Управление кодами Javascript
Поместите первый код в
Расположение: В оглавлении
2. Управление кодами Javascript (второй код)
Создайте еще один javascript в
Расположение: В оглавлении
3. Размещение блока "аккордеон" в Приветствии на главной странице
Теперь создайте сам блок в
Обратите внимание: идентификаторы id="s1", id="s2" и т.д. нужны вам для размещения в слайдах картинок (эти картинки могут быть единственным содержанием слайда, а могут служить фоном для любого текста! ) Адреса нужных картинок задаются в CSS (см ниже).
Если вы не хотите использовать изображение в каком-либо из слайдов, используйте вариант кода, данный здесь для вкладки 4 и вкладки 5:
4. Настройка оформления блока с помощью CSS
Добавьте нужное оформление с помощью CSS в
Вместо http://url_image_1 , http://url_image_2, http://url_image3 подставьте адреса фоновых изображений для ваших слайдов. Они соответствуют кодам, размещенным в Приветствии на главной странице.
В нашем примере вот этой части кода, размещенного в Приветствии (см. пункт 3):
соответствует картинка, указанная в CSS:
Сегодня мы хотим предложить для ваших форумов красивое решение: блок с важной информацией и/или c картинками, раскладывающийся, как "аккордеон", состоящий из нескольких слайдов.
Как это будет выглядеть ?
Вы можете посмотреть, как будет работать такой блок, здесь : http://stitchui.com/liteaccordion/
Дальше дело уже за вами - вы можете использовать его только для просмотра картинок, можете наполнить любой интересной и важной информацией (администраторский состав, правила форума, объявления....)
Внешний вид блока полностью настраивается с помощью CSS!
Последовательность действий по установке кодов
1. Управление кодами Javascript
Поместите первый код в
Панель администратора Модули HTML & Javascript | Управление скриптами Javascript Cоздать новый javascript |
- Код:
/*************************************************
*
* project: liteAccordion - horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/horizontal-accordion-jquery-plugin
* demo: http://www.nicolahibbert.com/demo/liteAccordion
*
* Version: 1.1.3
* Copyright: (c) 2010-2011 Nicola Hibbert
*
/*************************************************/
(function($) {
$.fn.liteAccordion = function(options) {
// defaults
var defaults = {
containerWidth : 960,
containerHeight : 320,
headerWidth : 48,
firstSlide : 1,
onActivate : function() {},
slideSpeed : 800,
slideCallback : function() {},
autoPlay : false,
pauseOnHover : false,
cycleSpeed : 6000,
theme : 'basic', // basic, light*, dark, stitch*
rounded : false,
enumerateSlides : false
},
// merge defaults with options in new settings object
settings = $.extend({}, defaults, options),
// define key variables
$accordion = this,
$slides = $accordion.find('li'),
slideLen = $slides.length,
slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
$header = $slides.children('h2'),
// core utility and animation methods
utils = {
getGroup : function(pos, index) {
if (this.offsetLeft === pos.left) {
return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
} else if (this.offsetLeft === pos.right) {
return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) });
}
},
nextSlide : function(slideIndex) {
var slide = slideIndex + 1 || settings.firstSlide;
// get index of next slide
return function() {
return slide++ % slideLen;
}
},
play : function(slideIndex) {
var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
start = function() {
$header.eq(getNext()).click();
};
utils.playing = setInterval(start, settings.cycleSpeed);
},
pause : function() {
clearInterval(utils.playing);
},
playing : 0,
sentinel : false
};
// set container heights, widths, theme & corner style
$accordion
.height(settings.containerHeight)
.width(settings.containerWidth)
.addClass(settings.theme)
.addClass(settings.rounded && 'rounded');
// set tab width, height and selected class
$header
.width(settings.containerHeight)
.height(settings.headerWidth)
.eq(settings.firstSlide - 1).addClass('selected');
// ie :(
if ($.browser.msie) {
if ($.browser.version.substr(0,1) > 8) {
$header.css('filter', 'none');
} else if ($.browser.version.substr(0,1) < 7) {
return false;
}
}
// set initial positions for each slide
$header.each(function(index) {
var $this = $(this),
left = index * settings.headerWidth;
if (index >= settings.firstSlide) left += slideWidth;
$this
.css('left', left)
.next()
.width(slideWidth)
.css({ left : left, paddingLeft : settings.headerWidth });
// add number to bottom of tab
settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');
});
// bind event handler for activating slides
$header.click(function(e) {
var $this = $(this),
index = $header.index($this),
$next = $this.next(),
pos = {
left : index * settings.headerWidth,
right : index * settings.headerWidth + slideWidth,
newPos : 0
},
$group = utils.getGroup.call(this, pos, index);
// set animation direction
if (this.offsetLeft === pos.left) {
pos.newPos = slideWidth;
} else if (this.offsetLeft === pos.right) {
pos.newPos = -slideWidth;
}
// check if animation in progress
if (!$header.is(':animated')) {
// activate onclick callback with slide div as context
if (e.originalEvent) {
if (utils.sentinel === this) return false;
settings.onActivate.call($next);
utils.sentinel = this;
} else {
settings.onActivate.call($next);
utils.sentinel = false;
}
// remove, then add selected class
$header.removeClass('selected').filter($this).addClass('selected');
// get group of tabs & animate
$group
.animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
.next()
.animate({ left : '+=' + pos.newPos }, settings.slideSpeed);
}
});
// pause on hover
if (settings.pauseOnHover) {
$accordion.hover(function() {
utils.pause();
}, function() {
utils.play($header.index($header.filter('.selected')));
});
}
// start autoplay, call utils with no args = start from firstSlide
settings.autoPlay && utils.play();
return $accordion;
};
})(jQuery);
2. Управление кодами Javascript (второй код)
Создайте еще один javascript в
Панель администратора Модули HTML & Javascript | Управление скриптами Javascript Cоздать новый javascript |
- Код:
$(document).ready(function(){
$('#one').liteAccordion({
onActivate : function() {
this.find('figcaption').fadeOut();
},
slideCallback : function() {
this.find('figcaption').fadeIn();
},
autoPlay : true,
pauseOnHover : true,
theme : 'dark',
rounded : true,
enumerateSlides : true
}).find('figcaption:first').show();
});
3. Размещение блока "аккордеон" в Приветствии на главной странице
Теперь создайте сам блок в
Панель администратора Оформление Главная | Общая информация Приветствие на главной странице |
- Код:
<div id="one" class="accordion">
<ol>
<li>
<h2><span>Название вкладки 1</span></h2>
<div id="s1"></div>
</li>
<li>
<h2><span>Название вкладки 2</span></h2>
<div id="s2"></div>
</li>
<li>
<h2><span>Название вкладки 3</span></h2>
<div id="s3"></div>
</li>
<li>
<h2><span>Название вкладки 4</span></h2>
<div id="s4"></div>
</li>
<li>
<h2><span>Название вкладки 5</span></h2>
<div id="s4"></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
Обратите внимание: идентификаторы id="s1", id="s2" и т.д. нужны вам для размещения в слайдах картинок (эти картинки могут быть единственным содержанием слайда, а могут служить фоном для любого текста! ) Адреса нужных картинок задаются в CSS (см ниже).
Если вы не хотите использовать изображение в каком-либо из слайдов, используйте вариант кода, данный здесь для вкладки 4 и вкладки 5:
- Код:
<li>
<h2><span>Название вкладки 4</span></h2>
<div></div>
</li>
<li>
4. Настройка оформления блока с помощью CSS
Добавьте нужное оформление с помощью CSS в
Панель администратора Оформление Картинки и цвета | Цвета Каскадная таблица стилей CSS |
- Код:
.accordion {
text-align:left;
font:'Helvetica Neue', Verdana, Arial, sans-serif;
}
.accordion ol {
position: relative;
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
.accordion li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%\9; left: 10%; left: 5%\9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
.accordion noscript p { padding: 10px; margin: 0; background: white; }
/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }
/****************************************** Dark */
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #353535; color: white; }
.dark li > h2 b { background: #353535\9; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
.dark h2.selected b { background: #434343\9; }
.dark li > div { background: #030303; margin-left: 5px; }
/*************************************** Rounded */
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
/***************************************** Light */
/**************************************** Stitch */
#s1 {
background:url("http://url_image_1") no-repeat #030303;
}
#s2 {
background:url("http://url_image_2") no-repeat #030303;
}
#s3 {
background:url("http://url_image3") no-repeat #030303;
}
Вместо http://url_image_1 , http://url_image_2, http://url_image3 подставьте адреса фоновых изображений для ваших слайдов. Они соответствуют кодам, размещенным в Приветствии на главной странице.
В нашем примере вот этой части кода, размещенного в Приветствии (см. пункт 3):
<li>
<h2><span>Название вкладки 1</span></h2>
<div id="s1"></div>
</li>
соответствует картинка, указанная в CSS:
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Похожие темы
» "Аккордеон" из слайдов (с картинками и/или текстом) на главной странице
» Чат на главной странице
» Темы на главной странице
» видио на главной странице
» Кнопки на главной странице
» Чат на главной странице
» Темы на главной странице
» видио на главной странице
» Кнопки на главной странице
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения