SlideShow help Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

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.
2 posters

    SlideShow help

    avatar
    AM99
    Forumember


    Posts : 174
    Reputation : 4
    Language : english

    Solved SlideShow help

    Post by AM99 Wed 22 Aug 2012 - 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 2012 - 18:41; edited 3 times in total
    avatar
    runawayhorses
    Hyperactive


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

    Solved Re: SlideShow help

    Post by runawayhorses Wed 22 Aug 2012 - 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
    AM99
    Forumember


    Posts : 174
    Reputation : 4
    Language : english

    Solved Re: SlideShow help

    Post by AM99 Wed 22 Aug 2012 - 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

    Solved Re: SlideShow help

    Post by AM99 Thu 23 Aug 2012 - 14:04

    Bumb
    avatar
    runawayhorses
    Hyperactive


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

    Solved Re: SlideShow help

    Post by runawayhorses Thu 23 Aug 2012 - 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
    AM99
    Forumember


    Posts : 174
    Reputation : 4
    Language : english

    Solved Re: SlideShow help

    Post by AM99 Thu 23 Aug 2012 - 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
    runawayhorses
    Hyperactive


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

    Solved Re: SlideShow help

    Post by runawayhorses Thu 23 Aug 2012 - 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
    AM99
    Forumember


    Posts : 174
    Reputation : 4
    Language : english

    Solved Re: SlideShow help

    Post by AM99 Thu 23 Aug 2012 - 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
    runawayhorses
    Hyperactive


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

    Solved Re: SlideShow help

    Post by runawayhorses Thu 23 Aug 2012 - 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
    AM99
    Forumember


    Posts : 174
    Reputation : 4
    Language : english

    Solved Re: SlideShow help

    Post by AM99 Thu 23 Aug 2012 - 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
    runawayhorses
    Hyperactive


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

    Solved Re: SlideShow help

    Post by runawayhorses Thu 23 Aug 2012 - 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
    AM99
    Forumember


    Posts : 174
    Reputation : 4
    Language : english

    Solved Re: SlideShow help

    Post by AM99 Thu 23 Aug 2012 - 18:24

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


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

    Solved Re: SlideShow help

    Post by runawayhorses Thu 23 Aug 2012 - 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
    AM99
    Forumember


    Posts : 174
    Reputation : 4
    Language : english

    Solved Re: SlideShow help

    Post by AM99 Thu 23 Aug 2012 - 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>