You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Slide show code on Sun Feb 17, 2013 6:54 pm

Xflint


Member
Helo Admin can you help me with slide show just like the one in your forum?

Thanks

http://www.paradiseng.com

2 Re: Slide show code on Sun Feb 17, 2013 7:53 pm

runawayhorses


Owner
Hello,

First: Enable "Javascript code management" in AP>>Modules>> Javascript codes management>>

And put this in Javascript management by creating a new javascript and title it "accordion 1" and set it for "In the Home page".

Spoiler - Click here to view content:

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 : 690,
                containerHeight : 250,
                headerWidth : 48,
             
                firstSlide : 1,
                onActivate : function() {},
                slideSpeed : 800,
                slideCallback : function() {},     
             
                autoPlay : false,
                pauseOnHover : false,
                cycleSpeed : 6000,

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


Second: create another javascript and title it "accordion 2" and set it for "In the Home page".

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();
        });

Third: go to Display>>Colors>>CSS Stylesheet>>

And place this code at the bottom on the stylesheet and save your settings:


Code:
.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: 10px; margin: 0; background: white; }
 
/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }
 
/****************************************** Dark */
.dark { border: 9px solid #183843; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #35606A inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #35606A inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #35606A inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #35606A inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 12px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #091E25; color: white; }
.dark li > h2 b { background: #091E25; color: #030303; font-size: 0px; text-shadow: -1px 1px 0 #35606A; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #091E25), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #091E25 0%, #555555 100%); }
.dark h2.selected b { background: #434343; }
.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 */

Forth: Go to AP>>Display>>Generalities>>

And place this code in the "Homepage message":

Code:
<center><div id="one" class="accordion">
        <ol>
            <li>
                <h2><span>Welcome</span></h2>
                <div id="s01"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/welcome400x250.jpg" title="Welcome to Runaway Horses Forum!" /></div>
            </li>
            <li>
                <h2><span>Facebook</span></h2>
                <div id="s1"><a href="https://www.facebook.com/pages/Runaway-Horses-Forum/415081578502946?ref=tn_tnmn"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/fb400x250.jpg" title="Runaway Horses Forum on Facebook" border="0"/></a></div>
            </li>
            <li>
                <h2><span>Talk Show</span></h2>
                <div id="s5"><a href="http://avrillavignetalkshow.webs.com/"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/alts400x250-1.png" title="Avril Lavigne Talk Show" border="0"/></a></div>
            </li>
            <li>
                <h2><span>YouTube</span></h2>
                <div id="s2"><a href="http://www.youtube.com/user/avrillavignetalkshow"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/yt400x250.jpg" title="Avril Lavigne Talk Show on YouTube" border="0"/></a></div>
            </li>
            <li>
                <h2><span>Twitter</span></h2>
                <div id="s3"><a href="http://twitter.com/avriltalkshow"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/tw400x250.jpg" title="Avril Lavigne Talk Show on Twitter" border="0"/></a></div>
            </li>
            <li>
                <h2><span>Facebook-TS</span></h2>
                <div id="s4"><a href="https://www.facebook.com/AvrilLavigneTalkShow"><img src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/accordion/400x250/fbts400x250.jpg" title="Avril Lavigne Talk Show on Facebook" border="0"/></a></div>
            </li>               
        </ol>
        <noscript>
            <p>Please enable JavaScript to get the full experience.</p>
        </noscript>
    </div>
</center>
Now all you have to do is change the images and links in the forth code to your own images and links, and to change the colors use the third code in the CSS stylesheet, and to change the size of the accordion use the first code in javascript management.

That's it, good luck.

3 Re: Slide show code on Thu Feb 21, 2013 10:13 am

Xflint


Member
Sorry to worry you. The script messed up my forum.

http://www.paradiseng.com

4 Re: Slide show code on Thu Feb 21, 2013 10:30 am

runawayhorses


Owner
No worries, sorry to hear that.

5 Re: Slide show code on Thu Feb 21, 2013 2:50 pm

Xflint


Member
Check out my website with this link http://www.favouriteforum.com and see how the script messed the forum up. Maybe you can help me.

http://www.paradiseng.com

6 Re: Slide show code on Thu Feb 21, 2013 3:47 pm

runawayhorses


Owner
The forth code looks right, check to make sure you did the javascript right and make sure you have enabled javascript "turn it on" in javascript management. Also check the CSS and make sure its correct.



Last edited by runawayhorses on Thu Feb 21, 2013 7:01 pm; edited 1 time in total (Reason for editing : typo)

7 Re: Slide show code on Thu Feb 21, 2013 4:41 pm

BL@DE


Member
i see what u mean. looks bad. can u fix it ?

http://ws-clan.forumcanadien.org/

8 Re: Slide show code Today at 5:09 pm

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

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