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.

Adding slideshow

View previous topic View next topic Go down

Adding slideshow

Post by eccato on May 11th 2012, 7:42 pm

I saw a really cool slideshow thing in one of the forums and I wanted to add it to my forum.

Picture:
http://i49.tinypic.com/jhwjgw.jpg
Link of the forum (where I saw it):
http://www.jhebkv.com/forum

I would really like to know how to add it.

eccato
New Member

Posts : 24
Reputation : 0
Language : Estonian, English

http://wevax-volukool.forum.co.ee

Back to top Go down

Re: Adding slideshow

Post by Hellrose on May 12th 2012, 12:58 am

cool, i also want to know how. Smile

Hellrose
Forumember

Posts : 202
Reputation : 0
Language : English

Back to top Go down

Re: Adding slideshow

Post by nutsonlizards on May 12th 2012, 3:31 am

here the link to the slider it designed my nicola hibbert

http://nicolahibbert.com/liteaccordion-v2/

nutsonlizards
Forumember

Posts : 59
Reputation : 14
Language : London

http://www.redneckherpsforum.com/forum

Back to top Go down

Re: Adding slideshow

Post by ~@dikz~ on May 12th 2012, 2:26 pm

Can someone teach us how to put it on html page? Please. beu

~@dikz~
Forumember

Male Posts : 363
Reputation : 4
Language : English & Tagalog
Location : Legazpi, Philippines - Bicol University

http://adikz.forumtl.com

Back to top Go down

Re: Adding slideshow

Post by NikkoBryan14 on May 12th 2012, 2:56 pm

I know this one. Smile

NikkoBryan14
Forumember

Male Posts : 274
Reputation : 8
Language : English
Location : Philippines

Back to top Go down

Re: Adding slideshow

Post by nutsonlizards on May 12th 2012, 3:20 pm

this will get you started Smile i would try to learn basic html and css Smile

Code:

