The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

SlideShow help

2 posters

Go down

Solved SlideShow help

Post by AM99 Wed 22 Aug - 11:49

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?



Last edited by AM99 on Thu 23 Aug - 18:41; edited 3 times in total
avatar
AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses Wed 22 Aug - 12:38

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.

avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 Wed 22 Aug - 13:00

Yes i know Sad,
it also shows the wrong picture when you go over the button. can anyone help to solve what runaway said and what i want.
avatar
AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by AM99 Thu 23 Aug - 14:04

Bumb
avatar
AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses Thu 23 Aug - 14:09

This picture slider will change the pictures automatically and you can also click through them. And it doesn't make the page jump. Smile

Tutorial for Installation:
https://help.forumotion.com/t105962-index-in-accordion

Example:
http://avrillavignetalkshow.forumotion.com/
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 Thu 23 Aug - 14:46

How do i add more slides in it?

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
avatar
AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses Thu 23 Aug - 15:11

You also have to add more codes for the homepage welcome message.

the ones that look like this:

Code:
<h2><span>Slide Two</span></h2>
            <div id="s2"></div>
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 Thu 23 Aug - 15:26

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?
avatar
AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses Thu 23 Aug - 15:31

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:

Code:
no-repeat #030303;}


Yes you can make them clickable. I'll tell you how after you get this straightened out.
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 Thu 23 Aug - 16:29

ok, thats sorted Very Happy,
so how do i make them clickable?
also some logos are cut off at the start how do i fix that.
avatar
AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses Thu 23 Aug - 17:50

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:

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.
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 Thu 23 Aug - 18:24

Thank you so much Very Happy,
one last thing anyway to make it faster?
avatar
AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses Thu 23 Aug - 18:28

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.
Code:
 slideSpeed : 800,

you're welcome.. Smile
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 Thu 23 Aug - 18:35

one more problem Sad,
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>
avatar
AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum