SlideShow help
2 posters
Page 1 of 1
SlideShow help
I got the slider working on my test forum,
http://starwars-fans.forumotion.co.uk/
This is the slider i choose,
http://tiki.makingforum.com/t4-wow-slider-on-fm
How do i make it change the images automatically instead of clicking the next button?
http://starwars-fans.forumotion.co.uk/
This is the slider i choose,
http://tiki.makingforum.com/t4-wow-slider-on-fm
How do i make it change the images automatically instead of clicking the next button?
Last edited by AM99 on August 23rd 2012, 6:41 pm; edited 3 times in total
AM99- Forumember
- Posts : 174
Reputation : 4
Language : english
Re: SlideShow help
You have more problems than that, when you do click a button to view the next picture it reloads the page and you lose your place mark on the page. So the page jumps. It needs a script that simply changes the picture and has no affect on the page. But if you can get it to change the pics automatically that would be better, but still when you click to change a pic the page jumps.
Re: SlideShow help
Yes i know ,
it also shows the wrong picture when you go over the button. can anyone help to solve what runaway said and what i want.
it also shows the wrong picture when you go over the button. can anyone help to solve what runaway said and what i want.
AM99- Forumember
- Posts : 174
Reputation : 4
Language : english
Re: SlideShow help
This picture slider will change the pictures automatically and you can also click through them. And it doesn't make the page jump.
Tutorial for Installation:
https://help.forumotion.com/t105962-index-in-accordion
Example:
http://avrillavignetalkshow.forumotion.com/
Tutorial for Installation:
https://help.forumotion.com/t105962-index-in-accordion
Example:
http://avrillavignetalkshow.forumotion.com/
Re: SlideShow help
How do i add more slides in it?
I did that but they don't work
- Code:
#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;
}
#s6 {
background:url("http://url de l'image.jpg")
}
#s7 {
background:url("http://url de l'image.jpg")
}
#s8 {
background:url("http://url de l'image.jpg")
}
I did that but they don't work
AM99- Forumember
- Posts : 174
Reputation : 4
Language : english
Re: SlideShow help
You also have to add more codes for the homepage welcome message.
the ones that look like this:
the ones that look like this:
- Code:
<h2><span>Slide Two</span></h2>
<div id="s2"></div>
Re: SlideShow help
http://starwars-fans.forumotion.co.uk/
Look at slide 6,7,8 they don't look right
and is it anyway i can make them clickable?
Look at slide 6,7,8 they don't look right
and is it anyway i can make them clickable?
AM99- Forumember
- Posts : 174
Reputation : 4
Language : english
Re: SlideShow help
Thats because the background is transparent you didn't add this part at the end of the codes like the other ones. I would recommend you copy and paste the extra codes you need from the other ones, and just change the numbers. The part you left out is this:
Yes you can make them clickable. I'll tell you how after you get this straightened out.
- Code:
no-repeat #030303;}
Yes you can make them clickable. I'll tell you how after you get this straightened out.
Re: SlideShow help
ok, thats sorted ,
so how do i make them clickable?
also some logos are cut off at the start how do i fix that.
so how do i make them clickable?
also some logos are cut off at the start how do i fix that.
AM99- Forumember
- Posts : 174
Reputation : 4
Language : english
Re: SlideShow help
Ok, you're going to have to undo some of what you did to make them clickable links. But that was a good exercise for you because now you have a better understanding of what to do next. And you already have your pics uploaded.
Ok, first you need to delete the CSS part with the images, you'll be adding the images in the Homepage message now with the links, so you don't need them in the CSS stylesheet anymore.
Delete this part in your CSS stylesheet that has the images:
And add the images between the div's as a clickable images in the homepage message. You do this for each link and picture you have. Add the links and images where it says to in the code.
Like this example:
-----------
The reason some of your pics appear to be cutoff is because you need to add more space on the sides of the pics, or most likely you need to resize the accordion.
The Accordion size can be changed in the First page of Javascript you added, in this line of code here:
Change the 960 to whatever you want:
Edit: I just checked you accordion and you need to add more space on the left of your logo images. Add about 50 to 100px more space to the left side of you images. Its probably best to make the extra space transparent or black.
You are probably going to have to resize your pics or modify them as well as resize the accordion to get it perfect. You'll have to experiment.
Ok, first you need to delete the CSS part with the images, you'll be adding the images in the Homepage message now with the links, so you don't need them in the CSS stylesheet anymore.
Delete this part in your CSS stylesheet that has the images:
- Code:
#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;
}
And add the images between the div's as a clickable images in the homepage message. You do this for each link and picture you have. Add the links and images where it says to in the code.
Like this example:
- Code:
<div id="s1"><a href="YOUR LINK GOES HERE"><img src="YOUR IMAGE GOES HERE" /></a></div>
-----------
The reason some of your pics appear to be cutoff is because you need to add more space on the sides of the pics, or most likely you need to resize the accordion.
The Accordion size can be changed in the First page of Javascript you added, in this line of code here:
Change the 960 to whatever you want:
- Code:
containerWidth : 960,
Edit: I just checked you accordion and you need to add more space on the left of your logo images. Add about 50 to 100px more space to the left side of you images. Its probably best to make the extra space transparent or black.
You are probably going to have to resize your pics or modify them as well as resize the accordion to get it perfect. You'll have to experiment.
Re: SlideShow help
Thank you so much ,
one last thing anyway to make it faster?
one last thing anyway to make it faster?
AM99- Forumember
- Posts : 174
Reputation : 4
Language : english
Re: SlideShow help
Yes in the same javascript code to change the size you change this for speed. I believe that is all you need to do to adjust the speed. Mine is at 800.
Change the 800 up or down.
you're welcome..
Change the 800 up or down.
- Code:
slideSpeed : 800,
you're welcome..
Re: SlideShow help
one more problem ,
Its showing the same image for slide one and two,
thats my html, tell me what am doing wrong.
Its showing the same image for slide one and two,
thats my html, tell me what am doing wrong.
- Code:
<div id="one" class="accordion">
<ol>
<li>
<h2><span>Eagles United</span></h2>
<div id="s1"></div>
<div id="s1"><a href="http://haxball-galaxy.forumotion.cc/f25-eagles-united"><img src="http://img687.imageshack.us/img687/6417/eulogo.png" /></a></div>
</li>
<li>
<h2><span>Fatality</span></h2>
<div id="s2"></div>
<div id="s2"><a href="http://haxball-galaxy.forumotion.cc/f31-fatality"><img src="http://img842.imageshack.us/img842/5273/fatlogo.png" /></a></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>
AM99- Forumember
- Posts : 174
Reputation : 4
Language : english
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum