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.

slide show to big

View previous topic View next topic Go down

slide show to big

Post by rohan aja on 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?


rohan aja
Forumember

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

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

Back to top Go down

Re: slide show to big

Post by Kaizer Lee on 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
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

Re: slide show to big

Post by kirk on 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?


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
Forumaster

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

Back to top Go down

Re: slide show to big

Post by Kaizer Lee on 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
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

Re: slide show to big

Post by kirk on 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
Forumaster

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

Back to top Go down

Re: slide show to big

Post by Kaizer Lee on 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 http://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
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

Re: slide show to big

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


rohan aja
Forumember

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

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

Back to top Go down

Re: slide show to big

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

If the topic is solved, please edit your first post to solve Wink

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

View previous topic View next topic Back to top


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