The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

slide show to big

3 posters

Go down

slide show to big Empty slide show to big

Post by rohan aja November 13th 2012, 11:35 am

when i use slide show on my forum, it seen to big. please help me to change the size to the better size?
slide show to big Dd13
rohan aja
rohan aja
Forumember

Male Posts : 124
Reputation : 1
Language : indonesia
Location : Indonesia

http://www.game-spots.co.cc

Back to top Go down

slide show to big Empty Re: slide show to big

Post by Kaizer Lee November 13th 2012, 12:51 pm

Put in all the codes you used. I can help with that, just provide the said codes, please.
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

slide show to big Empty Re: slide show to big

Post by kirk November 13th 2012, 7:37 pm

rohan aja wrote:when i use slide show on my forum, it seen to big. please help me to change the size to the better size?
slide show to big Dd13

whee is the tutorial for this. or the codes you used.
I am sure there is a way to set the dimensions in the coding.
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

slide show to big Empty Re: slide show to big

Post by Kaizer Lee November 13th 2012, 8:43 pm

I'll handle his problem, guys Smile

But yeah, do post the code and state the specific size you need :o
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

slide show to big Empty Re: slide show to big

Post by kirk November 13th 2012, 8:51 pm

Frances Kaizer wrote:I'll handle his problem, guys Smile


You'll handle the problem Razz heheh i like that cheers

Ok cool your more then welcome to help out, in fact we engorge all members to help with what they can when they can. However remember it is pretty much first come first serve basis, so if someone already has the correct solutions and wants to share now then i would say please do share so the problem can be resolved as soon as possible. Wink

But other then that if you would like to proceeded with this one, i have no problem with that thumright

Thanx for your help, keep up the good work banana
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

slide show to big Empty Re: slide show to big

Post by Kaizer Lee November 13th 2012, 9:02 pm

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 : WHATEVER SIZE YOU WANT,
            containerHeight : WHATEVER SIZE YOU WANT,
            headerWidth : WHATEVER SIZE YOU WANT,
           
            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);

or use this https://help.forumotion.com/t107962-changing-the-size-of-the-accordion

But yeah, I put in "WHATEVER YOU WANT" on the size you need to edit. Also, if you've got a problem with the picture (If you'll put one) if for example you uploaded a large one. Referring to the code I'll put below this:

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>

When adding in the [img] link, instead of that, use this instead <img src=""> so it's easier for you to modify it since you can resize a pic using <img src=IMG URL LINK" width="Any size you want" height="Any size you want"></img> or end the statement in one line like this: <img src=IMG URL LINK" width="Any size you want" height="Any size you want" /> instead of adding a closing </img> code.

@Kirk: bwi :wouhou: Very Happy Hello Dunno which to use Confused but yeah, thanks I guess, lol.
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

slide show to big Empty Re: slide show to big

Post by rohan aja November 14th 2012, 10:42 am

rohan aja
rohan aja
Forumember

Male Posts : 124
Reputation : 1
Language : indonesia
Location : Indonesia

http://www.game-spots.co.cc

Back to top Go down

slide show to big Empty Re: slide show to big

Post by Kaizer Lee November 14th 2012, 10:49 am

If the topic is solved, please edit your first post to solve Wink
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Back to top


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