Travis Beck » The ImageSlider MooTools class

The ImageSlider MooTools class Travis October 6th, 2008

10 comments

I’ve written a proper MooTools class for the slider I made for the portfolio page that slides the thumbnails back and forth. Here’s how it works.

Download the script and demo
View the demo
Download the MooTools framework

Setting up your Markup

In order for the script to work you need to setup your document to mask out the elements you’re sliding. here’s a diagram of what I’m talking about:

Example markup:

      <div id="maskDiv">
         <div id="sliderContainer">
            <div class="sliderElement"><p>Element 1</p></div>
            <div class="sliderElement"><p>Element 2</p></div>
            <div class="sliderElement"><p>Element 3</p></div>
            <div class="sliderElement"><p>Element 4</p></div>
            <div class="sliderElement"><p>Element 5</p></div>
            <div class="sliderElement"><p>Element 6</p></div>
            <div class="sliderElement"><p>Element 7</p></div>
         </div>
         <a href="#" id="leftBtn">move left</a>
         <a href="#" id="rightBtn">move right</a>
      </div>

Example CSS:

#maskDiv{
   width: 300px;
   height: 200px;
   overflow: hidden;
}
#sliderContainer{
   height: 100px;
   margin-top: 50px;
}
.sliderElement{
   width: 70px;
   margin: 15px 15px;
   height: 70px;
   float: left;
}

Linking the required JavaScript files

Now that your document is setup correctly to use the ImageSlider, you need to link the appropriate javascript files in the head of your document. ImageSlider requires MooTools 1.2. Place the following lines before the closing head tag in the top of your document.

<script src="/path_to/mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="/path_to/imageslider.min.js" type="text/javascript" charset="utf-8"></script>

Make sure that you call the ImageSlider script AFTER Mootools or it won’t work.

Initializing the ImageSlider

Now you need to call the ImageSlider class passing to it the variables needed to get the ImageSlider working. ImageSlider takes 5 required and 3 optional arguments.

objToSlide: REQUIRED (String) – The id of the holder element that will be sliding.
sliderElements: REQUIRED (String) – The type of elements contained within the slider can be any html element(div, p, a, span).
numOfElementsToSlide: OPTIONAL (Number) – Number of elements to slide.
numOfElementsShown: REQUIRED (Number) – Number of elements visible or unmasked
leftBtn: REQUIRED (String) – The ID of the element that when clicked will slide your imageslider left.
rightBtn: REQUIRED (String) – The ID of the element that when clicked will slide your imageslider right.
easing: OPTIONAL (Function) – The type of easing to use on transition (more info on easing).
onSlideComplete: OPTIONAL (Function) – Callback Function to fire once sliding is completed. returns index.

Now lets create a new ImageSlider using our markup example above:

window.addEvent('domready', function(){
  var mySlider = new ImageSlider({
      objToSlide: 'sliderContainer',
      sliderElements: 'div',
      numOfElementsToSlide: 2, 
      numOfElementsShown: 3, 
      leftBtn: 'leftBtn',
      rightBtn: 'rightBtn',
      onSlideComplete: function(index){
         //callback function stuff here
      }
   });
});

You’ll notice that I’m using the domready Event to instantiate our new ImageSlider. This is a custom MooTools Event which will execute when the DOM has loaded. To ensure that DOM elements exist when the code attempting to access them is executed, they should be placed within the ‘domready‘ event.

View the demo of our newly created ImageSlider.

Public Methods

ImageSlider only has 1 public method.

slideTo(position:Number) This will slide to the position you specify where position is the number of the element you want to show up within the masked area.

10 comments Add Yours »

Michael October 6th, 2008 | 9:59 am
Excellent post – great script.
Kemar October 22nd, 2008 | 8:58 am
Hey,

I love it. Can you explain further if you don’t mind how you create the technique to have the respective info of the clicked thumbnail or element of the ImageSlider to show up?

Thanks Bro!
Travis October 22nd, 2008 | 10:56 am
@Kemar

Here’s a brief explanation of what’s going on.

Using naming conventions I’m able to link the thumbnails to their respective detail section. For instance the thumbnail div with id #corprasoftLink is linked to the details div with id #corprasoftDetails.

All of the sections are already on the page and just hidden on page load. Whenever a user clicks the thumbnail a function is fired that, using the naming conventions mentioned earlier, finds the corresponding details section, clones it, injects it back into the page as a child of a masking div, but offset to the right. Then i animate the whole thing to the left.

I’m also setting a location hash so that you can hotlink directly to a particular portfolio section ( http://travisjbeck.com/portfolio.html#wildcat ) for example.
Rajnikant January 10th, 2009 | 1:49 am
Chaaka Jevu che
Gorkreg April 20th, 2009 | 2:10 pm
Hi!
I was looking for something like that and finally found it. Thanks. One problem: it doesn’t work in IE6. Not in my page nor in your example but it does work in your webpage’s portfolio. How did you do it?
Travis April 20th, 2009 | 3:02 pm
@Gorkreg …odd.
With just a quick glance at the CSS in firebug it might be the relative positioning of the child elements.

Try that and let me know if it fixes it.

on the child elements set
position: relative;
Gorkreg April 21st, 2009 | 9:57 am
Hi Travis!

Thanks for the answer. After playing a bit I discovered that it wasn’t the relative positioning of the child elements but the relative positioning of the Container mask what I needed. Now it works well in all the browsers.

Of course, nothing can´t be so easy and a very strange thing happened when I uploaded the files to the server. In Safari and Firefox when you press the right button, the slidercontent doesn’t stop on the next image but passes it and continues until everyrhing is white (???!!!). The same files working in my localhost work well. That is something that never happened to me.

I tried to change the parameters “numOfElementsToSlide” and “numOfElementsShown” in the Javascript code but it didn’t work. Do you have any ideas on why this could be happening?
Travis April 21st, 2009 | 4:16 pm
Only thing i can think of is that you’re not setting the width and height attributes of your img tags so the script cant calculate how far it needs to slide. This works locally because everything’s immediately loaded, but not on your server because the images haven’t fully loaded when the dom loads and the script initiates.

BTW i have version 2 of this class done with a lot of improvements and changes, i just haven’t had time to make a new blog post about it. It works with vertical scrolling and also allows you to scroll with the mouse wheel.
Gorkreg April 23rd, 2009 | 7:21 am
Thanks for that.
Justin April 29th, 2009 | 8:36 am
Can you it be made to cycle through on a timeframe?

Say every 30 seconds it changes on it’s own.

Great looking script.

Regards,

Justin