<!DOCTYPE HTML>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>liteAccordion - a horizontal accordion plugin for jQuery</title>
      <style>
         html { overflow-y: scroll }
         body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; width: 960px; margin: 30px auto 60px; background: #eee }
         h1, dd { margin: 0 }
         dt { font-weight: bold }
         figure { display: block; width: 100%; height: 100%; margin: 0 }
         figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: black; background: rgba(0,0,0,0.7); color: white;
            -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
         .options h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px }
         .options p { width: 48%; float: left; margin: 5px 0 }
         p.heading, p.reset, .output { width: 100%; float: left; clear: left }
         .output { position: relative }
         .output h2 a { content: ''; position: absolute; top: 30px; right: 0; font-size: 14px; font-weight: normal; color: #333; text-decoration: none }
         .output h2 a:hover { text-decoration: underline }
         label { display: inline-block; width: 160px }
         select { width: 160px; margin-right: 20px }
         input[type='text'] { width: 40px }
         textarea { width: 50%; height: 100px; font-family: monospace }
         section { height: 100%; width: 100%; background: white; overflow-y: scroll }


                      @charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.1
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.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 .slide > h2 {
   color: black;
    font-size: 16px;   
   font-weight: normal;
   margin: 0;
   z-index: 100;
   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;
   transform: translateX(-100%) rotate(-90deg);
   transform-origin: right top;
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Basic */
.basic .slide > h2 { background: #333; color: white; line-height: 225% }

/****************************************** Dark */
.dark {
    border: 9px solid #353535;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 -1px 0 #5b5b5b 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 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.dark .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.dark .slide > h2 span { background: #353535; color: white }
.dark .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.dark .slide > h2.selected span, .dark .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.dark .slide > h2.selected b {
    background: #383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
.dark .slide > div { background: #030303; margin-left: 5px }

/***************************************** Light */
.light {
    border: 9px solid white;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #a0a0a0;
    -webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);   
    -o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
   box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.light .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
.light .slide > h2 span {
    background: #fcfcfc;
    background: -moz-linear-gradient(left,  #fcfcfc 0%, #ededed 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
    background: -webkit-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: -o-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: -ms-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
    -webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    -moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    -o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
   box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    color: #909090;
}
.light .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
.light .slide > h2.selected span, .light .slide h2.selected span:hover, .light .slide > h2.selected b { background: #ffffff }
.light .slide > div { background: #a0a0a0; margin-left: 5px }

/**************************************** Stitch */
.stitch {
    position: relative;
    padding: 5px 0 5px 5px;
    border: 11px solid #353535;
    background: #353535;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b 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 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.stitch:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -9px;
    left: -9px;
    background: #353535;
    border-width: 9px;   
    -webkit-border-image: url('bg_stitch.png') 9 repeat;
    -moz-border-image: url('bg_stitch.png') 9 repeat;
    -o-border-image: url('bg_stitch.png') 9 repeat;
    border-image: url('bg_stitch.png') 9 repeat; 
}
.stitch .slide > h2 { background: #353535 }
.stitch .slide > h2 span {
    height: auto;
    padding-right: 5%;
    color: white;
    text-shadow: -1px 1px 0 #5b5b5b;
    border-width: 9px;
    background-image: url('bg_noise.png');
    margin-top: 0;
    -webkit-border-image: url('bg_stitch.png') 9 repeat;
    -moz-border-image: url('bg_stitch.png') 9 repeat;
    -o-border-image: url('bg_stitch.png') 9 repeat;
    border-image: url('bg_stitch.png') 9 repeat;
}
.stitch .slide > h2.selected:after {
    content: '';
    display: block;
    height: 11px;
    width: 11px;
    position: absolute;
    bottom: -3px;
    right: 38px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    border-width: 9px;
    border-top: 0;
    border-left: 0;
    -webkit-border-image: url('bg_stitch.png') 9 repeat;
    -moz-border-image: url('bg_stitch.png') 9 repeat;
    -o-border-image: url('bg_stitch.png') 9 repeat;
    border-image: url('bg_stitch.png') 9 repeat;
    background-image: url('bg_noise.png'); 
}

.stitch .slide:nth-child(1) > h2 span, .stitch .slide:nth-child(1) > h2:after { background-color: #c25252 }
.stitch .slide:nth-child(2) > h2 span, .stitch .slide:nth-child(2) > h2:after { background-color: #ca9859 }
.stitch .slide:nth-child(3) > h2 span, .stitch .slide:nth-child(3) > h2:after { background-color: #96ba5f }
.stitch .slide:nth-child(4) > h2 span, .stitch .slide:nth-child(4) > h2:after { background-color: #59abb7 }
.stitch .slide:nth-child(5) > h2 span, .stitch .slide:nth-child(5) > h2:after { background-color: #bb6098 }
.stitch .slide > h2 b { top: 19%; color: white; text-shadow: 1px 1px 0 #5b5b5b }
.stitch .slide > div { margin-right: 6px }
.stitch.rounded > ol { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0 }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.dark .slide > h2 b, .ie.light .slide > h2 b { top: 44% }
.ie9.dark .slide > h2.selected span, .ie9.dark .slide > h2.selected span:hover, .light .slide > h2 span { filter: none }
.ie9.stitch { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); }

.ie.stitch .slide > h2 { line-height: 265% }
.ie.stitch .slide > h2 span { height: 89%; padding-right: 8% }
.ie.stitch .slide > h2 b { top: 33% }
.ie.stitch .slide > h2.selected:after { display: none }
.ie.stitch .slide-0 > h2 span { background-color: #c25252 }
.ie.stitch .slide-1 > h2 span { background-color: #ca9859 }
.ie.stitch .slide-2 > h2 span { background-color: #96ba5f }
.ie.stitch .slide-3 > h2 span { background-color: #59abb7 }
.ie.stitch .slide-4 > h2 span { background-color: #bb6098 }
      </style>
      
         
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script src="http://nicolahibbert.com/demo/liteAccordion/js/jquery.easing.1.3.js"></script>
      <script src="http://nicolahibbert.com/demo/liteAccordion/js/liteaccordion.jquery.js"></script>       
      <!--[if lt IE 9]>
         <script>
            document.createElement('figure');
            document.createElement('figcaption');         
         </script>
      <![endif]-->
        <!--[if lt IE 8]>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
        <![endif]-->            
   </head>
   <body>
      
      <div id="demo">
          <ol>
            <li name="one">
                <h2><span>Slide One</span></h2>
                <div>
                  <figure>
                     <img src="img-demo/1.jpg" alt="image" />
                     <figcaption>Assassini!</figcaption>
                  </figure>
               </div>
            </li>
            <li name="two">
                <h2><span>Slide Two</span></h2>
                <div>
                  <figure>
                     <img src="img-demo/2.jpg" alt="image" />
                     <figcaption>Couldn't find an image of a Khajit thief! Fail!</figcaption>
                  </figure>
               </div>
            </li>
            <li name="three">
                <h2><span>Slide Three</span></h2>
                <div>
                  <figure>
                     <img src="img-demo/3.jpg" alt="image" />
                     <figcaption>That's one angry looking red dude.</figcaption>
                  </figure>
               </div>
            </li>
            <li name="four">
                <h2><span>Slide Four</span></h2>
                <div>
                  <figure>
                     <img src="img-demo/4.jpg" alt="image" />
                     <figcaption>Was fun for a couple of hours or so...</figcaption>
                  </figure>
               </div>
            </li>
            <li name="five">
                <h2><span>Slide Five</span></h2>
                <div>
                  <figure>
                     <img src="img-demo/5.jpg" alt="image" />
                     <figcaption>Not as good as Hot Pursuit.</figcaption>
                  </figure>
               </div>
            </li>
          </ol>
         <noscript>
            <p>Please enable JavaScript to get the full experience.</p>
         </noscript>
      </div>
      
      
            
   <script src="http://nicolahibbert.com/demo/liteAccordion/js/demosuite.js"></script>
         
            
   </body>
</html>



nutsonlizards
Forumember

Posts : 59
Reputation : 14
Language : London

http://www.redneckherpsforum.com/forum

Back to top Go down

Re: Adding slideshow

Post by ~@dikz~ on May 12th 2012, 3:25 pm

@nutsonlizards wrote:this will get you started Smile i would try to learn basic html and css Smile

Code:

<!DOCTYPE HTML>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>liteAccordion - a horizontal accordion plugin for jQuery</title>
      <style>
         html { overflow-y: scroll }
         body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; width: 960px; margin: 30px auto 60px; background: #eee }
         h1, dd { margin: 0 }
         dt { font-weight: bold }
         figure { display: block; width: 100%; height: 100%; margin: 0 }
         figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: black; background: rgba(0,0,0,0.7); color: white;
            -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
         .options h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px }
         .options p { width: 48%; float: left; margin: 5px 0 }
         p.heading, p.reset, .output { width: 100%; float: left; clear: left }
         .output { position: relative }
         .output h2 a { content: ''; position: absolute; top: 30px; right: 0; font-size: 14px; font-weight: normal; color: #333; text-decoration: none }
         .output h2 a:hover { text-decoration: underline }
         label { display: inline-block; width: 160px }
         select { width: 160px; margin-right: 20px }
         input[type='text'] { width: 40px }
         textarea { width: 50%; height: 100px; font-family: monospace }
         section { height: 100%; width: 100%; background: white; overflow-y: scroll }


                      @charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.1
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.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 .slide > h2 {
   color: black;
    font-size: 16px;   
   font-weight: normal;
   margin: 0;
   z-index: 100;
   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;
   transform: translateX(-100%) rotate(-90deg);
   transform-origin: right top;
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Basic */
.basic .slide > h2 { background: #333; color: white; line-height: 225% }

/****************************************** Dark */
.dark {
    border: 9px solid #353535;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 -1px 0 #5b5b5b 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 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.dark .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.dark .slide > h2 span { background: #353535; color: white }
.dark .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.dark .slide > h2.selected span, .dark .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.dark .slide > h2.selected b {
    background: #383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
.dark .slide > div { background: #030303; margin-left: 5px }

/***************************************** Light */
.light {
    border: 9px solid white;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #a0a0a0;
    -webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);   
    -o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
   box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.light .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
.light .slide > h2 span {
    background: #fcfcfc;
    background: -moz-linear-gradient(left,  #fcfcfc 0%, #ededed 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
    background: -webkit-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: -o-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: -ms-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
    -webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    -moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    -o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
   box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    color: #909090;
}
.light .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
.light .slide > h2.selected span, .light .slide h2.selected span:hover, .light .slide > h2.selected b { background: #ffffff }
.light .slide > div { background: #a0a0a0; margin-left: 5px }

/**************************************** Stitch */
.stitch {
    position: relative;
    padding: 5px 0 5px 5px;
    border: 11px solid #353535;
    background: #353535;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b 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 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.stitch:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -9px;
    left: -9px;
    background: #353535;
    border-width: 9px;   
    -webkit-border-image: url('bg_stitch.png') 9 repeat;
    -moz-border-image: url('bg_stitch.png') 9 repeat;
    -o-border-image: url('bg_stitch.png') 9 repeat;
    border-image: url('bg_stitch.png') 9 repeat; 
}
.stitch .slide > h2 { background: #353535 }
.stitch .slide > h2 span {
    height: auto;
    padding-right: 5%;
    color: white;
    text-shadow: -1px 1px 0 #5b5b5b;
    border-width: 9px;
    background-image: url('bg_noise.png');
    margin-top: 0;
    -webkit-border-image: url('bg_stitch.png') 9 repeat;
    -moz-border-image: url('bg_stitch.png') 9 repeat;
    -o-border-image: url('bg_stitch.png') 9 repeat;
    border-image: url('bg_stitch.png') 9 repeat;
}
.stitch .slide > h2.selected:after {
    content: '';
    display: block;
    height: 11px;
    width: 11px;
    position: absolute;
    bottom: -3px;
    right: 38px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    border-width: 9px;
    border-top: 0;
    border-left: 0;
    -webkit-border-image: url('bg_stitch.png') 9 repeat;
    -moz-border-image: url('bg_stitch.png') 9 repeat;
    -o-border-image: url('bg_stitch.png') 9 repeat;
    border-image: url('bg_stitch.png') 9 repeat;
    background-image: url('bg_noise.png'); 
}

.stitch .slide:nth-child(1) > h2 span, .stitch .slide:nth-child(1) > h2:after { background-color: #c25252 }
.stitch .slide:nth-child(2) > h2 span, .stitch .slide:nth-child(2) > h2:after { background-color: #ca9859 }
.stitch .slide:nth-child(3) > h2 span, .stitch .slide:nth-child(3) > h2:after { background-color: #96ba5f }
.stitch .slide:nth-child(4) > h2 span, .stitch .slide:nth-child(4) > h2:after { background-color: #59abb7 }
.stitch .slide:nth-child(5) > h2 span, .stitch .slide:nth-child(5) > h2:after { background-color: #bb6098 }
.stitch .slide > h2 b { top: 19%; color: white; text-shadow: 1px 1px 0 #5b5b5b }
.stitch .slide > div { margin-right: 6px }
.stitch.rounded > ol { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0 }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.dark .slide > h2 b, .ie.light .slide > h2 b { top: 44% }
.ie9.dark .slide > h2.selected span, .ie9.dark .slide > h2.selected span:hover, .light .slide > h2 span { filter: none }
.ie9.stitch { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); }

.ie.stitch .slide > h2 { line-height: 265% }
.ie.stitch .slide > h2 span { height: 89%; padding-right: 8% }
.ie.stitch .slide > h2 b { top: 33% }
.ie.stitch .slide > h2.selected:after { display: none }
.ie.stitch .slide-0 > h2 span { background-color: #c25252 }
.ie.stitch .slide-1 > h2 span { background-color: #ca9859 }
.ie.stitch .slide-2 > h2 span { background-color: #96ba5f }
.ie.stitch .slide-3 > h2 span { background-color: #59abb7 }
.ie.stitch .slide-4 > h2 span { background-color: #bb6098 }
      </style>
      
         
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script src="http://nicolahibbert.com/demo/liteAccordion/js/jquery.easing.1.3.js"></script>
      <script src="http://nicolahibbert.com/demo/liteAccordion/js/liteaccordion.jquery.js"></script>       
      <!--[if lt IE 9]>
         <script>
            document.createElement('figure');
            document.createElement('figcaption');         
         </script>
      <![endif]-->
        <!--[if lt IE 8]>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
        <![endif]-->            
   </head>
   <body>
      
      <div id="demo">
          <ol>
            <li name="one">
                <h2><span>Slide One</span></h2>
                <div>
                  <figure>
                     <img src="img-demo/1.jpg" alt="image" />
                     <figcaption>Assassini!</figcaption>
                  </figure>
               </div>
            </li>
            <li name="two">
                <h2><span>Slide Two</span></h2>
                <div>
                  <figure>
                     <img src="img-demo/2.jpg" alt="image" />
                     <figcaption>Couldn't find an image of a Khajit thief! Fail!</figcaption>
                  </figure>
               </div>
            </li>
            <li name="three">
                <h2><span>Slide Three</span></h2>
                <div>
                  <figure>
                     <img src="img-demo/3.jpg" alt="image" />
                     <figcaption>That's one angry looking red dude.</figcaption>
                  </figure>
               </div>
            </li>
            <li name="four">
                <h2><span>Slide Four</span></h2>
                <div>
                  <figure>
                     <img src="img-demo/4.jpg" alt="image" />
                     <figcaption>Was fun for a couple of hours or so...</figcaption>
                  </figure>
               </div>
            </li>
            <li name="five">
                <h2><span>Slide Five</span></h2>
                <div>
                  <figure>
                     <img src="img-demo/5.jpg" alt="image" />
                     <figcaption>Not as good as Hot Pursuit.</figcaption>
                  </figure>
               </div>
            </li>
          </ol>
         <noscript>
            <p>Please enable JavaScript to get the full experience.</p>
         </noscript>
      </div>
      
      
            
   <script src="http://nicolahibbert.com/demo/liteAccordion/js/demosuite.js"></script>
         
            
   </body>
</html>





Well, you are a good learner thank's a lot. Keep it up. salut

~@dikz~
Forumember

Male Posts : 363
Reputation : 4
Language : English & Tagalog
Location : Legazpi, Philippines - Bicol University

http://adikz.forumtl.com

Back to top Go down

Re: Adding slideshow

Post by nutsonlizards on May 12th 2012, 3:33 pm

well i could spend hours going thought it but this way you can teach your self there loads of sites on the net that will help you and it was just easier lol its not completely set up so there still work to be done also i would host the scripts on your forum Smile


when you host the scripts you will notice you can change the settings the theme etc..
here the part to look out for Smile
Code:

 var LiteAccordion = function(elem, options) {
       
        var defaults = {
            containerWidth : 960,                  // fixed (px)
            containerHeight : 320,                  // fixed (px)
            headerWidth: 48,                        // fixed (px)
                                                   
            activateOn : 'click',                  // click or mouseover
            firstSlide : 1,                        // displays slide (n) on page load
            slideSpeed : 800,                      // slide animation speed
            onTriggerSlide : function() {},        // callback on slide activate
            onSlideAnimComplete : function() {},    // callback on slide anim complete

            autoPlay : false,                      // automatically cycle through slides
            pauseOnHover : false,                  // pause on hover
            cycleSpeed : 6000,                      // time between slide cycles
            easing : 'swing',                      // custom easing function
                                                   
            theme : 'basic',                        // basic, dark, light, or stitch
            rounded : false,                        // square or rounded corners
            enumerateSlides : false,                // put numbers on slides
            linkable : false                        // link slides via hash
        },


here part of the script which been edited Smile

Code:

;(function($) {
   
    var LiteAccordion = function(elem, options) {
       
        var defaults = {
            containerWidth : 960,                  // fixed (px)
            containerHeight : 320,                  // fixed (px)
            headerWidth: 48,                        // fixed (px)
                                                   
            activateOn : 'mouseover',                  // click or mouseover
            firstSlide : 1,                        // displays slide (n) on page load
            slideSpeed : 800,                      // slide animation speed
            onTriggerSlide : function() {},        // callback on slide activate
            onSlideAnimComplete : function() {},    // callback on slide anim complete

            autoPlay : true,                      // automatically cycle through slides
            pauseOnHover : false,                  // pause on hover
            cycleSpeed : 6000,                      // time between slide cycles
            easing : 'swing',                      // custom easing function
                                                   
            theme : 'light',                        // basic, dark, light, or stitch
            rounded : false,                        // square or rounded corners
            enumerateSlides : false,                // put numbers on slides
            linkable : false                        // link slides via hash
        },





Last edited by nutsonlizards on May 12th 2012, 6:23 pm; edited 1 time in total (Reason for editing : added more info)

nutsonlizards
Forumember

Posts : 59
Reputation : 14
Language : London

http://www.redneckherpsforum.com/forum

Back to top Go down

Re: Adding slideshow

Post by mmägi on May 12th 2012, 8:18 pm

hello can u tell me how u made the place down there where can see whos online and stuff to center please

mmägi
Forumember

Male Posts : 402
Reputation : 3
Language : Estonia

http://royal.forumc.net/

Back to top Go down

Re: Adding slideshow

Post by PorkyPine V10 on May 12th 2012, 9:11 pm

@nutsonlizards wrote:well i could spend hours going thought it but this way you can teach your self there loads of sites on the net that will help you and it was just easier lol its not completely set up so there still work to be done also i would host the scripts on your forum Smile


when you host the scripts you will notice you can change the settings the theme etc..
here the part to look out for Smile
Code:

 var LiteAccordion = function(elem, options) {
       
        var defaults = {
            containerWidth : 960,                  // fixed (px)
            containerHeight : 320,                  // fixed (px)
            headerWidth: 48,                        // fixed (px)
                                                   
            activateOn : 'click',                  // click or mouseover
            firstSlide : 1,                        // displays slide (n) on page load
            slideSpeed : 800,                      // slide animation speed
            onTriggerSlide : function() {},        // callback on slide activate
            onSlideAnimComplete : function() {},    // callback on slide anim complete

            autoPlay : false,                      // automatically cycle through slides
            pauseOnHover : false,                  // pause on hover
            cycleSpeed : 6000,                      // time between slide cycles
            easing : 'swing',                      // custom easing function
                                                   
            theme : 'basic',                        // basic, dark, light, or stitch
            rounded : false,                        // square or rounded corners
            enumerateSlides : false,                // put numbers on slides
            linkable : false                        // link slides via hash
        },


here part of the script which been edited Smile

Code:

;(function($) {
   
    var LiteAccordion = function(elem, options) {
       
        var defaults = {
            containerWidth : 960,                  // fixed (px)
            containerHeight : 320,                  // fixed (px)
            headerWidth: 48,                        // fixed (px)
                                                   
            activateOn : 'mouseover',                  // click or mouseover
            firstSlide : 1,                        // displays slide (n) on page load
            slideSpeed : 800,                      // slide animation speed
            onTriggerSlide : function() {},        // callback on slide activate
            onSlideAnimComplete : function() {},    // callback on slide anim complete

            autoPlay : true,                      // automatically cycle through slides
            pauseOnHover : false,                  // pause on hover
            cycleSpeed : 6000,                      // time between slide cycles
            easing : 'swing',                      // custom easing function
                                                   
            theme : 'light',                        // basic, dark, light, or stitch
            rounded : false,                        // square or rounded corners
            enumerateSlides : false,                // put numbers on slides
            linkable : false                        // link slides via hash
        },




and where would this go under?

PorkyPine V10
Forumember

Male Posts : 387
Reputation : 19
Language : English, Spanish, French, Japanese

http://gfx-creators.forumotion.com/

Back to top Go down

Re: Adding slideshow

Post by nutsonlizards on May 13th 2012, 2:05 am





they are just part of the script so you no what script to look at to do the changes ie theme as so on


here's the full script Smile

Code:

/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/

;(function($) {
   
    var LiteAccordion = function(elem, options) {
       
        var defaults = {
            containerWidth : 960,                  // fixed (px)
            containerHeight : 320,                  // fixed (px)
            headerWidth: 48,                        // fixed (px)
                                                   
            activateOn : 'click',                  // click or mouseover
            firstSlide : 1,                        // displays slide (n) on page load
            slideSpeed : 800,                      // slide animation speed
            onTriggerSlide : function() {},        // callback on slide activate
            onSlideAnimComplete : function() {},    // callback on slide anim complete

            autoPlay : false,                      // automatically cycle through slides
            pauseOnHover : false,                  // pause on hover
            cycleSpeed : 6000,                      // time between slide cycles
            easing : 'swing',                      // custom easing function
                                                   
            theme : 'basic',                        // basic, dark, light, or stitch
            rounded : false,                        // square or rounded corners
            enumerateSlides : false,                // put numbers on slides
            linkable : false                        // link slides via hash
        },

        // merge defaults with options in new settings object 
            settings = $.extend({}, defaults, options),
       
        // 'globals'
            slides = elem.children('ol').children('li'),
            header = slides.children(':first-child'),
            slideLen = slides.length,
            slideWidth = settings.containerWidth - slideLen * settings.headerWidth,

        // public methods   
            methods = {
                   
                // start elem animation
                play : function(index) {
                    var next = core.nextSlide(index && index);

                    if (core.playing) return;

                    // start autoplay
                    core.playing = setInterval(function() {
                        header.eq(next()).trigger('click.liteAccordion');
                    }, settings.cycleSpeed);
                },
           
                // stop elem animation
                stop : function() {
                    clearInterval(core.playing);
                    core.playing = 0;
                },

                // trigger next slide
                next : function() {
                    methods.stop();

                    header.eq(core.currentSlide === slideLen - 1 ? 0 : core.currentSlide + 1).trigger('click.liteAccordion');
                },

                // trigger previous slide
                prev : function() {
                    methods.stop();
                    header.eq(core.currentSlide - 1).trigger('click.liteAccordion'); 
                },
               
                // destroy plugin instance
                destroy : function() {                   
                    // stop autoplay
                    methods.stop();

                    // remove hashchange event bound to window
                    $(window).unbind('.liteAccordion');

                    // remove generated styles, classes, data, events
                    elem
                        .attr('style', '')
                        .removeClass('accordion basic dark light stitch')
                        .removeData('liteAccordion')
                        .unbind('.liteAccordion')
                        .find('li > :first-child')
                        .unbind('.liteAccordion')
                        .filter('.selected')
                        .removeClass('selected')
                        .end()
                        .find('b')
                        .remove();
                       
                    slides
                        .removeClass('slide')
                        .children()
                        .attr('style', '');
                },

                // poke around the internals (NOT CHAINABLE)
                debug : function() {
                    return {
                        elem : elem,
                        defaults : defaults,
                        settings : settings,
                        methods : methods,
                        core : core
                    };
                }     
            },

        // core utility and animation methods
            core = {
       
                // set style properties
                setStyles : function() {                   
                    // set container heights, widths, theme & corner style
                    elem
                        .width(settings.containerWidth)
                        .height(settings.containerHeight)
                        .addClass('accordion')
                        .addClass(settings.rounded && 'rounded')                 
                        .addClass(settings.theme);
                       
                    // set tab width, height and selected class
                    slides
                        .addClass('slide')
                        .children(':first-child')
                        .width(settings.containerHeight)
                        .height(settings.headerWidth)
                        .eq(settings.firstSlide - 1)
                        .addClass('selected');

                    // set initial positions for each slide           
                    header.each(function(index) {
                        var $this = $(this),
                            left = index * settings.headerWidth,
                            margin = header.first().next(),
                            offset = parseInt(margin.css('marginLeft'), 10) || parseInt(margin.css('marginRight'), 10) || 0;
                           
                        if (index >= settings.firstSlide) left += slideWidth;

                        $this
                            .css('left', left)
                            .next()
                                .width(slideWidth - offset)
                                .css({ left : left, paddingLeft : settings.headerWidth });

                        // add number to bottom of tab
                        settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');

                    });
                },

                // bind click and mouseover events
                bindEvents : function() {                                       
                    if (settings.activateOn === 'click') {
                        header.bind('click.liteAccordion', core.triggerSlide);
                    } else if (settings.activateOn === 'mouseover') {
                        header.bind({
                            'mouseover.liteAccordion' : core.triggerSlide,
                            'click.liteAccordion' : core.triggerSlide                         
                        });
                    }
                   
                    // pause on hover (can't use custom events with $.hover())     
                    if (settings.pauseOnHover && settings.autoPlay) {
                        elem.bind('mouseover.liteAccordion', function() {
                            core.playing && methods.stop();
                        }).bind('mouseout.liteAccordion', function() {
                            !core.playing && methods.play(core.currentSlide);
                        });
                    }
                },
               
                linkable : function() {
                    var cacheSlideNames = (function() {
                        var slideNames = [];

                        slides.each(function() {
                            if ($(this).attr('name')) slideNames.push(($(this).attr('name')).toLowerCase());
                        });

                        // memoize
                        return cacheSlideNames = slideNames;                       
                    })();
                   
                    var triggerHash = function(e) {
                        var index;
                       
                        if (e.type === 'load' && !window.location.hash) return;
                        if (e.type === 'hashchange' && core.playing) return;
                       
                        index = $.inArray((window.location.hash.slice(1)).toLowerCase(), cacheSlideNames);
                        if (index > -1 && index < cacheSlideNames.length) header.eq(index).trigger('click.liteAccordion');
                    };

                    $(window).bind({
                        'hashchange.liteAccordion' : triggerHash,
                        'load.liteAccordion' : triggerHash
                    });
                },
               
                // counter for autoPlay (zero index firstSlide on init)
                currentSlide : settings.firstSlide - 1,           

                // next slide index
                nextSlide : function(index) {
                    var next = index + 1 || core.currentSlide + 1;

                    // closure
                    return function() {
                        return next++ % slideLen;
                    };
                }, 
   
                // holds interval counter
                playing : 0,
               
                // animates left and right groups of slides
                // side: denotes left side
                animSlideGroup : function(index, next, side) {
                    var filterExpr = side ? ':lt(' + (index + 1) + ')' : ':gt(' + index + ')';

                    slides
                        .filter(filterExpr)
                        .each(function() {
                            var $this = $(this),
                                slideIndex = slides.index($this);
                               
                            $this
                                .children()
                                .stop(true)
                                .animate({
                                    left : (side ? 0 : slideWidth) + slideIndex * settings.headerWidth
                                },
                                    settings.slideSpeed,
                                    settings.easing,
                                    function() {
                                        // flag ensures that fn is only called one time per triggerSlide
                                        if (!core.slideAnimCompleteFlag) {
                                            settings.onSlideAnimComplete.call(next);
                                            core.slideAnimCompleteFlag = true;
                                        }
                                    });                                   
                        });
                },
               
                slideAnimCompleteFlag : false,
               
                // trigger slide animation
                triggerSlide : function(e) {
                    var $this = $(this),
                        index = header.index($this),
                        next = $this.next();
                                                                                     
                    // update core.currentSlide
                    core.currentSlide = index;
                   
                    // reset onSlideAnimComplete callback flag
                    core.slideAnimCompleteFlag = false;

                    // remove, then add selected class
                    header.removeClass('selected').filter($this).addClass('selected');             
               
                    // reset current slide index in core.nextSlide closure
                    if (e.originalEvent && settings.autoPlay) {
                        methods.stop();
                        methods.play(index);
                    }
                   
                    // set location.hash
                    if (settings.linkable && !core.playing) window.location.hash = $this.parent().attr('name');

                    // trigger callback in context of sibling div
                    settings.onTriggerSlide.call(next);

                    // animate left & right groups
                    core.animSlideGroup(index, next, true);
                    core.animSlideGroup(index, next);
                },
               
                ieClass : function() {
                    var version = +($.browser.version).charAt(0);

                    if (version < 7) methods.destroy();
                    if (version === 7 || version === 8) {
                        slides.each(function(index) {
                            $(this).addClass('slide-' + index);
                        });
                    }

                    elem.addClass('ie ie' + version);
                },
               
                init : function() {
                    // test for ie
                    if ($.browser.msie) core.ieClass();             

                    // init styles and events
                    core.setStyles();
                    core.bindEvents();

                    // check slide speed is not faster than cycle speed
                    if (settings.cycleSpeed < settings.slideSpeed) settings.cycleSpeed = settings.slideSpeed;

                    // init hash links
                    if (settings.linkable && 'onhashchange' in window) core.linkable();

                    // init autoplay
                    settings.autoPlay && methods.play();
                }
            };

        // init plugin
        core.init();

        // expose methods
        return methods;
     
    };

    $.fn.liteAccordion = function(method) {
        var elem = this,
            instance = elem.data('liteAccordion');

        // if creating a new instance
        if (typeof method === 'object' || !method) {
            return elem.each(function() {
                var liteAccordion;
   
                // if plugin already instantiated, return
                if (instance) return;

                // otherwise create a new instance
                liteAccordion = new LiteAccordion(elem, method);
                elem.data('liteAccordion', liteAccordion);
            });

        // otherwise, call method on current instance
        } else if (typeof method === 'string' && instance[method]) {
            // debug method isn't chainable b/c we need the debug object to be returned
            if (method === 'debug') {
                return instance[method].call(elem);
            } else { // the rest of the methods are chainable though
                instance[method].call(elem);
                return elem;               
            }
        }
    };

})(jQuery);



Last edited by nutsonlizards on May 13th 2012, 2:08 am; edited 1 time in total

nutsonlizards
Forumember

Posts : 59
Reputation : 14
Language : London

http://www.redneckherpsforum.com/forum

Back to top Go down

Re: Adding slideshow

Post by aditijain on May 13th 2012, 5:32 am

thanks for that!!!!!

aditijain
New Member

Posts : 20
Reputation : 1
Language : english

Back to top Go down

Re: Adding slideshow

Post by ~@dikz~ on May 15th 2012, 10:54 am

help. when i put in on the homepage message, it affects my theme, the background image, could not be seen.


~@dikz~
Forumember

Male Posts : 363
Reputation : 4
Language : English & Tagalog
Location : Legazpi, Philippines - Bicol University

http://adikz.forumtl.com

Back to top Go down

Re: Adding slideshow

Post by nutsonlizards on May 15th 2012, 1:32 pm

well at a guess you put the css in your forum speed sheet ? the example was for a html page Smile so you would need to remove some of the css or there is a easier way by simple setting it up on a html page and adding it to you homepage via iframe code


Code:

<div id:"slider" align=center style="margin: 0 auto"><iframe src="link of -slider goes here " width="970" height="350"frameborder="0"></iframe></div>




i put the iframe in a div for two reason's to center it and also so you can give a id to add css if need Smile

i would remove this part of the css in my example because its not really need

Code:

 html { overflow-y: scroll }
        body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; width: 960px; margin: 30px auto 60px; background: #eee }




nutsonlizards
Forumember

Posts : 59
Reputation : 14
Language : London

http://www.redneckherpsforum.com/forum

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