Slide show
3 posters
Page 1 of 1
Slide show
Hi i want remove the white background from slide show and make it transparent.
I want add rounded corners.
I want remove the slide number.
and where i can change the name Slide one, slide two etc..
and how i can add option when some one click on image from slide shpw sp it move him to forum thread?
slideshow: https://help.forumotion.com/t105962-index-in-accordion
I want add rounded corners.
I want remove the slide number.
and where i can change the name Slide one, slide two etc..
and how i can add option when some one click on image from slide shpw sp it move him to forum thread?
slideshow: https://help.forumotion.com/t105962-index-in-accordion
Re: Slide show
So a few questions
Forum type
can you paste the code on here please. Your code that way i can see if i can be of any help
also is this on your forum yet.
Forum type
can you paste the code on here please. Your code that way i can see if i can be of any help
also is this on your forum yet.
Re: Slide show
phpbb3, my test forum: http://seiya.forumpl.net/
all codes you can see here: https://help.forumotion.com/t105962-index-in-accordion
all codes you can see here: https://help.forumotion.com/t105962-index-in-accordion
Re: Slide show
Hi
To make the answers easier, I marked it red and bold .
Sorry if I cannot fully optimize this easily, but with my current browser, I can barely do anything myself. I'll try and sort this out once it goes back to normal.
Regards,
Pizza Boi
To make the answers easier, I marked it red and bold .
TheShaka wrote:Hi i want remove the white background from slide show and make it transparent.
The code below is the best I can do so far but I know it is not the desired result, I just tried adjusting it.
- Code:
.dark {
background: black !important;
border: 0px !important;
}
.dark li > h2 {
background: none !important;
}
I want add rounded corners.
I couldn't find the areas where I needed to add at least border-radius or anything of the sort since my browser keeps on messing up x_x but I do know that the selectors involved with it involves "s" such as "s1", "s2", and so on as well as the .dark code in it, try modifying it yourself.
I want remove the slide number.
Have not sorted this out yet.
and where i can change the name Slide one, slide two etc..
In the code given, there is "Slide One", "Slide Two", etc. please just remove those bit, like so:
- Code:
<div id="one" class="accordion">
<ol>
<li>
<h2><span></span></h2>
<div id="s1"></div>
</li>
<li>
<h2><span></span></h2>
<div id="s2"></div>
</li>
<li>
<h2><span></span></h2>
<div id="s3"></div>
</li>
<li>
<h2><span></span></h2>
<div id="s4"></div>
</li>
<li>
<h2><span></span></h2>
<div id="s5"></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
and how i can add option when some one click on image from slide shpw sp it move him to forum thread?
Why don't you try that instead of putting a background via css, try inputting the codes in things such as <div id="s4"></div> in the Homepage code provided above?
slideshow: https://help.forumotion.com/t105962-index-in-accordion
Sorry if I cannot fully optimize this easily, but with my current browser, I can barely do anything myself. I'll try and sort this out once it goes back to normal.
Regards,
Pizza Boi
Pizza Boi- Hyperactive
- Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!
Re: Slide show
Hi
Yes, as I said in my post, it is not the one you are looking for as I simply showed a possible solution. I'll work on this code later so please wait until then.
Regards,
Pizza Boi
Yes, as I said in my post, it is not the one you are looking for as I simply showed a possible solution. I'll work on this code later so please wait until then.
Regards,
Pizza Boi
Pizza Boi- Hyperactive
- Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!
Re: Slide show
TheShaka wrote:Hi i want remove the white background from slide show and make it transparent.
I want add rounded corners.
give this a try
- Code:
.rounded
{
border-radius:15px;
}
#s1 {
background: url('http://seiya.wanmei.com/resources/jpg/140319/10151395214834190.jpg') no-repeat scroll 0% 0% #030303;
border-radius: 15px;
}
I want remove the slide number.
try this
- Code:
.dark li > h2 b {
visibility: hidden;
}
and where i can change the name Slide one, slide two etc..
you can do this in the code i can do it if you give me the names
and how i can add option when some one click on image from slide shpw sp it move him to forum thread?
you would have to edit the code which i can do as long as you give me the links
slideshow: https://help.forumotion.com/t105962-index-in-accordion
My answers are in bold and in black
Re: Slide show
Hi it looks better now, but the corners are still not rounded.
but the border idk... is possible to make it transparent or smaller?
but the border idk... is possible to make it transparent or smaller?
Re: Slide show
Thanks ^^ and what about the image link i mean if someone click on the image he will be moved to forum thread
Re: Slide show
Hi
I stated it above. You can actually remove the images from the CSS instead and replace it in this portion:
Then, once you do add the images, you should have an <a href="" /> tag for them like this:
Regards,
Pizza Boi
I stated it above. You can actually remove the images from the CSS instead and replace it in this portion:
- Code:
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace]<div id="one" class="accordion">[/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <ol>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <li>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <h2><span></span></h2>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <div id="s1"></div>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] </li>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <li>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <h2><span></span></h2>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <div id="s2"></div>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] </li>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <li>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <h2><span></span></h2>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <div id="s3"></div>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] </li>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <li>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <h2><span></span></h2>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <div id="s4"></div>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] </li>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <li>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <h2><span></span></h2>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <div id="s5"></div>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] </li>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] </ol>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <noscript>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] <p>Please enable JavaScript to get the full experience.</p>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace] </noscript>[/font][/color][color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace][/font][/color]
[color=#000000][font=Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace]</div>
Then, once you do add the images, you should have an <a href="" /> tag for them like this:
- Code:
<a href="URL link"><img src="IMG Link" /></a>
Regards,
Pizza Boi
Pizza Boi- Hyperactive
- Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!
Re: Slide show
Hi
Oh my god, it copied the css again e.e"...
Remove the CSS e.e"
Just add the <a href=""> in the divs with the image:
Regards,
Pizza Boi
Oh my god, it copied the css again e.e"...
Remove the CSS e.e"
Just add the <a href=""> in the divs with the image:
- Code:
<div id="one" class="accordion">
<ol>
<li>
<h2><span></span></h2>
<div id="s1"></div>
</li>
<li>
<h2><span></span></h2>
<div id="s2"></div>
</li>
<li>
<h2><span></span></h2>
<div id="s3"></div>
</li>
<li>
<h2><span></span></h2>
<div id="s4"></div>
</li>
<li>
<h2><span></span></h2>
<div id="s5"></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
Regards,
Pizza Boi
Pizza Boi- Hyperactive
- Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!
Re: Slide show
ok man which code i use first one the secound or two?
and i delete the my code i replace something or what i am confused
and i delete the my code i replace something or what i am confused
Re: Slide show
Hi
This is an example:
Give me a few days and let me see if I can work on the full code itself unless Mayo beats me to it, lol. I just can't kick my bum to work on an accordion code at the moment at my best ><, sorry T.T.
Regards,
Pizza Boi
This is an example:
- Code:
<div id="one" class="accordion">
<ol>
<li>
<h2><span></span></h2>
<div id="s1"><a href="www.yugioh.com"><img src="Img link" /></a></div>
</li>
<li>
<h2><span></span></h2>
<div id="s2"><a href="www.yugioh.com"><img src="Img link" /></a></div>
</li>
<li>
<h2><span></span></h2>
<div id="s3"><a href="www.yugioh.com"><img src="Img link" /></a></div>
</li>
<li>
<h2><span></span></h2>
<div id="s4"><a href="www.yugioh.com"><img src="Img link" /></a></div>
</li>
<li>
<h2><span></span></h2>
<div id="s5"><a href="www.yugioh.com"><img src="Img link" /></a></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
Give me a few days and let me see if I can work on the full code itself unless Mayo beats me to it, lol. I just can't kick my bum to work on an accordion code at the moment at my best ><, sorry T.T.
Regards,
Pizza Boi
Pizza Boi- Hyperactive
- Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!
Re: Slide show
Umm still not work.
Okay i fix the body size, now i still need to know: How to change name of Slide One, two... and how to add link to image when someone click on it.
Okay i fix the body size, now i still need to know: How to change name of Slide One, two... and how to add link to image when someone click on it.
Re: Slide show
Hi
Can you please provide everything for the code? I'll work on it and then give you the final draft . The images, links, etc.
Regards,
Pizza Boi
Can you please provide everything for the code? I'll work on it and then give you the final draft . The images, links, etc.
Regards,
Pizza Boi
Pizza Boi- Hyperactive
- Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!
Re: Slide show
CSS:
Java1
Java2
- Code:
.mini_ava {
float: left;
}
.mini_ava img {
width: 50px;
height: 50px;
margin: 0 5px;
border-radius: 10px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.mini_ava img:hover
{
width: 60px;
height: 60px;
}
#search-box { display:none; }
a.button1, a.button2, button.button2, input.button1, input.button2 { background-size:auto 100%; }
#search_menu { box-shadow:0px 0px 6px #000;
background-image:url('http://i58.servimg.com/u/f58/18/31/01/87/bretu10.png');
background-repeat:no-repeat;
}
.module {
background-image: url('');
{ box-shadow:0px 0px 10px #F2F2F2; }
background-repeat: no-repeat;
background-position: top center;
border: 1px solid BLACK;}
body.chatbox {
background-image: none;
}
.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: 15px; margin: 0; background: white; }
/****************************************** Basic */
.basic li > h2 { background: #F0F0F0; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 14px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }
/****************************************** Dark */
.dark { border: 1px solid #F0F0F0; border-bottom-width: 1px; padding: 3px 3px 3px 0; background: #F0F0F0; -webkit-box-shadow: 0 -1px 0 #F0F0F0 inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #F0F0F0 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 #F0F0F0 inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #F0F0F0; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #030303; color: white; }
.dark li > h2 b {
visibility: hidden;
}
.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: #4343439; }
.dark li > div { background: #030303; margin-left: 5px; }
.dark li > h2 span { background: #030303; color: white; }
.dark li > h2 b { background: #030303; 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: #4343439; }
.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://seiya.wanmei.com/resources/jpg/140319/10151395214834190.jpg") no-repeat #030303;
}
#s2 {
background:url("http://seiya.wanmei.com/resources/jpg/140319/10151395214569346.jpg") no-repeat #030303;
}
#s3 {
background:url("http://seiya.wanmei.com/resources/jpg/140319/10151395214407244.jpg") no-repeat #030303;
}
#s4 {
background:url("http://seiya.wanmei.com/resources/jpg/140107/10151389091103986.jpg") no-repeat #030303;
}
#s5 {
background:url("http://seiya.wanmei.com/resources/jpg/140107/10151389091288646.jpg") no-repeat #030303;
}
.rounded
{
border-radius:5px;
}
#s1 {
background: url('http://seiya.wanmei.com/resources/jpg/140319/10151395214834190.jpg') no-repeat scroll 0% 0% #030303;
border-radius: 15px;
}
Java1
- 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();
});
Java2
- 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 : 990,
containerHeight : 320,
headerWidth : 48,
firstSlide : 1,
onActivate : function() {},
slideSpeed : 600,
slideCallback : function() {},
autoPlay : false,
pauseOnHover : false,
cycleSpeed : 4000,
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);
Re: Slide show
Hi
What about the links you wanted it link to? I'll see if I can do this.
Edit: Sorry, where's the one in the HTML part?
Regards,
Pizza Boi
What about the links you wanted it link to? I'll see if I can do this.
Edit: Sorry, where's the one in the HTML part?
Regards,
Pizza Boi
Pizza Boi- Hyperactive
- Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!
Re: Slide show
You can post even google.com i will change the link later and the image is just example.
Re: Slide show
TheShaka wrote:You can post even google.com i will change the link later and the image is just example.
Hi
Okay, please give me until Monday to finish this. Unless Mayo helps first, then okay. Thanks for your patience .
Regards,
Pizza Boi
Pizza Boi- Hyperactive
- Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum