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.

code for slideshow like this

View previous topic View next topic Go down

Solved code for slideshow like this

Post by lovely King on August 1st 2013, 10:34 pm

Hello,
I saw this slideshow many time on forumotion forums
can i have the code?



I got this slideshow from: http://hellokitty.forumsmotion.com/

My forum link: http://topyouth.gamerzfun.com

Version:phpbb3


Last edited by lovely King on August 16th 2013, 4:19 pm; edited 1 time in total

lovely King
Forumember

Posts : 57
Reputation : 1
Language : Arabic
Location : Egypt

http://topyouth.gamerzfun.com

Back to top Go down

Solved Re: code for slideshow like this

Post by levy on August 2nd 2013, 12:18 am

Hello , go in Administration Panel -> Display -> Generalities -> ADD THAT :

Code:
  <div id="one" class="accordion">
            <ol>
                <li>
                    <h2><span>Slide One</span></h2>
                    <div id="s1"></div>
                </li>
                <li>
                    <h2><span>Slide Two</span></h2>
                    <div id="s2"></div>
                </li>
                <li>
                    <h2><span>Slide Three</span></h2>
                    <div id="s3"></div>
                </li>
                <li>
                    <h2><span>Slide Four</span></h2>
                    <div id="s4"></div>
                </li>
                <li>
                    <h2><span>Slide Five</span></h2>
                    <div id="s5"></div>
                </li>
            </ol>
            <noscript>
                <p>Please enable JavaScript to get the full experience.</p>
            </noscript>
        </div>

Ok , now , create 2 javascript mark in index ,put anything at name and at first :

add that :

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 : 960,
                    containerHeight : 320,
                    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);

And to second , add that :

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

Ok . now go in Administration Panel -> Display -> Colors -> CSS Stylesheet

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 #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); -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 li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
        .dark li > h2 span { background: #353535; color: white; }
        .dark li > h2 b { background: #3535359; 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://url de l'image.jpg") no-repeat #030303;
        }
        #s2 {
        background:url("http://url de l'image.jpg") no-repeat #030303;
        }
        #s3 {
        background:url("http://url de l'image.jpg") no-repeat #030303;
        }

        #s4 {
        background:url("http://url de l'image.jpg") no-repeat #030303;
        }

        #s5 {
        background:url("http://url de l'image.jpg") no-repeat #030303;
        }

You need only to replace http://url de l'image.jpg with your images url.

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: code for slideshow like this

Post by lovely King on August 2nd 2013, 2:33 am

thanks much :rose:

How can i manage the width and the hight of the pictures
how can i add links on the images
how can i delete the numbers 1,2,3,4,5
how can i increase the number of the pictures?

lovely King
Forumember

Posts : 57
Reputation : 1
Language : Arabic
Location : Egypt

http://topyouth.gamerzfun.com

Back to top Go down

Solved Re: code for slideshow like this

Post by lovely King on August 3rd 2013, 11:40 pm

any help??

lovely King
Forumember

Posts : 57
Reputation : 1
Language : Arabic
Location : Egypt

http://topyouth.gamerzfun.com

Back to top Go down

Solved Re: code for slideshow like this

Post by levy on August 3rd 2013, 11:54 pm

Please use the slider anywhere at forum to see how him work Neutral

levy
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

Solved Re: code for slideshow like this

Post by lovely King on August 4th 2013, 12:40 am

you can visit this forum
it is not my main forum I Just created it to test codes

http://testforum.forumegypt.net/

I reduced the height and the width of the container

lovely King
Forumember

Posts : 57
Reputation : 1
Language : Arabic
Location : Egypt

http://topyouth.gamerzfun.com

Back to top Go down

Solved Re: code for slideshow like this

Post by lovely King on August 7th 2013, 12:56 am

any help?

lovely King
Forumember

Posts : 57
Reputation : 1
Language : Arabic
Location : Egypt

http://topyouth.gamerzfun.com

Back to top Go down

Solved Re: code for slideshow like this

Post by runawayhorses on August 7th 2013, 1:16 am

You might want to take a look at this tutorial about how to add what you're adding an (Accordion) to your forum. It also explains how to add more pictures.

http://help.forumotion.com/t105962-index-in-accordion

You can change the size of the accordion in the javascript.

runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: code for slideshow like this

Post by lovely King on August 7th 2013, 3:24 pm

thanks but I still don't know
how to add links on the images and how to control the image size and don't know how to make the container centered.

lovely King
Forumember

Posts : 57
Reputation : 1
Language : Arabic
Location : Egypt

http://topyouth.gamerzfun.com

Back to top Go down

Solved Re: code for slideshow like this

Post by lovely King on August 15th 2013, 12:24 am

hey please help

lovely King
Forumember

Posts : 57
Reputation : 1
Language : Arabic
Location : Egypt

http://topyouth.gamerzfun.com

Back to top Go down

Solved Re: code for slideshow like this

Post by runawayhorses on August 15th 2013, 1:31 am

