The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

SlideShow help

View previous topic View next topic Go down

Solved SlideShow help

Post by AM99 on August 22nd 2012, 11:49 am

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 August 23rd 2012, 6:41 pm; edited 3 times in total

AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses on August 22nd 2012, 12:38 pm

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.


runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 on August 22nd 2012, 1:00 pm

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.

AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by AM99 on August 23rd 2012, 2:04 pm

Bumb

AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses on August 23rd 2012, 2:09 pm

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:
http://help.forumotion.com/t105962-index-in-accordion

Example:
http://avrillavignetalkshow.forumotion.com/

runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 on August 23rd 2012, 2:46 pm

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

AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses on August 23rd 2012, 3:11 pm

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>

runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 on August 23rd 2012, 3:26 pm

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?

AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses on August 23rd 2012, 3:31 pm

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.

runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 on August 23rd 2012, 4:29 pm

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.

AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses on August 23rd 2012, 5:50 pm

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.

runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 on August 23rd 2012, 6:24 pm

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

AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

Solved Re: SlideShow help

Post by runawayhorses on August 23rd 2012, 6:28 pm

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

runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: SlideShow help

Post by AM99 on August 23rd 2012, 6:35 pm

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>

AM99
Forumember

Posts : 174
Reputation : 4
Language : english

Back to top Go down

View previous topic View next topic Back to top


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