Akardions no bildēm

Tēma: Akardions no bildēm Sestdiena Novembris 03, 2012 7:37 am

Izskatās šādi:

Дальше дело уже за вами - вы можете использовать его только для просмотра картинок, можете наполнить любой интересной и важной информацией (администраторский состав, правила форума, объявления....)
Внешний вид блока полностью настраивается с помощью CSS!

Последовательность действий по установке кодов

1. Управление кодами Javascript

Расположение: В оглавлении

Kods:: /*************************************************
*
* 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 в

Kods:: $(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. Размещение блока "аккордеон" в Приветствии на главной странице

Теперь создайте сам блок в

Панель администратора Оформление Главная | Общая информация Приветствие на главной странице

Kods:: <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></div>
</li>
<li>
<h2><span>Название вкладки 5</span></h2>
<div></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>

Обратите внимание: идентификаторы id="s1", id="s2" и т.д. нужны вам для размещения в слайдах картинок (эти картинки могут быть единственным содержанием слайда, а могут служить фоном для любого текста! ) Адреса нужных картинок задаются в CSS (см ниже).

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

Kods:: <li>
<h2><span>Название вкладки 4</span></h2>
<div></div>
</li>
<li>

4. Настройка оформления блока с помощью CSS

Добавьте нужное оформление с помощью CSS в

Панель администратора Оформление Картинки и цвета | Цвета Каскадная таблица стилей CSS

Kods:: .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):

Citēt :: <li>
<h2><span>Название вкладки 1</span></h2>
<div id="s1"></div>
</li>

соответствует картинка, указанная в CSS:

Citēt :: #s1 {
background:url("http://url_image_1") no-repeat #030303;
}

Viss lai veicas. (Jāpielāgo savai lapai)

» Akardions bildēm 2
» Rotējošs kubs no bildēm
» Flash slaiders bildem
» Slaideris jaunām filmām bildēm
» Smieklīgs skripts manipulācijas ar bildēm