MooTools 1.2 image slider – SlideItMoo

MooTools 1.2 image slider – SlideItMoo

Thursday, November 27th, 2008 in Mootools

MooTools 1.2 thumbnails slider SlideItMoo is a MooTools 1.2 JavaScript plugin for sliding images, browser friendly and nicely degradable. All CSS styling is external. The plugin can slide the images from your photo gallery either by clicking the back – forward buttons or by mouse wheel.

It can be used to display any number of thumbnails in a photo gallery or as a banner rotator. To switch from one way to the other, you simply have to set the appropriate values when instantiating the class.

There are several options inside the plugin that you can set up in order to obtain the desired effect:

  • visible: number of visible images ( default:5 )
  • showControls: either to show the back-forward buttons ( default: 1 )
  • autoSlide : automatically slide the images from your photo gallery ( in milliseconds to set the interval – default:0 )
  • transition: the transition you want to use when sliding
  • currentElement: the element currently selected. If you need to start the slider with a specific image, set this with the image number-1 ( default:0 )
  • thumbsContainer: the id of the thumbnails/images container
  • elementScrolled: the id of the container of thumbsContainer variable
  • overallContainer: the id of the elementScrolled variable

There’s a new version developed for this script. You’re encouraged to use the version 1.1 available here. Please report any bugs you might find. Thank you and enjoy!
Comments are closed for this version of the script. Please use the new version and place any comments/issues there.

To use it, you need to include the plugin into the header section of your page after the MooTools 1.2 framework and then create an instance of the SlideItMoo class:

<script src="script/mootools-1.2.1-core.js" type="text/javascript"><!--mce:0--></script>
<script src="script/mootools-1.2-more.js" type="text/javascript"><!--mce:1--></script>
<script src="script/SlideItMoo.js" type="text/javascript"><!--mce:2--></script>
<script type="text/javascript"><!--mce:3--></script>

Giving the fact that you can download MooTools having only the modules you need (in order to reduce file size), here’s the list of modules used by this script:

MooTools core:

  • Core: all
  • Native: all
  • Class: all
  • Element: all
  • Utilities: DomReady
  • Fx: Fx, Fx.Transitions

Mootools more:

  • Fx : Fx.Scroll

The CSS styling behind all this is very simple; the only thing you need to remember is to put on the thumbnails/banners container the whitespace:nowrap property. Besides that, you can use your own id’s in your html and then provide them when you instantiate the class.

Was this useful? Show your support.

digg MooTools 1.2 image slider – SlideItMoo

76 comments

  1. Andy says:

    is there a way to remove the bumpers on the side with the arrows. I want the arrows to appear over the image, but the left/right blocks are messing up the alignment.

    Thanks! GREAT SCRIPT

  2. I’m not sure I understand exactly what you need. If you want to remove the navigation, set showControls:0.
    There’s a newer version for this script available here. Check out that one too.

  3. Luke says:

    Look at the page in internet explorer (just look at the imgae slider) it is allover tha place.

  4. What version of IE? And what version of the script? This one or the 1.1 version?

  5. Kunal says:

    Hello Guys,

    I am using this slider but I want that slider on Mouseover with continue sliding can anyone help me for the same….?

    Thanks
    Kunal

  6. Kunal says:

    Hello Constantin,

    Can you help me for my previous message…?

    Thanks
    Kunal Shah

    • Yeah, sorry, I’ve been caught up with something else. Please download the new version of this script and do what’s described below.
      Change lines 97 and 98 in slideitmoo-1.1.js with this:

      this.fwd.addEvents({
      ‘mouseover’: function(){
      this.direction = 1;
      this.startAutoSlide();
      }.bind(this),
      ‘mouseout’: function(){
      $clear(this.autoSlide);
      }.bind(this)
      });

      this.bkwd.addEvents({
      ‘mouseover’: function(){
      this.direction = -1;
      this.startAutoSlide();
      }.bind(this),
      ‘mouseout’: function(){
      $clear(this.autoSlide);
      }.bind(this)
      });

  7. Kunal says:

    Hello Constantin,

    It is not working I have add your code in 97 and 98… can you please help me again for it (I am using IE 7 and FF 3.0.8)

    Thanks
    Kunal Shah

  8. Have you downloaded the new slideitmoo version? It’s available here.

    Lines 97 and 98 are:
    this.fwd.addEvent(‘click’, this.slide.bind(this).pass(1));
    this.bkwd.addEvent(‘click’, this.slide.bind(this).pass(-1));

    Again, this is for the new version of slideitmoo.

  9. Kunal says:

    yeah! I have do that

    can you please check this out!

    http://www.freeimagehosting.net/uploads/7dd2a1418c.jpg

    Thanks for your valuable time :)

    Kunal Shah

  10. I see now. The problem is with the single quotes. Replace all of them by hand in the example I gave above and all should be fine. When you pasted, instead of ‘ you ended up with `

  11. Kunal says:

    Oh! yeah

    got it thanks for your help and Great Support!

    Thanks a Lot!!!!!

    Kunal

  12. [...] 47. MooTools 1.2 image slider – SlideItMoo [...]