You can do all of that with this code here, its part of the same code you have in your CSS stylesheet. Remove this part from your CSS stylesheet and add it to your homepage message in generalities.


Remove this part for your css stylesheet:

Code:
#s1 {
  background:url("http://url de l'image.jpg") no-repeat #030303;
  }
  #s2 {
  background:url("http://url de l'image.jpg") no-repeat #030303;
  }
  #s3 {
  background:url("http://url de l'image.jpg") no-repeat #030303;
  }

  #s4 {
  background:url("http://url de l'image.jpg") no-repeat #030303;
  }

  #s5 {
  background:url("http://url de l'image.jpg") no-repeat #030303;
  }

Add this below to generalities replacing the code you have now in there. This will center the accordion, hold the links and the images.

AP>>Display>>Generalities:
Code:
<style>
h1 {text-align:center;}
</style>
 
<h1>
<div id="one" class="accordion">
  <ol>
  <li>
  <h2><span>Slide One</span></h2>
  <div id="s1"><a href="URL OF SITE GOES HERE"><img src="URL OF IMAGE GOES HERE" width="500" height=200"></a></div>
  </li>
  <li>
  <h2><span>Slide Two</span></h2>
  <div id="s2"><a href="URL OF SITE GOES HERE"><img src="URL OF IMAGE GOES HERE" width="500" height=200"></a></div>
  </li>
  <li>
  <h2><span>Slide Three</span></h2>
  <div id="s3"><a href="URL OF SITE GOES HERE"><img src="URL OF IMAGE GOES HERE" width="500" height=200"></a></div>
  </li>
  <li>
  <h2><span>Slide Four</span></h2>
  <div id="s4"><a href="URL OF SITE GOES HERE"><img src="URL OF IMAGE GOES HERE" width="500" height=200"></a></div>
  </li>
  <li>
  <h2><span>Slide Five</span></h2>
  <div id="s5"><a href="URL OF SITE GOES HERE"><img src="URL OF IMAGE GOES HERE" width="500" height=200"></a></div>
  </li>
  </ol>
  <noscript>
  <p>Please enable JavaScript to get the full experience.</p>
  </noscript>
  </div></h1>
You add your links to your images and the links to the sites you want the visitors to go to when they click the images to the code above. You add the sizes of the images width and height in the code as well. Right now it is set at width="500" and Height="200", change those numbers to your picture sizes.

I highly recommend you use an image editor to resize your pictures to the sizes you want, and make them all the same size, then upload them and add the urls to the code and the sizes in pixels in each. However if you don't know how to resize them it will still work by adding the size numbers/pixels in the codes. The codes will force the size, but its much better if that doesn't happen and the pictures are naturally the same size as the coding is, they will load faster if they are.

Good luck. Smile

runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: code for slideshow like this

Post by lovely King on August 15th 2013, 8:43 pm

thanks:rose: all worked but the accordion can't be centered

Image of the problem


lovely King
Forumember

Posts : 57
Reputation : 1
Language : Arabic
Location : Egypt

http://topyouth.gamerzfun.com

Back to top Go down

Solved Re: code for slideshow like this

Post by runawayhorses on August 15th 2013, 9:30 pm

Try adding this at the beginning of the code in generalities:
Code:
<center>

Add this at the end of the code in generalities:
Code:
</center>
So the whole this looks like this:

Code:
<center>
<div id="one" class="accordion">
  <ol>
  <li>
  <h2><span>Slide One</span></h2>
  <div id="s1"><a href="URL OF SITE GOES HERE"><img src="URL OF IMAGE GOES HERE" width="500" height=200"></a></div>
  </li>
  <li>
  <h2><span>Slide Two</span></h2>
  <div id="s2"><a href="URL OF SITE GOES HERE"><img src="URL OF IMAGE GOES HERE" width="500" height=200"></a></div>
  </li>
  <li>
  <h2><span>Slide Three</span></h2>
  <div id="s3"><a href="URL OF SITE GOES HERE"><img src="URL OF IMAGE GOES HERE" width="500" height=200"></a></div>
  </li>
  <li>
  <h2><span>Slide Four</span></h2>
  <div id="s4"><a href="URL OF SITE GOES HERE"><img src="URL OF IMAGE GOES HERE" width="500" height=200"></a></div>
  </li>
  <li>
  <h2><span>Slide Five</span></h2>
  <div id="s5"><a href="URL OF SITE GOES HERE"><img src="URL OF IMAGE GOES HERE" width="500" height=200"></a></div>
  </li>
  </ol>
  <noscript>
  <p>Please enable JavaScript to get the full experience.</p>
  </noscript>
  </div>
</center>

runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: code for slideshow like this

Post by lovely King on August 16th 2013, 4:18 pm

thanks much It works well .. solved

lovely King
Forumember

Posts : 57
Reputation : 1
Language : Arabic
Location : Egypt

http://topyouth.gamerzfun.com

Back to top Go down

Solved Re: code for slideshow like this

Post by SLGray on August 16th 2013, 8:36 pm

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36673
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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