Helo Admin can you help me with slide show just like the one in your forum?
Thanks
Thanks
Message [Page 1 of 1]
2 Re: Slide show code Sun Feb 17, 2013 7:53 pm
runawayhorses
Owner
Location : Florida
Registration date : 2008-04-18
Number of posts : 7811
Gender :
Job/hobbies : Computers, Music, Web designing
Quote : One tequila, two tequila, three tequila, floor.
Windows XP
Reputation : 844
Points : 9040
Registration date : 2008-04-18
Number of posts : 7811
Gender :
Job/hobbies : Computers, Music, Web designing
Quote : One tequila, two tequila, three tequila, floor.
Windows XPReputation : 844
Points : 9040
Hello,
First: Enable "Javascript code management" in AP>>Modules>> Javascript codes management>>
And put this in Javascript management by creating a new javascript and title it "accordion 1" and set it for "In the Home page".
That's it, good luck.
First: Enable "Javascript code management" in AP>>Modules>> Javascript codes management>>
And put this in Javascript management by creating a new javascript and title it "accordion 1" and set it for "In the Home page".
- Spoiler - Click here to view content:
- 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 : 690,
containerHeight : 250,
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);
Second: create another javascript and title it "accordion 2" and set it for "In the Home page".
- 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();
});
Third: go to Display>>Colors>>CSS Stylesheet>>
And place this code at the bottom on the stylesheet and save your settings:
- 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 #183843; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #35606A inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #35606A inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #35606A inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #35606A inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 12px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #091E25; color: white; }
.dark li > h2 b { background: #091E25; color: #030303; font-size: 0px; text-shadow: -1px 1px 0 #35606A; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #091E25), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #091E25 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 */
Forth: Go to AP>>Display>>Generalities>>
And place this code in the "Homepage message":
- Code:
<center><div id="one" class="accordion">
<ol>
<li>
<h2><span>Welcome</span></h2>
<div id="s01"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/welcome400x250.jpg" title="Welcome to Runaway Horses Forum!" /></div>
</li>
<li>
<h2><span>Facebook</span></h2>
<div id="s1"><a href="https://www.facebook.com/pages/Runaway-Horses-Forum/415081578502946?ref=tn_tnmn"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/fb400x250.jpg" title="Runaway Horses Forum on Facebook" border="0"/></a></div>
</li>
<li>
<h2><span>Talk Show</span></h2>
<div id="s5"><a href="http://avrillavignetalkshow.webs.com/"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/alts400x250-1.png" title="Avril Lavigne Talk Show" border="0"/></a></div>
</li>
<li>
<h2><span>YouTube</span></h2>
<div id="s2"><a href="http://www.youtube.com/user/avrillavignetalkshow"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/yt400x250.jpg" title="Avril Lavigne Talk Show on YouTube" border="0"/></a></div>
</li>
<li>
<h2><span>Twitter</span></h2>
<div id="s3"><a href="http://twitter.com/avriltalkshow"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/tw400x250.jpg" title="Avril Lavigne Talk Show on Twitter" border="0"/></a></div>
</li>
<li>
<h2><span>Facebook-TS</span></h2>
<div id="s4"><a href="https://www.facebook.com/AvrilLavigneTalkShow"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/fbts400x250.jpg" title="Avril Lavigne Talk Show on Facebook" border="0"/></a></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
</center>
That's it, good luck.
3 Re: Slide show code Thu Feb 21, 2013 10:13 am
Xflint
Member
Sorry to worry you. The script messed up my forum.
4 Re: Slide show code Thu Feb 21, 2013 10:30 am
runawayhorses
Owner
Location : Florida
Registration date : 2008-04-18
Number of posts : 7811
Gender :
Job/hobbies : Computers, Music, Web designing
Quote : One tequila, two tequila, three tequila, floor.
Windows XP
Reputation : 844
Points : 9040
Registration date : 2008-04-18
Number of posts : 7811
Gender :
Job/hobbies : Computers, Music, Web designing
Quote : One tequila, two tequila, three tequila, floor.
Windows XPReputation : 844
Points : 9040
No worries, sorry to hear that.
5 Re: Slide show code Thu Feb 21, 2013 2:50 pm
Xflint
Member
Check out my website with this link http://www.favouriteforum.com and see how the script messed the forum up. Maybe you can help me.
6 Re: Slide show code Thu Feb 21, 2013 3:47 pm
runawayhorses
Owner
Location : Florida
Registration date : 2008-04-18
Number of posts : 7811
Gender :
Job/hobbies : Computers, Music, Web designing
Quote : One tequila, two tequila, three tequila, floor.
Windows XP
Reputation : 844
Points : 9040
Registration date : 2008-04-18
Number of posts : 7811
Gender :
Job/hobbies : Computers, Music, Web designing
Quote : One tequila, two tequila, three tequila, floor.
Windows XPReputation : 844
Points : 9040
The forth code looks right, check to make sure you did the javascript right and make sure you have enabled javascript "turn it on" in javascript management. Also check the CSS and make sure its correct.
Last edited by runawayhorses on Thu Feb 21, 2013 7:01 pm; edited 1 time in total (Reason for editing : typo)
7 Re: Slide show code Thu Feb 21, 2013 4:41 pm
BL@DE
Member
Location : England
Registration date : 2012-11-25
Number of posts : 12
Gender :
Job/hobbies : life
Reputation : 8
Points : 18
Registration date : 2012-11-25
Number of posts : 12
Gender :
Job/hobbies : life
Reputation : 8
Points : 18
i see what u mean. looks bad. can u fix it ?
Message [Page 1 of 1]
Similar topics
Permissions in this forum:
You cannot reply to topics in this forum