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.

Slide show

3 posters

Go down

Slide show Empty Slide show

Post by TheShaka 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?

Slide show Trt10
slideshow: https://help.forumotion.com/t105962-index-in-accordion
TheShaka
TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Slide show Empty Re: Slide show

Post by Sir. Mayo 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
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

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

Back to top Go down

Slide show Empty Re: Slide show

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

TheShaka
TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Slide show Empty Re: Slide show

Post by Pizza Boi 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?

Slide show Trt10
slideshow: https://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
Pizza Boi
Hyperactive

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

Back to top Go down

Slide show Empty Re: Slide show

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

Hi now it look very ugly + here is black line
Slide show Hgh10
TheShaka
TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Slide show Empty Re: Slide show

Post by Pizza Boi 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
Pizza Boi
Hyperactive

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

Back to top Go down

Slide show Empty Re: Slide show

Post by Sir. Mayo 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
Slide show Trt10
slideshow: https://help.forumotion.com/t105962-index-in-accordion

My answers are in bold and in black
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

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

Back to top Go down

Slide show Empty Re: Slide show

Post by TheShaka 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
TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Slide show Empty Re: Slide show

Post by Sir. Mayo 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
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

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

Back to top Go down

Slide show Empty Re: Slide show

Post by TheShaka 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
TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Slide show Empty Re: Slide show

Post by Pizza Boi 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
Pizza Boi
Hyperactive

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

Back to top Go down

Slide show Empty Re: Slide show

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

Hey pizza the code not work  Sad
TheShaka
TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Slide show Empty Re: Slide show

Post by Pizza Boi 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
Pizza Boi
Hyperactive

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

Back to top Go down

Slide show Empty Re: Slide show

Post by TheShaka 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
TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Slide show Empty Re: Slide show

Post by Pizza Boi 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
Pizza Boi
Hyperactive

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

Back to top Go down

Slide show Empty Re: Slide show

Post by TheShaka 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
TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Slide show Empty Re: Slide show

Post by Pizza Boi 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
Pizza Boi
Hyperactive

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

Back to top Go down

Slide show Empty Re: Slide show

Post by TheShaka 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
TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Slide show Empty Re: Slide show

Post by Pizza Boi 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
Pizza Boi
Hyperactive

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

Back to top Go down

Slide show Empty Re: Slide show

Post by TheShaka 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
TheShaka
Forumember

Male Posts : 413
Reputation : 6
Language : polish

http://seiya.forumotion.com

Back to top Go down

Slide show Empty Re: Slide show

Post by Pizza Boi 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
Pizza Boi
Hyperactive

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

Back to top Go down

Back to top

- Similar topics

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