ForumsClub
Discover ForumsClub.com the new Forumotion community site for building advanced collaborative communities
Latest Tutorials
JavaScript is disabled, please enable it to take advantage of this widget.
Who is online?
In total there are
617 users online :: 3 Registered, 0 Hidden and 614 Guests
Draxion ,
poesia-verses ,
Winging Most users ever online was
7008 on August 11th 2011, 5:09 am
Before posting, please read the general rules
99 % of your questions have already an answer here. You don't need to wait...!
Be aware of informations about the forum maintenances and updates
Some Tips and Tricks to increase the possibilities of your forums...
Index in accordion !
March 13th 2012, 12:13 pm by Shadow
How to create an index in accordion
1.TUTORIAL:
How to create that kind of index :
Example : click Here
This tutorial is available for all the versions !
Attention : you have to follow this tutorial step by step !
2. First step : Create 2 javascript pages:
To create the 2 javascript pages :
Administration Panel Modules HTML & Javascript Javascript codes management
Click on "create a new javascript"
First page :
- Chose a title
- Chose the position : in the index
- Paste this code :
Code:
/*************************************************
*
* 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);
And save !
Second page :
- Chose the title
- Chose the position : in the index
- Paste this code :
Code: $(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();
});
And save !
By the way, remember to enable the javascript management
3. Enter the HTML code in the homepage of the forum :
Go to :
Administration Panel Display Homepage Generalities Homepage message
Paste this code :
Code: <div id="one" class="accordion">
<ol>
<li>
<h2><span>Slide One</span></h2>
<div id="s1"></div>
</li>
<li>
<h2><span>Slide Two</span></h2>
<div id="s2"></div>
</li>
<li>
<h2><span>Slide Three</span></h2>
<div id="s3"></div>
</li>
<li>
<h2><span>Slide Four</span></h2>
<div id="s4"></div>
</li>
<li>
<h2><span>Slide Five</span></h2>
<div id="s5"></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
And now you can change the slides and add as many div as you want ! You can also add HTML codes as you want (with links for example)
4. Add the CSS code :
Go to :
Administration Panel Display Pictures and colors Colors CSS Stylesheet
Paste this code :
Code: .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; 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; }
.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 de l'image.jpg") no-repeat #030303;
}
#s2 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s3 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s4 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s5 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}
You just have to put the URL of the images in each div :
Code: #s1 {
background:url("http://url de l'image.jpg")
}
You can add as many div as you want !
You can change the aspect of the slides by using the CSS
... And congratulations, you've made your own personnalized index !
Translated and updated by the Forumotion Staff
Tutorial created by : Celina - 14.02.12, from the Spanish Support Forum (based on this tutorial )
Copyright FORU MOTION .COM
Comments : 23