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.

Slide show

View previous topic View next topic Go down

Slide show

Post by TheShaka on March 19th 2014, 9:35 pm

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

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Re: Slide show

Post by Sir. Mayo on March 19th 2014, 9:57 pm

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.

Sir. Mayo
Forumember

Male Posts : 961
Reputation : 84
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Re: Slide show

Post by TheShaka on March 19th 2014, 10:03 pm


TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Re: Slide show

Post by Pizza Boi on March 20th 2014, 7:06 am

Hi Very Happy

To make the answers easier, I marked it red and bold Smile .

@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: http://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

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Slide show

Post by TheShaka on March 20th 2014, 12:01 pm

Hi now it look very ugly + here is black line

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Re: Slide show

Post by Pizza Boi on March 20th 2014, 2:46 pm

Hi Very Happy

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

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Slide show

Post by Sir. Mayo on March 20th 2014, 5:44 pm

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

My answers are in bold and in black

Sir. Mayo
Forumember

Male Posts : 961
Reputation : 84
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Re: Slide show

Post by TheShaka on March 20th 2014, 7:52 pm

Hi it looks better now, but the corners are still not rounded.
but the border idk... is possible to make it transparent or smaller?

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Re: Slide show

Post by Sir. Mayo on March 20th 2014, 9:27 pm

Humm ill look into it for you but yes the border should be able to be made smaller.

Sir. Mayo
Forumember

Male Posts : 961
Reputation : 84
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Re: Slide show

Post by TheShaka on March 20th 2014, 10:25 pm

Thanks ^^ and what about the image link i mean if someone click on the image he will be moved to forum thread

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Re: Slide show

Post by Pizza Boi on March 21st 2014, 2:07 am

Hi Very Happy

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

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Slide show

Post by TheShaka on March 21st 2014, 2:14 pm

Hey pizza the code not work Sad

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Re: Slide show

Post by Pizza Boi on March 21st 2014, 2:37 pm

Hi Very Happy

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

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Slide show

Post by TheShaka on March 21st 2014, 3:25 pm

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 What the fuck ?!?

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Re: Slide show

Post by Pizza Boi on March 21st 2014, 3:50 pm

Hi Very Happy

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

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Slide show

Post by TheShaka on March 21st 2014, 5:24 pm

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.

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Re: Slide show

Post by Pizza Boi on March 22nd 2014, 7:53 am

Hi Very Happy

Can you please provide everything for the code? I'll work on it and then give you the final draft Smile. The images, links, etc.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Slide show

Post by TheShaka on March 22nd 2014, 11:47 am

CSS:
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);

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Re: Slide show

Post by Pizza Boi on March 22nd 2014, 11:48 am

Hi Very Happy

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

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Slide show

Post by TheShaka on March 22nd 2014, 12:40 pm

You can post even google.com i will change the link later and the image is just example.

TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Re: Slide show

Post by Pizza Boi on March 22nd 2014, 12:46 pm

@TheShaka wrote:You can post even google.com i will change the link later and the image is just example.

Hi Very Happy

Okay, please give me until Monday to finish this. Unless Mayo helps first, then okay. Thanks for your patience :wouhou:.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

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